3

Дизайн проекта предполагает наличие отдельной навигации как для десктопной версии сайта, так и для мобильной. Примерно это должно выглядеть так:

<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>

Сайт одностраничный и навигация выполняется по якорям.

Для реализации такого варианта навигации мне на ум приходит только подмена при помощи media queries, но! я не совсем уверен, что это правильно как с точки зрения разметки+стилей, так и сточки зрения поисковой оптимизации.

Вопрос: как правильно решить такую вот казалось бы простую задачу? Благодарю!

2 ответа 2

1

Можно и так. То что БЕЗ классов - для всех устройств.

.mobile показывается только для мобильных устройств.

.desktop - большой экран

<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>
0

В принципе не вижу ничего что повредило бы поисковой оптимизации. Как раз наоборот, для поисковиков будет привлекательнее сайт, не просто адаптированный под мобильную версию, но и оптимизированный для мобильного поиска.

1
  • Постарайтесь писать более развернутые ответы. Поясните, на чем основано ваше утверждение? 6 окт 2015 в 15:36

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.