I recently had a client I was building a website for ask for a menu that when the user hovered over an element another one appeared. This seems to be a common thing that clients want at the moment and so I thought I’d create a quick tutorial on the subject incase anybody wanted to know how it’s achieved.
If would like to download the finished project you can do so here iamchristill_jquerymenu
Firstly, set up your folder structure. It is good practice to organize your websites and apps properly for easy maintenance. I normally create the following folders:
Now, create your index file and enter the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>iamchristill - Menu tutorial</title> <link rel="stylesheet" href="css/style.css" /> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> </body> </html>
Be sure to include the jQuery library. You can either download a copy and link to it or use a CDN hosted version. The benefit of a CDN version is that if you use a popular CDN like google or the official jQuery website is that there is a good chance the user already has it cached on their computer, as a lot of websites use this version. Thus speeding up page load time.
Now, between your body tags, insert the following code.
<div class="wrapper"> <h1>Demo - jQuery Menu</h1> <div class="wrapper-inner"> <ul class="menu"> <li><a class="button" id="menu-item1" href="">Item 1</a></li> <li><a class="button" id="menu-item2" href="">Item 2</a></li> </ul> <div class="hiddentext"> <p id="item1">This is some text for item 1</p> <p id="item2">This is some text for item 2</p> </div> </div> </div>
That is all the markup that you will need. We have included a basic menu and a section called “hiddentext” that will serve as our ‘pop up’. We can add some CSS to this to make it a bit easier on the eye.
.menu {
width:500px;
margin:0 auto;
border:1px solid;
padding:15px 20px;
}
.menu li{
display:inline-block;
}
.menu li:first-child{
margin:0 180px 0 50px;
}
.button{
width:100px;
height:30px;
padding:12px 0 0 0;
display:block;
background-color:red;
text-align:center;
color:#fff;
text-decoration:none;
}
.button:hover{
background:blue;
}
/*--------------------------------------------------------------
Hidden text
--------------------------------------------------------------*/
.hiddentext{
width:500px;
border:1px solid;
margin:20px auto;
padding:15px 20px;
height:20px;
}
.hiddentext p{
display:none;
text-align:center;
}
Now, the final piece. The jQuery. Add the following code just before the closing body tag.
<script>
$('#menu-item1').hover(
function () {
$("#item1").stop().fadeIn("fast");
},
function () {
$("#item1").stop().fadeOut("fast");
}
);
$('#menu-item2').hover(
function () {
$("#item2").stop().fadeIn("fast");
},
function () {
$("#item2").stop().fadeOut("fast");
}
);
</script>
This small is script is all it takes in order for our menu to function. It will show and hide the p tags “item1″ and “item2″ when hovering over “#menu-item1″ and “menu-item2″. You can set the speed of the fade where it currently says “fast”.
You can download the full working script here iamchristill_jquerymenu
Comments
Powered by Facebook Comments
