[Есть решение] Как правильно организовать навигацию (для мобильных)?

Question

[RodgerFox]

Всем привет!
Подскажите как лучше организовать навигацию как у эпл (прим. www.apple.com/ru/mac ), т.е. при мобильных идет слайдер навигации, а для широкоформатных его нет. Ищу решения желательно без js.
Делаю на бутстрапе, но ничего подходящего в нем нету.
Сейчас структура:

<div>
<nav>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
</nav>
</div>

Можно создать обертку для nav, но как быть с шириной для nav?
Решение:

nav {
overflow-x: scroll;
white-space: nowrap;
}
a {
display: inline-block;
white-space: normal;
}

Можно как то закрыть вопрос, но не удалять его?

Answer 1

[IceJOKER]

в bootstrap как раз таки есть много чего подходящего, там есть готовые классы для вывода/скрытия тех или иных элементов в зависимости от девайсов(ширины девайсов), читайте документацию - getbootstrap.com/css/#responsive-utilities

Comments

[RodgerFox]

не, дублировать контент это точно не то.

[IceJOKER]

RodgerFox: не дублируйте, кто вам сказал дублировать ? О_О

[RodgerFox]

а как?)

[IceJOKER]

RodgerFox: я написал вам ссылку, если не получается, то самое время заплатить тому, у кого получается или же задавать конкретные вопросы

[RodgerFox]

вы дали ссылку и якорь на хелперы (классы), вся их задача показывать или скрывать контент в зависимости от экрана устройства, как это может решить задачу без дублирования контента, т.е. используем 2 навигации, но каждая из них заточена под свои размеры экрана. Я сам верстальщик, и все равно не понимаю как эти хелперы могут помочь реализовать задачу))) без дублирования контента. А кидаться ссылками, без понятия, что в них это не помощь, а мелкое вредительство.

[IceJOKER]

RodgerFox: зачем дублировать? можно же структурировать одну навигацию так, чтобы в зависимости от экрана можно убрала скрыть некоторые элементы.
я не вижу вашего кода, страницы, откуда мне знать какая там структура, но подобные задачи я решал без дублирования, а просто правильно организовав структуру.
"А кидаться ссылками, без понятия..." - уж поверьте, не раз пользовался этими хелперами и знаю что да как

[RodgerFox]

Нету лишних элементов. Вы структуру выше видели? в ней одна ссылка ведет на 1 страницу, как это можно изменить? Или цеплять "повыше", "пониже" доп. блоки? И что они дадут?

[RodgerFox]

RodgerFox: Обновил структуру, обертку для nav, без неё точно никак.

[IceJOKER]

RodgerFox: хрен вас поймешь.
напишите букву в букву что вы хотите, а то я на сайте apple не увидел никакого слайдера , менял разрешения экрана

[RodgerFox]

Я решил вернуться к своему любимому ксс, все решил без скриптов, юзаем white-space: nowrap; и профит. Спасибо за потраченное время.
p.s. в моб. версии на пример навигация в магазине ( по основной линейке товаров), или на промо страницах.
Суть в том, что бы контент... да не важно) можно посмотреть и понять.