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 that you have read and understand our privacy policy and code of conduct.

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