Дополнительная навигация в меню Bootstrap 3 / Меню / Сниппеты Bootstrap

Версия: v1.0.1

Каталог: Сниппеты Bootstrap

Категория: Меню

Bootstrap: 3

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Английский

Уникальный ID: 2043

Количество символов:

Посмотрели: 6769 раз

Помощь: установка & настройка

Подбери: Домен для сайта

Прокомментировали: 0 раз

Рейтинг: 4.8 / 5 - 5 голосов

Тип лицензии: CC BY 4.0

Авторство: https://goo.gl/UqsgBA

Информация: Пользователям

Информация: Правообладателям

Теги: Toggle, snippet, navbar, Menu, Bootstrap

Поделился: BootstrapТема

Добавлено: 2017-05-11 в 11:46

Метка: 1566191866

⇄ ⇅

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Toggle Navbar | BootstrapTema</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/*body background */
body{background:#d1d1d1}

/*Navbar effect */
.navbar-brand { position: relative; z-index: 2; }
.navbar-nav.navbar-right .btn { position: relative; z-index: 2; padding: 4px 20px; margin: 10px auto; }
.navbar .navbar-collapse { position: relative; }
.navbar .navbar-collapse .navbar-right > li:last-child { padding-left: 22px; }
.navbar .nav-collapse { position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; margin: 0; padding-right: 120px; padding-left: 80px; width: 100%; }
.navbar.navbar-default .nav-collapse { background-color: #f8f8f8; }
.navbar.navbar-inverse .nav-collapse { background-color: #222; }
.navbar .nav-collapse .navbar-form { border-width: 0; box-shadow: none; }
.nav-collapse>li { float: right; }
.btn.btn-circle { border-radius: 50px; }
.btn.btn-outline { background-color: transparent; }
@media screen and (max-width: 767px) {
 .navbar .navbar-collapse .navbar-right > li:last-child { padding-left: 15px; padding-right: 15px; } 
 .navbar .nav-collapse { margin: 7.5px auto; padding: 0; }
 .navbar .nav-collapse .navbar-form { margin: 0; }
 .nav-collapse>li { float: none; }
}
</style>
</head>
<body>
 
<div class="container-fluid">
 
 <nav class="navbar navbar-default">
 <div class="container">
 
 <div class="navbar-header">
 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1">
 <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="#">Brand</a>
 </div>
 
 
 <div class="collapse navbar-collapse" id="navbar-collapse-1">
 <ul class="nav navbar-nav navbar-right">
 <li><a href="#">Home</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Services</a></li>
 <li><a href="#">Works</a></li>
 <li><a href="#">News</a></li>
 <li><a href="#">Contact</a></li>
 <li>
 <a class="btn btn-default btn-outline btn-circle" data-toggle="collapse" href="#nav-collapse1" aria-expanded="false" aria-controls="nav-collapse1">Categories</a>
 </li>
 </ul>
 <ul class="collapse nav navbar-nav nav-collapse" id="nav-collapse1">
 <li><a href="#">Web design</a></li>
 <li><a href="#">Development</a></li>
 <li><a href="#">Graphic design</a></li>
 <li><a href="#">Print</a></li>
 <li><a href="#">Motion</a></li>
 <li><a href="#">Mobile apps</a></li>
 </ul>
 </div>
 </div>
 </nav>
 
 
 <nav class="navbar navbar-default">
 <div class="container">
 
 <div class="navbar-header">
 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-2">
 <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="#">Brand</a>
 </div>
 
 
 <div class="collapse navbar-collapse" id="navbar-collapse-2">
 <ul class="nav navbar-nav navbar-right">
 <li><a href="#">Home</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Services</a></li>
 <li><a href="#">Works</a></li>
 <li><a href="#">News</a></li>
 <li><a href="#">Contact</a></li>
 <li>
 <a class="btn btn-default btn-outline btn-circle" data-toggle="collapse" href="#nav-collapse2" aria-expanded="false" aria-controls="nav-collapse2">Sign in</a>
 </li>
 </ul>
 <div class="collapse nav navbar-nav nav-collapse" id="nav-collapse2">
 <form class="navbar-form navbar-right form-inline" role="form">
 <div class="form-group">
 <label class="sr-only" for="Email">Email</label>
 <input type="email" class="form-control" id="Email" placeholder="Email" autofocus required />
 </div>
 <div class="form-group">
 <label class="sr-only" for="Password">Password</label>
 <input type="password" class="form-control" id="Password" placeholder="Password" required />
 </div>
 <button type="submit" class="btn btn-success">Sign in</button>
 </form>
 </div>
 </div>
 </div>
 </nav>
 
 
 <nav class="navbar navbar-inverse">
 <div class="container">
 
 <div class="navbar-header">
 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-3">
 <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="#">Brand</a>
 </div>
 
 
 <div class="collapse navbar-collapse" id="navbar-collapse-3">
 <ul class="nav navbar-nav navbar-right">
 <li><a href="#">Home</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Services</a></li>
 <li><a href="#">Works</a></li>
 <li><a href="#">News</a></li>
 <li><a href="#">Contact</a></li>
 <li>
 <a class="btn btn-default btn-outline btn-circle" data-toggle="collapse" href="#nav-collapse3" aria-expanded="false" aria-controls="nav-collapse3">Search</a>
 </li>
 </ul>
 <div class="collapse nav navbar-nav nav-collapse" id="nav-collapse3">
 <form class="navbar-form navbar-right" role="search">
 <div class="form-group">
 <input type="text" class="form-control" placeholder="Search" />
 </div>
 <button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
 </form>
 </div>
 </div>
 </div>
 </nav>
 
 
 <nav class="navbar navbar-inverse">
 <div class="container">
 
 <div class="navbar-header">
 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-4">
 <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="#">Brand</a>
 </div>
 
 
 <div class="collapse navbar-collapse" id="navbar-collapse-4">
 <ul class="nav navbar-nav navbar-right">
 <li><a href="#">Home</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Services</a></li>
 <li><a href="#">Works</a></li>
 <li><a href="#">News</a></li>
 <li><a href="#">Contact</a></li>
 <li>
 <a class="btn btn-default btn-outline btn-circle" data-toggle="collapse" href="#nav-collapse4" aria-expanded="false" aria-controls="nav-collapse4">Profile <i class=""></i> </a>
 </li>
 </ul>
 <ul class="collapse nav navbar-nav nav-collapse" role="search" id="nav-collapse4">
 <li><a href="#">Support</a></li>
 <li class="dropdown">
 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><img class="img-circle" src="https://bootstraptema.ru/snippets/icons/2016/mia/1.png" alt="USER" width="20" /> USER <span class="caret"></span></a>
 <ul class="dropdown-menu" role="menu">
 <li><a href="#">My profile</a></li>
 <li><a href="#">Favorited</a></li>
 <li><a href="#">Settings</a></li>
 <li class="divider"></li>
 <li><a href="#">Logout</a></li>
 </ul>
 </li>
 </ul>
 </div>
 </div>
 </nav>
</div>
 
</body>

BootstrapTema

Дополнительная навигация в меню Bootstrap 3

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0