Другое меню на мобильном устройстве

Question

Как я могу получить разные стили меню в макете.

Например, на рабочем столе есть домашний, профиль и сообщения, а в гибкой мобильной компоновке должен быть значок перед каждой точкой меню. но не в настольной версии.

Я использую bootstrap в качестве рамки, и я попробовал пару вещей, но это не сработало для меня.

<header role="navigation" class="navbar navbar-default navbar-fixed-top"> 
<div class="container"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a href="#" class="navbar-brand">Brand</a> 
    </div> 
    <!-- Collection of nav links and other content for toggling --> 
    <div id="navbarCollapse" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">Profile</a></li> 
      <li><a href="#">Messages</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#">Login</a></li> 
     </ul> 
    </div> 
</div> 

Должен ли я создать дополнительное мобильное меню и отображение нормального меню отключается, если окно просмотра IST меньше, чем рабочий стол? Jsfiddle

Answer 1

Я думаю, что вам нужны медиа-запросы.

http://www.w3schools.com/css/css_rwd_mediaqueries.asp

Пример:

body { 
    background-color:lightgreen; 
} 

@media only screen and (max-width: 500px) { 
    body { 
     background-color:lightblue; 
    } 
} 

Когда ширина этого документа составляет менее 500 пикселей, цвет фона является "Lightblue", в противном случае это "LIGHTGREEN".

http://www.w3schools.com/css/tryit.asp?filename=tryresponsive_mediaquery

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

И, пожалуйста, не используйте JQuery, как сказал linusg. JQuery устарел, и это было долгое время, но сегодня его уже нет. Используйте обычный javascript (используйте новейший стандарт Ecmascript6 и, возможно, Ecmascript7).

Answer 2

Его так же просто, как Zlatko Vujicic прокомментировал: просто добавьте медиа-запрос в ваш css, который устанавливает display: none для макета небольшого устройства при достижении определенного размера.

Хотя у меня иногда возникают проблемы с этим, вы также можете использовать javascript (jquery), чтобы скрыть мобильную навигацию.

Надеюсь, это поможет