Javascript Hover tabs

UPDATE: See my pure CSS verison here. I no longer use this version.

So I just realized, mostly due to an email I received, that I never posted how my tabbed navigation works. It's pretty simple but I'm proud of it because I did it all myself (okay, I had a bit of help from a friend since it was my first time using JS. :P )

When there's no mouse hovering over the tabs, it looks like this:

And when "About" is hovered over, it changes to look like this:

The key to the tabs is that each state is one big image, but only a portion of the image is shown at a time. This is a common CSS trick for interactive layouts. Such an image often called a CSS sprite (good read, I recommend it). It keeps things from lagging as the browser constantly fetches new images from the server; in this method the browser need only fetch one image one time.

My nav sprite looks like this:

And then I wrote some javascript to manage switching the image. I could have probably hardcoded it, or tried harder to make it pure CSS but... I wanted some Javascript practice. Here's the functions to handle the hover effect, and reverting it. (Excuse the escaped quote and single quote characters, Blogger does that in the template editor)

<script type="text/javascript">
function hoverEffect(vAmount){
document.getElementById(&quot;myNav&quot;).style.backgroundPosition = vAmount + &#39;px 0px &#39;;
}
function removeHoverEffect(){
document.getElementById(&quot;myNav&quot;).style.backgroundPosition = &#39;0px 0px&#39;;
}
</script>

The first function is given a parameter, how much to move the image over. It could easily be modified to accept two parameters, one for vertical or horizontal, or a vertical parameter. It only operates on the div names "myNav".

The CSS of my so-called special navigation div. Nothing really important or exciting in the #myNav style, but note the #myNav a section, where I define the "size" of a link after setting its display to "block". This will make the clickable portion larger than the link text. I will hide the link text by wrapping it in a span, whose display attribute I have set to "none".

/*Special Navigation*/
#myNav {
position: absolute;
left:580px;
top:303px;
height:54px;
width:302px;
background-image: url(http://1.bp.blogspot.com/_kn4Rl9Kr3fE/TErgHkM6F8I/AAAAAAAAAKI/T9QVV26sav4/TabsWordsHorz.png);
background-position: 0px 0px;
background-repeat:no-repeat;
}
#myNav a {
display:block;
float:left;
/*font-weight:bold;*/
width:73px;
height:55px;
margin: none;
/*padding: 17px 0 1px 3px;*/
}
#myNav span{ /*keep link for link indexing by crawlers*/
display:none;
}

And the HTML inside the special nav div. Each link is given the "onmouseout" and "onmouseover" attributes and told to call the javascript functions above. The values given are pixel offsets. (The color attribute isn't necessary, I have it there for other reasons)

<div id="myNav">
<a href="http://philenotfound.blogspot.com/" onmouseout="removeHoverEffect()" onmouseover="hoverEffect(-302)"><span style="color: #e0b341;">Home</span></a>
<a href="http://philenotfound.blogspot.com/p/about-me.html" onmouseout="removeHoverEffect()" onmouseover="hoverEffect(-604)"><span style="color: #d67433;">About</span></a>
<a href="http://bagleworm.tumblr.com/" onmouseout="removeHoverEffect()" onmouseover="hoverEffect(-906)"><span style="color: #c33b51;">Tumblr</span></a>
<a href="http://twitter.com/Nanoinfinity" onmouseout="removeHoverEffect()" onmouseover="hoverEffect(-1208)"><span style="color: #a1359e;">Twit</span></a>
</div>

0 things about

Javascript Hover tabs

Post a Comment

Copyright 2012 Phile not Found. See About
Powered by Blogger

"Whenever you find that you are on the side of the majority, it is time to pause and reflect."