Wednesday, December 30, 2009

New Menu Using jQuery

I wasn't happy with the existing title menu that spread across the top of the screen but didn't provide much value. There was a lot of blue gradient with no content, especially on very wide screens. It needed to be changed.
What I was hoping for was an expanding menu with a small foot print, kind of like the Windows 7 jewel. At first I started shuffling around some divs with homemade dhtml, but that was a pain. I'm not sure where I came across jQuery, but it solved all the problems I was having; working in different browsers, easy syntax, minimal code, etc. It's really a nice library, and I can see why it was so highly recommended.
So the new menu contains 2 parts. The first part is a little icon that, when clicked, shows the navigation. It expands it to fit and I was very surprised at how easy it was. Essentially, this is all the code needed:

<script type="text/javascript" src="/includes/jquery132.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#slider").hide();
$("#button").toggle(function() {
$("#slider").show("fast");
},function(){
$("#slider").hide("fast");
});
$("#slider h1").click(function() {
$("$slider").hide("fast");
});
});
</script>
I hope you like the little icon and new menu. Try it by clicking him in the upper left. I'm definitely going to look into jQuery more for cool dynamic webpages or if I need to have javascript do other magical things.

0 Comments:

Post a Comment

<< Home