sebs/index.html

## index.html
<!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>
	<!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>