1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!-- --> <link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css" type="text/css" media="all" /><!-- бустрап подкл --> <nav class="navbar-default"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mymenu"><!-- айдишник меню data-target="#mymenu" --> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span><!-- Эт просто полосочки --> </button> <a class="navbar-brand" href="#">Index</a> </div> <!-- бустрап скрипты --> <div class="collapse navbar-collapse" id="mymenu"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link</a></li> <li><a href="#">LinkLink</a></li> <li><a href="#">LinkLinkLink</a></li> <li><a href="#">LinkLinkLinkLink</a></li> </ul> </div><!-- /.navbar-collapse --> </nav> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><!-- библиотека --> <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script><!-- бустрап скрипты --> |
1) Как оно выглядит по умолчанию
2) Так при уменьшении экрана
3) Ну а так если нажать на иконку, вот и наше супер пупер адаптивное меню на бусрапе и сделано
Скачать: Бусрап простое выпадающее меню
| Категория: Вёрстка
| Тэги: bootstrap