html – Separate menu for desktop and mobile versions of the site

Question:

The design of the project assumes the presence of a separate navigation for both the desktop version of the site and the mobile one. It should look something like this:

<nav>

  <!--десктопная версия навигации-->

  <ul class="desktop">
    <li><a href="#">Главная</a></li>
    <li><a href="#">Продукция</a></li>
    <li><a href="#">Аксессуары</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>

  <!--мобильная версия навигации-->

  <ul class="mobile">
    <li><a href="#">Главная</a></li>
    <li><a href="#">Продукция тип 1</a></li>
    <li><a href="#">Продукция тип 2</a></li>
    <li><a href="#">Аксессуары тип 1</a></li>
    <li><a href="#">Аксессуары тип 2</a></li>
    <li><a href="#">Аксессуары тип 3</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>

</nav>

The site is one-page and navigation is performed by anchors.

To implement such a navigation option, only substitution using media queries comes to my mind, but! I'm not entirely sure if this is correct both in terms of markup + styles and from a search engine optimization perspective.

The question is: how to correctly solve such a seemingly simple problem? Thanks to!

Answer:

Could be so. The fact that WITHOUT classes is for all devices.

.mobile shown for mobile devices only.

.desktop – large screen

<nav>

  <ul>
    <li><a href="#">Главная</a></li>
    <li class="desktop"><a href="#">Продукция</a></li>
    <li class="mobile"><a href="#">Продукция тип 1</a></li>
    <li class="mobile"><a href="#">Продукция тип 2</a></li>
    <li class="desktop"><a href="#">Аксессуары</a></li>
    <li class="mobile"><a href="#">Аксессуары тип 1</a></li>
    <li class="mobile"><a href="#">Аксессуары тип 2</a></li>
    <li class="mobile"><a href="#">Аксессуары тип 3</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>

</nav>
Post Views: 8
Scroll to Top