24 февраля 2014

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

Данное меню можно наблюдать на этом сайте. При разрешении экрана устройства до 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 Павел 26.06.2014 05:43
Я понимаю, что "краткость - сестра таланта", но не настолько же!

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





Практически весь контент размещенный на сайте, вся информация является продуктом студии WSI. Если материалы взяты с других ресурсов, то обязательно указана ссылка на эти ресурсы. Вы можете бесплатно пользоваться информацией с нашего сайта, размещать ее на своих сайтах, но так же обязательна ссылка на наш сайт, Web-Sputnik.Info.


Меню
Копирайт © 2024 'Tochcha' Все права защищены