This tutorial assumes you have the knowledge of CSS and HTML.
We are going to use a simple unordered list to build our menu. We will use css to style it so it looks cool and we will use jQuery to show and hide and slide it down and up.
The image with complete html and jquery code here:
The image of complete css code:CSS
You can view the demo of what we will be building here:DEMO
Before we start I want to say that for best performance you should use Firefox 3.0!
1). HTML FILE
Ok, first of all lets build our html file:
Inside the header, after the title,
link your css and jquery files (the statements below)
lt; link href=”CSS/style.css” rel=”stylesheet” type=”text/css” / gt;
lt; script type=”text/javascript” src=”js/jquery-1.3.1.js” gt; lt; /script gt;
As you can see my CSS file is inside the folder I created called CSS.
And my jQuery framework file is in the folder named js. Change the structure to any way you like it. I just like to keep things organized.
Ok, so far your project should consist of an HTML FILE, a folder “js” with the jquery framework file inside of it – that can be downloaded here http://www.jquery.com, and the CSS folder with the blank “style.css” stylesheet inside of it. If you’re a bit confused with this, you can also check out webpagescientist.com to see exact instructions.
2.) continuing with our HTML file
Inside your body tag enter the following:
lt; a href=”#” class=”menu_class” gt;Click Me lt; / a gt;
lt; ul class=”the_menu” gt; lt; li gt; lt; a href=”http://www.google.com” gt;Google lt; /a gt; lt; /li gt;
lt; li gt; lt; a href=”http://www.yahoo.com” gt;Yahoo lt; /a gt; lt; /li gt;
lt; li gt; lt; a href=”http://www.msn.com” gt;MSN lt; /a gt; lt; /li gt;
lt; li gt; lt; a href=”http://www.metacrawler.com” gt;MetaCrawler lt; /a gt; lt; /li gt;
lt; li gt; lt; a href=”http://www.dogpile.com” gt;DOGPILE lt; /a gt; lt; /li gt;
lt; /ul gt;
Here is the image of what my code looks like now: CodeSnippet
Now Preview your work in browser and you should have something like this: Preview
3).Styling with CSS
Open your style.css and insert the folowing code: (The comments are just for explanation purposes)
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-color: Black;
}/* Style our body document. set the font to “Arial”, size of the font to 12 and make the background Black color.*/
a.menu_class
{
background-color: #Bc0022;
border: 1px solid #FF9933;
font-size:20px;
padding:5px 30px 5px 30px;
color:Black;
width:90px;
height:40px;
}/*Style the top menu to look like a button by giving it padding. Make the color of the text black. give it background color and a solid border. */
ul, li {
margin:0;
padding:0;
list-style:none;
}/* Style all the unordered lists within the document to not have any extra spacing and remove bullets*/
.the_menu {
display:block;
width:134px;
border: 1px solid #FF9933;
}/* Style our menu class to be displayed as a block and set its width and border*/
.the_menu li {
background-color: #Bc0022;
}/* Style each individual list item on our menu to have a background color of dark red*/
.the_menu li a {
color:#FF9933;
text-decoration:none;
padding:10px;
display:block;
}/* Style the anchor texts to have no underline and have a 10 pixel distance in between them and the border. Give them a yellowish color*/
.the_menu li a:hover {
padding:10px;
font-weight:bold;
background-color:White;
}/* When user hover over our anchors give it a white background to appear like a highlight, make word bold and keep the padding the same*/
OK, save your style.css and preview your html file in browser. You should get something like this:Preview
So as you can see the menu is looking much better. We are done building it. Now the last step is placing it at the correct position and make it show up only when user clicks on the “Click Me” Button and hide it when the user clicks on it again.
Here is the missing code: its not going to be hard. as it only contains a few lines.
lt; script type=”text/javascript” gt;
$(document).ready(function () {
$(‘a.menu_class’).click(function () {
$(‘ul.the_menu’).css(‘top’, 3)
.css(‘left’,144);
$(‘ul.the_menu’).slideToggle(‘medium’)
});
});
lt; / script gt;
So lets break it down:
lt; script type=”text/javascript” gt;start scripting in javascript
$(document).ready(function () { //when the document ready start the function
$(‘a.menu_class’).click(function () { //get the anchor tag with the class of menu_class and when the user
clicks start the function
$(‘ul.the_menu’).css(‘top’, 3) //get the unordered list with the id of the_menu and add the css top:3px;
.css(‘left’,144); and left:144px; which means attach this unordered list at the coordinates of y=3 and x = 144. Those coordinates relate to the (a.menu_class) or our button. So this will place the submenu on the right.
$(‘ul.the_menu’).slideToggle(‘medium’) //get the unordered list with the id of the_menu and call the slideToggle function with the speed of medium. What tat means is attach our submenu and slide it down at the medium speed, if user clicks it again then slide it up at the medium speed.
});
});
lt; / script gt; Close out our functions and end the script.
One more thing. If you remember we seen the whole menu right away. To hide it so that the toggle function starts from showing it, we need to modify the .the_menu class in our styles.css. Change the display:block; to display:hidden. Then save the html document and the css document and we get our final result! DEMO.
I hope you enjoyed this tutorial and learned something. If you have any questions please feel free to post them in the comments. Thanks.Jquery makes it easy to build navigational sliding menus
