Skip to content

Instantly share code, notes, and snippets.

@marklindhout

marklindhout/menu.html

Created March 3, 2012 16:41
Download ZIP

Revisions

  1. Mark P. Lindhout revised this gist Sep 25, 2012. 1 changed file with 2 additions and 3 deletions.
    5 changes: 2 additions & 3 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,6 @@
    /*
    This CSS assumes you are using the excellent
    Modernizr (http://www.modernizr.com/) to
    detect features and browser version.
    This CSS assumes you are using IE-conditionals to detect browser version.
    In this case I'm using the classes 'ie8' and 'ie9'.
    */

    #header #access {
  2. Mark P. Lindhout revised this gist Mar 3, 2012. 2 changed files with 0 additions and 2 deletions.
    1 change: 0 additions & 1 deletion menu.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,3 @@

    <nav id="access">
    <ul class="menu">
    <li><a href="#">Home</a></li>
    1 change: 0 additions & 1 deletion style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -4,7 +4,6 @@
    detect features and browser version.
    */


    #header #access {
    float: right;
    clear: both;
  3. Mark P. Lindhout revised this gist Mar 3, 2012. 3 changed files with 206 additions and 209 deletions.
    93 changes: 45 additions & 48 deletions menu.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,48 +1,45 @@
    <header role="banner" id="header">
    <nav id="access" role="navigation">
    <div class="menu-header">
    <ul id="menu-main-menu" class="menu">
    <li><a href="/">Home</a></li>
    <li><a href="/">Page 1</a>
    <ul class="sub-menu">
    <li><a href="/">Page 1.1</a></li>
    <li><a href="/">Page 1.2</a></li>
    <li><a href="/">Page 1.3</a></li>
    <li><a href="/">Page 1.4</a></li>
    <li><a href="/">Page 1.5</a></li>
    <li><a href="/">Page 1.6</a></li>
    </ul>
    </li>
    <li ><a href="/">Page 2</a>
    <ul class="sub-menu">
    <li><a href="/">Page 2.1</a>
    <ul class="sub-menu">
    <li><a href="/">Page 2.1.1</a></li>
    <li><a href="/">Page 2.1.2</a></li>
    <li><a href="/">Page 2.1.3</a></li>
    <li><a href="/">Page 2.1.4</a></li>
    </ul>
    </li>
    <li><a href="/">Page 2.2</a></li>
    <li><a href="/">Page 2.3</a>
    <ul class="sub-menu">
    <li><a href="/">Page 2.3.1</a></li>
    <li><a href="/">Page 2.3.2</a></li>
    <li><a href="/">Page 2.3.3</a></li>
    </ul>
    </li>
    <li><a href="/">Page 2.4</a>
    <ul class="sub-menu">
    <li><a href="/">Page 2.4.1</a></li>
    <li><a href="/">Page 2.4.2</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li ><a href="/">Page 3</a></li>
    <li ><a href="/">Page 4</a></li>
    <li ><a href="/">Page 5</a></li>
    </ul>
    </div>
    </nav>
    </header>

    <nav id="access">
    <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Page 1</a>
    <ul class="sub-menu">
    <li><a href="#">Page 1.1</a></li>
    <li><a href="#">Page 1.2</a></li>
    <li><a href="#">Page 1.3</a></li>
    <li><a href="#">Page 1.4</a></li>
    <li><a href="#">Page 1.5</a></li>
    <li><a href="#">Page 1.6</a></li>
    </ul>
    </li>
    <li ><a href="#">Page 2</a>
    <ul class="sub-menu">
    <li><a href="#">Page 2.1</a>
    <ul class="sub-menu">
    <li><a href="#">Page 2.1.1</a></li>
    <li><a href="#">Page 2.1.2</a></li>
    <li><a href="#">Page 2.1.3</a></li>
    <li><a href="#">Page 2.1.4</a></li>
    </ul>
    </li>
    <li><a href="#">Page 2.2</a></li>
    <li><a href="#">Page 2.3</a>
    <ul class="sub-menu">
    <li><a href="#">Page 2.3.1</a></li>
    <li><a href="#">Page 2.3.2</a></li>
    <li><a href="#">Page 2.3.3</a></li>
    </ul>
    </li>
    <li><a href="#">Page 2.4</a>
    <ul class="sub-menu">
    <li><a href="#">Page 2.4.1</a></li>
    <li><a href="#">Page 2.4.2</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li ><a href="#">Page 3</a></li>
    <li ><a href="#">Page 4</a></li>
    <li ><a href="#">Page 5</a></li>
    </ul>
    </nav>
    36 changes: 18 additions & 18 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -4,26 +4,26 @@

    $(document).ready(function() {

    // Add an arrow inside of the link when JS is enabled
    $("ul.sub-menu").siblings('a').append('<span class="arrow"></span>');
    // Add an arrow inside of the link when JS is enabled
    $("ul.sub-menu").siblings('a').append('<span class="arrow"></span>');

    $("#header nav ul.menu > li a").hover(function() {
    $(this).closest('li').find("ul.sub-menu:first").fadeIn('fast'); //Drop down the subnav on click
    $(this).parent().hover(function() {
    // do nothing
    }, function(){
    //When the mouse hovers out of the subnav, move it back up
    $(this).parent().find("ul.sub-menu").fadeOut('fast');
    });
    $(this).parent().addClass("subhover");
    $("#access ul.menu > li a").hover(function() {
    $(this).closest('li').find("ul.sub-menu:first").fadeIn('fast'); //Drop down the subnav on click
    $(this).parent().hover(function() {
    // do nothing
    }, function(){
    //When the mouse hovers out of the subnav, move it back up
    $(this).parent().find("ul.sub-menu").fadeOut('fast');
    });
    $(this).parent().addClass("subhover");

    }, function(){
    }, function(){

    $(this).parent().removeClass("subhover");
    $(this).parent().removeClass("subhover");

    });
    });
    });
    286 changes: 143 additions & 143 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,147 +1,147 @@
    /*
    This CSS assumes you are using the excellent
    Modernizr (http://www.modernizr.com/) to
    detect features and browser version.
    This CSS assumes you are using the excellent
    Modernizr (http://www.modernizr.com/) to
    detect features and browser version.
    */


    #header #access {
    float: right;
    clear: both;
    background-color: #666;
    width: 820px;
    padding-left: 80px;
    z-index: 9999;
    }
    #header #access .menu,
    #header #access ul,
    #header #access li {
    float: left;
    display: block;
    z-index: 9999;
    }
    #header #access li a {
    color: #eee;
    text-decoration: none;
    display: block;
    padding: .5em .66em;
    margin: .25em 0;
    line-height: 1.2em;
    border-right: 1px solid #888;
    font-size: 1em;
    font-weight: normal;
    }
    #header #access .sub-menu a {
    border-right: none;
    }
    #header #access li:last-child a {
    border-right: none;
    }
    #header #access li a:hover {
    color: #fff;
    background-color: #777;
    }
    /* Drop down menu */
    #header nav#access ul.menu {
    margin: 0;
    padding: 0;
    }
    #header nav#access ul.menu li {
    float: left;
    list-style: none;
    position: relative;
    }
    #header nav#access ul.menu li a {
    float: left;
    }

    #header nav#access ul.menu li a span.arrow {
    float: right;
    width: 16px;
    height: 16px;
    margin-left: .5em;
    background: transparent url(images/menu_arrow.png) no-repeat top left;
    }
    #header nav#access ul.menu li ul.sub-menu li a span.arrow {
    background-image: url(images/menu_arrow_sub.png);
    }
    #header nav#access ul.menu li a:hover {
    color: #fff;
    }
    #header nav#access ul.menu li.current-menu-item {
    background: transparent;
    }
    #header nav#access .current-menu-item > a {
    color: #fff;
    background-color: #888;
    }
    #header nav#access ul.menu li ul.sub-menu {
    display: none;
    margin: 2.66em 0 0 0;
    padding: 0;
    position: absolute;
    background: #555;
    border: 1px solid #444;
    -webkit-box-shadow: -1px 1px 4px rgba(66,66,66,1);
    -moz-box-shadow: -1px 1px 4px rgba(66,66,66,1);
    box-shadow: -1px 1px 4px rgba(66,66,66,1);
    }
    .ie9 #header nav#access ul.menu li ul.sub-menu,
    .ie8 #header nav#access ul.menu li ul.sub-menu {
    margin: 2.66em 0 0 0;
    }
    #header nav#access ul.menu li ul.sub-menu ul.sub-menu,
    #header nav#access ul.menu li ul.sub-menu ul.sub-menu ul.sub-menu {
    display: none;
    z-index: 1;
    float: left;
    top: -2.66em;
    left: 10em;
    }
    .ie9 #header nav#access ul.menu li ul.sub-menu ul.sub-menu,
    .ie9 #header nav#access ul.menu li ul.sub-menu ul.sub-menu ul.sub-menu {
    float: left;
    top: -3em;
    }
    #header nav#access ul.menu li ul.sub-menu li {
    display: inline;
    float: right;
    clear: both;
    }
    .ie9 #header nav#access ul.menu li ul.sub-menu li,
    .ie8 #header nav#access ul.menu li ul.sub-menu li {
    display: block;
    float: right;
    clear: none;
    }
    #header nav#access ul.menu li ul.sub-menu li a {
    width: auto;
    color: #ddd;
    background-image: none;
    width: 128px;
    }
    #header nav#access ul.menu li ul.sub-menu li a:hover {
    background-color: #666;
    color: #fff;
    }
    #header #access {
    float: right;
    clear: both;
    background-color: #666;
    width: 820px;
    padding-left: 80px;
    z-index: 9999;
    }

    #header #access .menu,
    #header #access ul,
    #header #access li {
    float: left;
    display: block;
    z-index: 9999;
    }

    #header #access li a {
    color: #eee;
    text-decoration: none;
    display: block;
    padding: .5em .66em;
    margin: .25em 0;
    line-height: 1.2em;
    border-right: 1px solid #888;
    font-size: 1em;
    font-weight: normal;
    }

    #header #access .sub-menu a {
    border-right: none;
    }

    #header #access li:last-child a {
    border-right: none;
    }

    #header #access li a:hover {
    color: #fff;
    background-color: #777;
    }

    /* Drop down menu */

    #access ul.menu {
    margin: 0;
    padding: 0;
    }

    #access ul.menu li {
    float: left;
    list-style: none;
    position: relative;
    }

    #access ul.menu li a {
    float: left;
    }

    #access ul.menu li a span.arrow {
    float: right;
    width: 16px;
    height: 16px;
    margin-left: .5em;
    background: transparent url(images/menu_arrow.png) no-repeat top left;
    }

    #access ul.menu li ul.sub-menu li a span.arrow {
    background-image: url(images/menu_arrow_sub.png);
    }

    #access ul.menu li a:hover {
    color: #fff;
    }

    #access ul.menu li.current-menu-item {
    background: transparent;
    }

    #access .current-menu-item > a {
    color: #fff;
    background-color: #888;
    }

    #access ul.menu li ul.sub-menu {
    display: none;
    margin: 2.66em 0 0 0;
    padding: 0;
    position: absolute;
    background: #555;
    border: 1px solid #444;
    -webkit-box-shadow: -1px 1px 4px rgba(66,66,66,1);
    -moz-box-shadow: -1px 1px 4px rgba(66,66,66,1);
    box-shadow: -1px 1px 4px rgba(66,66,66,1);
    }

    .ie9 #access ul.menu li ul.sub-menu,
    .ie8 #access ul.menu li ul.sub-menu {
    margin: 2.66em 0 0 0;
    }

    #access ul.menu li ul.sub-menu ul.sub-menu,
    #access ul.menu li ul.sub-menu ul.sub-menu ul.sub-menu {
    display: none;
    z-index: 1;
    float: left;
    top: -2.66em;
    left: 10em;
    }

    .ie9 #access ul.menu li ul.sub-menu ul.sub-menu,
    .ie9 #access ul.menu li ul.sub-menu ul.sub-menu ul.sub-menu {
    float: left;
    top: -3em;
    }

    #access ul.menu li ul.sub-menu li {
    display: inline;
    float: right;
    clear: both;
    }

    .ie9 #access ul.menu li ul.sub-menu li,
    .ie8 #access ul.menu li ul.sub-menu li {
    display: block;
    float: right;
    clear: none;
    }

    #access ul.menu li ul.sub-menu li a {
    width: auto;
    color: #ddd;
    background-image: none;
    width: 128px;
    }

    #access ul.menu li ul.sub-menu li a:hover {
    background-color: #666;
    color: #fff;
    }
  4. @invalid-email-address Anonymous created this gist Mar 3, 2012.
    48 changes: 48 additions & 0 deletions menu.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,48 @@
    <header role="banner" id="header">
    <nav id="access" role="navigation">
    <div class="menu-header">
    <ul id="menu-main-menu" class="menu">
    <li><a href="/">Home</a></li>
    <li><a href="/">Page 1</a>
    <ul class="sub-menu">
    <li><a href="/">Page 1.1</a></li>
    <li><a href="/">Page 1.2</a></li>
    <li><a href="/">Page 1.3</a></li>
    <li><a href="/">Page 1.4</a></li>
    <li><a href="/">Page 1.5</a></li>
    <li><a href="/">Page 1.6</a></li>
    </ul>
    </li>
    <li ><a href="/">Page 2</a>
    <ul class="sub-menu">
    <li><a href="/">Page 2.1</a>
    <ul class="sub-menu">
    <li><a href="/">Page 2.1.1</a></li>
    <li><a href="/">Page 2.1.2</a></li>
    <li><a href="/">Page 2.1.3</a></li>
    <li><a href="/">Page 2.1.4</a></li>
    </ul>
    </li>
    <li><a href="/">Page 2.2</a></li>
    <li><a href="/">Page 2.3</a>
    <ul class="sub-menu">
    <li><a href="/">Page 2.3.1</a></li>
    <li><a href="/">Page 2.3.2</a></li>
    <li><a href="/">Page 2.3.3</a></li>
    </ul>
    </li>
    <li><a href="/">Page 2.4</a>
    <ul class="sub-menu">
    <li><a href="/">Page 2.4.1</a></li>
    <li><a href="/">Page 2.4.2</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li ><a href="/">Page 3</a></li>
    <li ><a href="/">Page 4</a></li>
    <li ><a href="/">Page 5</a></li>
    </ul>
    </div>
    </nav>
    </header>
    29 changes: 29 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    /*
    Add dropwdown menu
    */

    $(document).ready(function() {

    // Add an arrow inside of the link when JS is enabled
    $("ul.sub-menu").siblings('a').append('<span class="arrow"></span>');

    $("#header nav ul.menu > li a").hover(function() {

    $(this).closest('li').find("ul.sub-menu:first").fadeIn('fast'); //Drop down the subnav on click

    $(this).parent().hover(function() {
    // do nothing
    }, function(){
    //When the mouse hovers out of the subnav, move it back up
    $(this).parent().find("ul.sub-menu").fadeOut('fast');
    });

    $(this).parent().addClass("subhover");

    }, function(){

    $(this).parent().removeClass("subhover");

    });

    });
    147 changes: 147 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,147 @@
    /*
    This CSS assumes you are using the excellent
    Modernizr (http://www.modernizr.com/) to
    detect features and browser version.
    */


    #header #access {
    float: right;
    clear: both;
    background-color: #666;
    width: 820px;
    padding-left: 80px;
    z-index: 9999;
    }

    #header #access .menu,
    #header #access ul,
    #header #access li {
    float: left;
    display: block;
    z-index: 9999;
    }

    #header #access li a {
    color: #eee;
    text-decoration: none;
    display: block;
    padding: .5em .66em;
    margin: .25em 0;
    line-height: 1.2em;
    border-right: 1px solid #888;
    font-size: 1em;
    font-weight: normal;
    }

    #header #access .sub-menu a {
    border-right: none;
    }

    #header #access li:last-child a {
    border-right: none;
    }

    #header #access li a:hover {
    color: #fff;
    background-color: #777;
    }

    /* Drop down menu */

    #header nav#access ul.menu {
    margin: 0;
    padding: 0;
    }

    #header nav#access ul.menu li {
    float: left;
    list-style: none;
    position: relative;
    }

    #header nav#access ul.menu li a {
    float: left;
    }

    #header nav#access ul.menu li a span.arrow {
    float: right;
    width: 16px;
    height: 16px;
    margin-left: .5em;
    background: transparent url(images/menu_arrow.png) no-repeat top left;
    }

    #header nav#access ul.menu li ul.sub-menu li a span.arrow {
    background-image: url(images/menu_arrow_sub.png);
    }

    #header nav#access ul.menu li a:hover {
    color: #fff;
    }

    #header nav#access ul.menu li.current-menu-item {
    background: transparent;
    }

    #header nav#access .current-menu-item > a {
    color: #fff;
    background-color: #888;
    }

    #header nav#access ul.menu li ul.sub-menu {
    display: none;
    margin: 2.66em 0 0 0;
    padding: 0;
    position: absolute;
    background: #555;
    border: 1px solid #444;
    -webkit-box-shadow: -1px 1px 4px rgba(66,66,66,1);
    -moz-box-shadow: -1px 1px 4px rgba(66,66,66,1);
    box-shadow: -1px 1px 4px rgba(66,66,66,1);
    }

    .ie9 #header nav#access ul.menu li ul.sub-menu,
    .ie8 #header nav#access ul.menu li ul.sub-menu {
    margin: 2.66em 0 0 0;
    }

    #header nav#access ul.menu li ul.sub-menu ul.sub-menu,
    #header nav#access ul.menu li ul.sub-menu ul.sub-menu ul.sub-menu {
    display: none;
    z-index: 1;
    float: left;
    top: -2.66em;
    left: 10em;
    }

    .ie9 #header nav#access ul.menu li ul.sub-menu ul.sub-menu,
    .ie9 #header nav#access ul.menu li ul.sub-menu ul.sub-menu ul.sub-menu {
    float: left;
    top: -3em;
    }

    #header nav#access ul.menu li ul.sub-menu li {
    display: inline;
    float: right;
    clear: both;
    }

    .ie9 #header nav#access ul.menu li ul.sub-menu li,
    .ie8 #header nav#access ul.menu li ul.sub-menu li {
    display: block;
    float: right;
    clear: none;
    }

    #header nav#access ul.menu li ul.sub-menu li a {
    width: auto;
    color: #ddd;
    background-image: none;
    width: 128px;
    }

    #header nav#access ul.menu li ul.sub-menu li a:hover {
    background-color: #666;
    color: #fff;
    }