Ignore the man behind the curtain…
I’ve scrambled the text so you can’t see my super secrete message in the nav (hint: Ovaltine). The menu itself is what’s important anyway, not the text.
The “how-to” follows:
The drop-down is a standard drop down nav, however the left and right arrows at the top allow you to change pages using your keyboard as well.
the nav:
The array breaks out into [page name,page title]
var arr = Array(
['1a','Immitto reprobo'],
['1b','Eeros enim'],
['1c','Aex inhibeo'],
['1d','Dolore nisl ut'],
['1e','Dloquor volutpat'],
['2a','Vel suscipit'],
['2b','Sin proprius'],
['2c','Natu lucidus'],
['2d','Delenit lobortis'],
['2e','Vel vel'],
['2f','Nisl, dignissim'],
['2g','Piusto elit'],
['3a','Pignissim capto'],
['3b','Ulciscor'],
['3c','Papto odio abdo'],
['3d','Sibidem hos si esse']
);
// add the links to the navigation
function writeArr( i, length ){
for( i; i < length; i++ )
{
// I added line breaks for easy reading.
document.write( '<li id="verse"><a href="#"
num="'+(i+"s")+'" page="'+arr[i][0]+'"
title="'+arr[i][1]+'" >'+arr[i][1]+'</a></li>' );
}
};
The Drop-Down itself is based off of Vimeo’s design, the tutorial is [ here ].
<li><div id="nav"></div>
<ul>
<li id="chapter">
<img class="corner_inset_left"
src="_css/nav/corner_inset_left.png"/>
Chapter One
<img class="corner_inset_right"
src="_css/nav/corner_inset_right.png"/>
</li>
<script>writeArr(0,5);</script>
<li id="chapter">Chapter Two</li>
<script>writeArr(5,12);</script>
<li id="chapter">Chapter Three</li>
<script>writeArr(12,16);</script>
<li class="last">
<img class="corner_left" src="_css/nav/corner_left.png"/>
<img class="middle" src="_css/nav/dot.gif"/>
<img class="corner_right" src="_css/nav/corner_right.png"/>
</li>
</ul>
</li>
As you can see the actual content is pulled from our JavaScript Array. (I just wanted to keep it all tidy).
Here is the navigation control:
<script>
var pageNum = 0;
// you can move the array code to here..
// wait for when the doc is ready
$(function(){
$("#verse a").click(function() {
pageNumArr = $(this).attr("num").split('s');
pageNum = pageNumArr[0];
nextprev();
});
// always update the title text on the page
$('#title').html( arr[0][1] );
// next & previous icons at the top
$('#prev').click(function(){
goNext();
});
$('#next').click(function(){
goNext();
});
// keyboard arrow keys
$('body').keyup(function (event) {
if (event.keyCode == 37) {
goNext();
} else if (event.keyCode == 39) {
goPrev();
}
});
// control what page you are going to
function goNext(){
pageNum--;
if( pageNum < 0 ){ pageNum = arr.length-1 };
nextprev();
}
function goPrev(){
pageNum++;
if( pageNum >= arr.length ){ pageNum = 0 };
nextprev();
}
// make sure all the nav functions go to the same place
function nextprev(){
var title= arr[pageNum][1];
var page= arr[pageNum][0];
// changes page header -->
$("#title").replaceWith('<span id="title">'+title+'</span>');
// add new page -->
$("#page").load( "pages/"+page+".html" );
$("a").removeClass("sel");
$("a[num^="+pageNum+"s]").addClass("sel");
/* FUN FACT:
using $("a[num^="+pageNum+"]") will select "1" and "10,11,12,.."
as well, because they all start with the number "1". Which is
kinda fucked up, so I added a text character at the end "s" so
"1s" is now unique.
"11s" and/or "21s" are not effected, but if I had "1s1" then
I'd be back to the drawing board.
*/
}
// this will update the nav for the first use.
nextprev();
});
</script>
