Skip to content

Instantly share code, notes, and snippets.

@elijahmanor

elijahmanor/_snippet.html

Created February 9, 2012 04:50
Download ZIP

Revisions

  1. elijahmanor revised this gist Feb 10, 2012. 1 changed file with 7 additions and 7 deletions.
    14 changes: 7 additions & 7 deletions fiddle.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,11 +1,11 @@
    $( document ).ready( function() {

    $( "#menu li" ).hover(
    function() {
    $( this ).find( "ul" ).slideDown();
    },
    function() {
    $( this ).find( "ul" ).slideUp();
    });
    $( "#menu li" ).hover(
    function() {
    $( this ).find( "ul" ).slideDown();
    },
    function() {
    $( this ).find( "ul" ).slideUp();
    });

    });
  2. elijahmanor revised this gist Feb 10, 2012. 1 changed file with 0 additions and 13 deletions.
    13 changes: 0 additions & 13 deletions fiddle.html
    View file
    Original file line number Diff line number Diff line change
    @@ -60,19 +60,6 @@
    left: 12em;
    margin: 0px 0 0 10px;
    }

    #menu li:hover ul ul,
    #menu li:hover ul ul ul,
    #menu li:hover ul ul ul ul {
    display:none;
    }

    #menu li:hover ul,
    #menu li li:hover ul,
    #menu li li li:hover ul,
    #menu li li li li:hover ul{
    display:block;
    }
    </style>
    </head>
    <body>
  3. elijahmanor renamed this gist Feb 10, 2012. 1 changed file with 0 additions and 0 deletions.
    0 fiddlejs → fiddle.js
    View file
    File renamed without changes.
  4. elijahmanor revised this gist Feb 9, 2012. 1 changed file with 11 additions and 0 deletions.
    11 changes: 11 additions & 0 deletions fiddlejs
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,11 @@
    $( document ).ready( function() {

    $( "#menu li" ).hover(
    function() {
    $( this ).find( "ul" ).slideDown();
    },
    function() {
    $( this ).find( "ul" ).slideUp();
    });

    });
  5. elijahmanor revised this gist Feb 9, 2012. 1 changed file with 28 additions and 0 deletions.
    28 changes: 28 additions & 0 deletions _snippet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,28 @@
    <ul id="menu">
    <li><a href="#">Browsers</a>
    <ul>
    <li><a href="#">Firefox</a></li>
    <li><a href="#">Google Chrome</a></li>
    <li><a href="#">Internet Explorer</a></li>
    <li><a href="#">Opera</a></li>
    <li><a href="#">Safari</a></li>
    </ul>
    </li>
    <li><a href="#">Editors</a>
    <ul>
    <li><a href="#">Sublime Text 2</a></li>
    <li><a href="#">TextMate</a></li>
    <li><a href="#">Visual Studio</a></li>
    <li><a href="#">WebStorm</a></li>
    </ul>
    </li>
    <li><a href="#">Languages</a>
    <ul>
    <li><a href="#">C#</a></li>
    <li><a href="#">CoffeeScript</a></li>
    <li><a href="#">JavaScript</a></li>
    <li><a href="#">Ruby</a></li>
    <li><a href="#">Visual Basic</a></li>
    </ul>
    </li>
    </ul>
  6. elijahmanor created this gist Feb 9, 2012.
    110 changes: 110 additions & 0 deletions fiddle.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,110 @@
    <!DOCTYPE html>
    <html>
    <head>
    <script class="jsbin" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <meta charset=utf-8 />
    <title>JS Bin</title>
    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <style>
    article, aside, figure, footer, header, hgroup,
    menu, nav, section { display: block; }

    /* http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery */

    #menu, #menu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-position: outside;
    position: relative;
    line-height: 1.5em;
    }
    #menu a:link, #menu a:active, #menu a:visited{
    display: block;
    padding: 0px 5px;
    border: 1px solid #333;
    color: #fff;
    text-decoration: none;
    background-color: #333;
    }

    #menu a:hover {
    background-color: #fff;
    color: #333;
    }

    #menu li {
    float: left;
    position: relative;
    }

    #menu ul {
    position: absolute;
    width: 12em;
    top: 1.5em;
    display: none;
    }

    #menu li ul a {
    width: 12em;
    float: left;
    }

    #menu ul ul{
    top: auto;
    }

    #menu li ul ul {
    left: 12em;
    margin: 0px 0 0 10px;
    }

    #menu li:hover ul ul,
    #menu li:hover ul ul ul,
    #menu li:hover ul ul ul ul {
    display:none;
    }

    #menu li:hover ul,
    #menu li li:hover ul,
    #menu li li li:hover ul,
    #menu li li li li:hover ul{
    display:block;
    }
    </style>
    </head>
    <body>

    <ul id="menu">
    <li><a href="#">Browsers</a>
    <ul>
    <li><a href="#">Firefox</a></li>
    <li><a href="#">Google Chrome</a></li>
    <li><a href="#">Internet Explorer</a></li>
    <li><a href="#">Opera</a></li>
    <li><a href="#">Safari</a></li>
    </ul>
    </li>
    <li><a href="#">Editors</a>
    <ul>
    <li><a href="#">Sublime Text 2</a></li>
    <li><a href="#">TextMate</a></li>
    <li><a href="#">Visual Studio</a></li>
    <li><a href="#">WebStorm</a></li>
    </ul>
    </li>
    <li><a href="#">Languages</a>
    <ul>
    <li><a href="#">C#</a></li>
    <li><a href="#">CoffeeScript</a></li>
    <li><a href="#">JavaScript</a></li>
    <li><a href="#">Ruby</a></li>
    <li><a href="#">Visual Basic</a></li>
    </ul>
    </li>
    </ul>

    </body>
    </html>