Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <nav class="navbar navbar-default" role="navigation">
- <div class="navbar-header">
- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-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>
- <!--/.navbar-header-->
- <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
- <ul class="nav navbar-nav">
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">One Column <b class="caret"></b></a>
- <ul class="dropdown-menu">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li><a href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a href="#">Separated link</a></li>
- <li class="divider"></li>
- <li><a href="#">One more separated link</a></li>
- </ul>
- </li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">Two Column <b class="caret"></b></a>
- <ul class="dropdown-menu multi-column columns-2">
- <div class="row">
- <div class="col-sm-6">
- <ul class="multi-column-dropdown">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li><a href="#">Something else here that's extra long so we can see how it looks</a></li>
- <li class="divider"></li>
- <li><a href="#">Separated link</a></li>
- <li class="divider"></li>
- <li><a href="#">One more separated link</a></li>
- </ul>
- </div>
- <div class="col-sm-6">
- <ul class="multi-column-dropdown">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li><a href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a href="#">Separated link</a></li>
- <li class="divider"></li>
- <li><a href="#">One more separated link</a></li>
- </ul>
- </div>
- </div>
- </ul>
- </li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">Three Column <b class="caret"></b></a>
- <ul class="dropdown-menu multi-column columns-3">
- <div class="row">
- <div class="col-sm-4">
- <ul class="multi-column-dropdown">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li><a href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a href="#">Separated link</a></li>
- <li class="divider"></li>
- <li><a href="#">One more separated link</a></li>
- </ul>
- </div>
- <div class="col-sm-4">
- <ul class="multi-column-dropdown">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li><a href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a href="#">Separated link</a></li>
- <li class="divider"></li>
- <li><a href="#">One more separated link</a></li>
- </ul>
- </div>
- <div class="col-sm-4">
- <ul class="multi-column-dropdown">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li><a href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a href="#">Separated link</a></li>
- <li class="divider"></li>
- <li><a href="#">One more separated link</a></li>
- </ul>
- </div>
- </div>
- </ul>
- </li>
- <li><a href="#">Link</a></li>
- </ul>
- </div>
- <!--/.navbar-collapse-->
- </nav>
- <!--/.navbar-->
- .dropdown-menu {
- min-width: 200px;
- }
- .dropdown-menu.columns-2 {
- min-width: 400px;
- }
- .dropdown-menu.columns-3 {
- min-width: 600px;
- }
- .dropdown-menu li a {
- padding: 5px 15px;
- font-weight: 300;
- }
- .multi-column-dropdown {
- list-style: none;
- }
- .multi-column-dropdown li a {
- display: block;
- clear: both;
- line-height: 1.428571429;
- color: #333;
- white-space: normal;
- }
- .multi-column-dropdown li a:hover {
- text-decoration: none;
- color: #262626;
- background-color: #f5f5f5;
- }
- @media (max-width: 767px) {
- .dropdown-menu.multi-column {
- min-width: 240px !important;
- overflow-x: hidden;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement