Created
September 14, 2011 11:06
-
-
Save sebs/1216321 to your computer and use it in GitHub Desktop.
Revolver Style Menu JQuery - Now with submenu fix
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> | |
| <title>Revolverize</title> | |
| </head> | |
| <body> | |
| <h1>Menu Example</h1> | |
| <div> | |
| <ul id="mymenu" class="revolverized"> | |
| <li class="menu"><a href="#opt1">Entry 1</a></li> | |
| <li class="menu"><a href="#opt2">Entry 2</a></li> | |
| <li class="menu"><a href="#opt3">Entry 3</a></li> | |
| <li class="menu"><a href="#opt4">Entry 4</a></li> | |
| <li class="menu"><a href="#opt5">Entry 5</a></li> | |
| <li class="menu"><a href="#opt6">Entry 6</a> | |
| <ul id="submenu1" class="revolverized"> | |
| <li class="menu"><a href="#op61">Entry 6.1</a></li> | |
| <li class="menu"><a href="#op62">Entry 6.2</a></li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </div> | |
| <script> | |
| // make a normal menu weirdly moving its contents around | |
| // I suspect all the UX Guys do a lot of weed like we did in the 90ies | |
| // and we all know how this ended, right? | |
| function reolverizeTheShice(nodeId, context) { | |
| // where have we clicked | |
| var indexClicked = $(context).index(); | |
| // we need the number of elements | |
| var numElements = $(nodeId + " > li").size(); | |
| // lets keep a backup, we are changing the original | |
| var oldMenu = $(nodeId + " > li"); | |
| // variables want to be defined, bitchez | |
| var ele; | |
| // lets iterate and append | |
| for( i = 0; i < indexClicked; i++) { | |
| // get the element | |
| ele = oldMenu[i]; | |
| // append the element at the end again | |
| $(nodeId).append(ele); | |
| } | |
| } | |
| // onclick function | |
| $(".menu").click(function() { | |
| var selected = $(this).parent('.revolverized').attr('id'); | |
| if (typeof selected == 'undefined' || selected == '') { | |
| return; | |
| } | |
| selected = '#' + selected; | |
| reolverizeTheShice(selected, this); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment