Revision 239 is a pre-publication revision. (Viewing current revision instead.)

BootStrap 3rd level NavBar dropdowns

http://jsfiddle.net/2Smgv/224/ [html]<div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container-fluid"> <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a href="#" class="brand">Project name</a> <div class="nav-collapse"> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li> <a href="#">2-level Dropdown <i class="icon-arrow-right"></i></a> <ul class="dropdown-menu sub-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 class="nav-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="nav-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form action="" class="navbar-search pull-left"> <input type="text" placeholder="Search" class="search-query span2"> </form> <ul class="nav pull-right"> <li><a href="#">Link</a></li> <li class="divider-vertical"></li> <li class="dropdown"> <a class="#" href="#">Menu</a> </li> </ul> </div><!-- /.nav-collapse --> </div> </div> </div> <hr> <ul class="nav nav-pills"> <li class="active"><a href="#">Regular link</a></li> <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu" id="menu1"> <li> <a href="#">2-level Menu <i class="icon-arrow-right"></i></a> <ul class="dropdown-menu sub-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 class="nav-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </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> </ul> </li> <li class="dropdown"> <a href="#">Menu</a> </li> <li class="dropdown"> <a href="#">Menu</a> </li> </ul> [/html] [css]body { padding-top: 60px; padding-bottom: 40px; } .sidebar-nav { padding: 9px 0; } .dropdown-menu .sub-menu { left: 100%; position: absolute; top: 0; visibility: hidden; margin-top: -1px; } .dropdown-menu li:hover .sub-menu { visibility: visible; display: block; } .navbar .sub-menu:before { border-bottom: 7px solid transparent; border-left: none; border-right: 7px solid rgba(0, 0, 0, 0.2); border-top: 7px solid transparent; left: -7px; top: 10px; } .navbar .sub-menu:after { border-top: 6px solid transparent; border-left: none; border-right: 6px solid #fff; border-bottom: 6px solid transparent; left: 10px; top: 11px; left: -6px; } [/css]

Revisions

Revision Differences

July 23, 2012 @ 01:45:38Current Revision
Content
 Added: http://jsfiddle.net/2Smgv/224/
 Added: [html]&lt;div class= &quot;navbar navbar-fixed- top&quot;&gt;
 Added: &lt;div class= &quot;navbar- inner&quot;&gt;
 Added: &lt;div class= &quot;container- fluid&quot;&gt;
 Added: &lt;a data-target= &quot;.nav-collapse&quot;  data-toggle= &quot;collapse&quot;  class=&quot;btn btn-navbar&quot;&gt;
 Added: &lt;span class= &quot;icon-bar&quot; &gt;&lt;/span&gt;
 Added: &lt;span class= &quot;icon-bar&quot; &gt;&lt;/span&gt;
 Added: &lt;span class= &quot;icon-bar&quot; &gt;&lt;/span&gt;
 Added: &lt;/a&gt;
 Added: &lt;a href=&quot; #&quot; class= &quot;brand&quot;&gt;Project name&lt;/a&gt;
 Added: &lt;div class= &quot;nav-collapse&quot;&gt;
 Added: &lt;ul class= &quot;nav&quot;&gt;
 Added: &lt;li class= &quot;active&quot;&gt;&lt; a href=&quot;#&quot;&gt; Home&lt;/a&gt;&lt;/li&gt;
 Added: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;
 Added: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;
 Added: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;
 Added: &lt;li class= &quot;dropdown&quot;&gt;
 Added: &lt;a data-toggle= &quot;dropdown&quot; class= &quot;dropdown- toggle&quot;  href=&quot; #&quot;&gt;Dropdown &lt; b class=&quot;caret&quot; &gt;&lt;/b&gt;&lt;/a&gt;
 Added: &lt;ul class= &quot;dropdown- menu&quot;&gt;
 Added: &lt;li&gt;
 Added: &lt;a href=&quot; #&quot;&gt;2-level Dropdown &lt; i class=&quot;icon-arrow- right&quot;&gt; &lt;/i&gt;&lt;/a&gt;
 Added: &lt;ul class= &quot;dropdown-menu sub-menu&quot;&gt;
 Added: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Action&lt;/a&gt;&lt;/li&gt;
 Added: &lt;li&gt;&lt; a href=&quot; #&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;
 Added: &lt;li&gt;&lt; a href=&quot; #&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;
 Added: &lt;li class= &quot;divider&quot; &gt;&lt;/li&gt;
 Added: &lt;li class= &quot;nav-header&quot;&gt;Nav header&lt;/li&gt;
 Added: &lt;li&gt;&lt; a href=&quot; #&quot;&gt;Separated link&lt;/a&gt;&lt;/li&gt;
 Added: &lt;li&gt;&lt; a href=&quot; #&quot;&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
 Added: &lt;/ul&gt;
 Added: &lt;/li&gt;
 Added: &lt;li&gt;&lt; a href=&quot; #&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;
 Added: &lt;li&gt;&lt; a href=&quot; #&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;
 Added: &lt;li class= &quot;divider&quot; &gt;&lt;/li&gt;
 Added: &lt;li class= &quot;nav-header&quot;&gt;Nav header&lt;/li&gt;
 Added: &lt;li&gt;&lt; a href=&quot; #&quot;&gt;Separated link&lt;/a&gt;&lt;/li&gt;
 Added: &lt;li&gt;&lt; a href=&quot; #&quot;&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
 Added: &lt;/ul&gt;
 Added: &lt;/li&gt;
 Added: &lt;/ul&gt;
 Added: &lt;form action= &quot;&quot; class=&quot; navbar-search pull-left&quot;&gt;
 Added: &lt;input type= &quot;text&quot;  placeholder= &quot;Search&quot; class= &quot;search-query span2&quot;&gt;
 Added: &lt;/form&gt;
 Added: &lt;ul class=&quot;nav pull-right&quot;&gt;
 Added: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;
 Added: &lt;li class= &quot;divider- vertical&quot; &gt;&lt;/li&gt;
 Added: &lt;li class= &quot;dropdown&quot;&gt;
 Added: &lt;a class= &quot;#&quot;  href=&quot; #&quot;&gt;Menu&lt;/a&gt;
 Added: &lt;/li&gt;
 Added: &lt;/ul&gt;
 Added: &lt;/div&gt;&lt;!-- /.nav-collapse --&gt;
 Added: &lt;/div&gt;
 Added: &lt;/div&gt;
 Added: &lt;/div&gt;
 Added: &lt;hr&gt;
 Added: &lt;ul class=&quot;nav nav-pills&quot;&gt;
 Added: &lt;li class= &quot;active&quot;&gt;&lt; a href=&quot; #&quot;&gt;Regular link&lt;/a&gt;&lt;/li&gt;
 Added: &lt;li class= &quot;dropdown&quot;&gt;
 Added: &lt;a href=&quot; #&quot; data- toggle=&quot; dropdown&quot;  class=&quot; dropdown-toggle&quot;&gt; Dropdown &lt; b class=&quot; caret&quot;&gt; &lt;/b&gt;&lt;/a&gt;
 Added: &lt;ul class= &quot;dropdown-menu&quot;  id=&quot;menu1&quot;&gt;
 Added: &lt;li&gt;
 Added: &lt;a href=&quot; #&quot;&gt;2-level Menu &lt;i class= &quot;icon-arrow-right&quot; &gt;&lt;/i&gt;&lt;/a&gt;
 Added: &lt;ul class= &quot;dropdown-menu sub-menu&quot;&gt;
 Added: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Action&lt;/a&gt;&lt;/li&gt;
 Added: &lt;li&gt;&lt; a href=&quot; #&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;
 Added: &lt;li&gt;&lt; a href=&quot; #&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;
 Added: &lt;li class= &quot;divider&quot; &gt;&lt;/li&gt;
 Added: &lt;li class= &quot;nav-header&quot;&gt;Nav header&lt;/li&gt;
 Added: &lt;li&gt;&lt; a href=&quot; #&quot;&gt;Separated link&lt;/a&gt;&lt;/li&gt;
 Added: &lt;li&gt;&lt; a href=&quot; #&quot;&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
 Added: &lt;/ul&gt;
 Added: &lt;/li&gt;
 Added: &lt;li&gt;&lt; a href=&quot; #&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;
 Added: &lt;li&gt;&lt; a href=&quot; #&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;
 Added: &lt;li class= &quot;divider&quot; &gt;&lt;/li&gt;
 Added: &lt;li&gt;&lt; a href=&quot; #&quot;&gt;Separated link&lt;/a&gt;&lt;/li&gt;
 Added: &lt;/ul&gt;
 Added: &lt;/li&gt;
 Added: &lt;li class= &quot;dropdown&quot;&gt;
 Added: &lt;a href=&quot; #&quot;&gt;Menu&lt;/a&gt;
 Added: &lt;/li&gt;
 Added: &lt;li class= &quot;dropdown&quot;&gt;
 Added: &lt;a href=&quot; #&quot;&gt;Menu&lt;/a&gt;
 Added: &lt;/li&gt;
 Added: &lt;/ul&gt;
 Added: [/html]
 Added: [css]body {
 Added: padding-top: 60px;
 Added: padding-bottom: 40px;
 Added: }
 Added: .sidebar-nav {
 Added: padding: 9px 0;
 Added: }
 Added: .dropdown-menu .sub-menu {
 Added: left: 100%;
 Added: position: absolute;
 Added: top: 0;
 Added: visibility: hidden;
 Added: margin-top: -1px;
 Added: }
 Added: .dropdown-menu li: hover .sub-menu {
 Added: visibility: visible;
 Added: display: block;
 Added: }
 Added: .navbar .sub- menu:before {
 Added: border-bottom:  7px solid transparent;
 Added: border-left: none;
 Added: border-right:  7px solid rgba( 0, 0, 0, 0.2);
 Added: border-top: 7px solid transparent;
 Added: left: -7px;
 Added: top: 10px;
Deleted: Added: }
 Added: .navbar .sub- menu:after {
 Added: border-top: 6px solid transparent;
 Added: border-left: none;
 Added: border-right:  6px solid #fff;
 Added: border-bottom:  6px solid transparent;
 Added: left: 10px;
 Added: top: 11px;
 Added: left: -6px;
 Added: }
 Added: [/css]

Note: Spaces may be added to comparison text to allow better line wrapping.

Tags: , ,

No comments yet.

Leave a Reply