Меню адаптивное, адекватно отображается на мобильных устройствах.

Данное меню можно наблюдать на этом сайте. При разрешении экрана устройства до 980px , меню превращается в коллапсирующее, раскрывающееся по тачу.

На десктопе:

меню на десктопе

 На мобильных устройствах:

меню на планшете

На мобильных (активное):

меню на мобильных

 

HTML: 

<div class="navbar navbar-inverse">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav menu">
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
</ul>
</div>
</div>
</div>

 В <head> следует подключить bootstrap.js и bootstrap.css стандартным образом.

 

Комментарии   

+3 #1 Павел 26.06.2014 05:43
Я понимаю, что "краткость - сестра таланта", но не настолько же!

Голый код без комментариев, как понять, что и как работает?
Цитировать
0 #2 Андрей 30.11.2014 14:38
В свернутом виде не работает в опере
(26.0.1656.24 -)
Цитировать
-1 #3 Андрей 30.11.2014 14:39
Не работает в опере 26.0.1656.24 в свернутом виде
Цитировать

Добавить комментарий


Защитный код
Обновить