Skip to content

Instantly share code, notes, and snippets.

@greendog
Created April 17, 2013 11:32

Revisions

  1. greendog created this gist Apr 17, 2013.
    46 changes: 46 additions & 0 deletions gistfile1.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,46 @@
    <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="dropdown">
    <a data-toggle="dropdown" class="dropdown-toggle active" href="#">Go To <b class="caret"></b></a>
    <ul class="dropdown-menu">
    <li class="dropdown submenu">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a>
    <ul class="dropdown-menu submenu-show submenu-hide">
    <li class="dropdown submenu">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1.1</a>
    <ul class="dropdown-menu submenu-show submenu-hide">
    <li><a href="#">Level 1.1.1</a></li>
    <li><a href="#">Level 1.1.2</a></li>
    <li><a href="#">Level 1.1.3</a></li>
    <li><a href="#">Level 1.1.4</a></li>
    </ul>
    </li>
    <li class="dropdown submenu">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1.2</a>
    <ul class="dropdown-menu submenu-show submenu-hide">
    <li><a href="#">Level 1.2.1</a></li>
    <li><a href="#">Level 1.2.2</a></li>
    </ul>
    </li>
    <li><a href="#">Level 1.3</a></li>
    <li><a href="#">Level 1.4</a></li>
    <li><a href="#">Level 1.5</a></li>
    </ul>
    </li>
    <li><a href="#">Other</a></li>
    </ul>
    </li>
    </ul>
    </div><!-- /.nav-collapse -->
    </div>
    </div>
    </div>
    5 changes: 5 additions & 0 deletions gistfile2.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    jQuery('.submenu').hover(function () {
    jQuery(this).children('ul').removeClass('submenu-hide').addClass('submenu-show');
    }, function () {
    jQuery(this).children('ul').removeClass('.submenu-show').addClass('submenu-hide');
    }).find("a:first").append(" &raquo; ");
    36 changes: 36 additions & 0 deletions gistfile3.css
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    .submenu-show
    {
    border-radius: 3px;
    display: block;
    left: 100%;
    margin-top: -25px !important;
    moz-border-radius: 3px;
    position: absolute;
    webkit-border-radius: 3px;
    }
    .submenu-hide
    {
    display: none !important;
    float: right;
    position: relative;
    top: auto;
    }
    .navbar .submenu-show: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 .submenu-show:after
    {
    border-bottom: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-top: 6px solid transparent;
    left: 10px;
    left: -6px;
    top: 11px;
    }