jQuery simple menu with slide-in effect

You may (or not) noticed our top menu and how the explanation of each icon slide-in when you hover over it. It can’t be simpler to achieve this with jQuery

I will show you in a few easy steps how to create similar menu, and you don’t even have to be familiar with JavaScript.

Step 1

1) Download jQuery and Interface elements plugin.
2) Create simple HTML page.
3) Add JavaScript calls to ‹head›

1 2	<script src="jquery.js" type="text/javascript"></script> <script src="interface.js" type="text/javascript"></script>

Step 2

1) In HTML body we define the menu and message slide-in container:

<!-- menu block -->
<div id="menu">&nbsp;</div>
<div class="btn"><a href="/path/to/page" title="Test link for btn1">1</a></div>
<div class="btn"><a href="/path/to/page" title="Test link for btn2">2</a></div>
<div class="btn"><a href="/path/to/page" title="Test link for btn3">3</a></div>
 
<!-- slide-in container block -->
<div id="slideIn_container">&nbsp;</div>

2) Create CSS style either as external link or inline:

<;style type="text/css" media="screen">;
    #menu {
        display: block;
        float: left;
        width: 120px;
        border: 1px solid #cecece;
        margin-right: 10px;
    }
 
    #menu div.btn {
        display: block;
        width: 30px;
        height: 20px;
        float: left;
        margin: 0 5px;
        background-color: #cccccc;
        color: #000000;
        text-align: center;
    }
 
    #slideIn_container {
        display: block;
        float: left;
        width: 300px;
    }
<;/style>;

3) Paste the javascript code in ‹head›, right beneath jquery.js and interface.js calls:

<script type="text/javascript">
$(document).ready(function() {
    $("#menu a").hover( function () {
        var titleAttr = $(this).attr("title");
        $("#slideIn_container").html(titleAttr);
        $('#slideIn_container').SlideInLeft(500);
    }, function () { 
        $('#slideIn_container').SlideOutRight(300);
    });
});
</script>

That’s about it, try it . You can download jQuery simple menu here.

There is more

Did you noticed that when you hover the buttons/links, slide container or better slide-in message keeps flying through if you go over the buttons/links from one side to another? It’s because onmouseover/out function is immediately being called and animation cannot be stopped even if you’re out of button focus area.

Luckily there is a great extension plugin written by Brian Cherne that fixes this issue by delaying the mouseover/mouseout action and trying to figure out if you really wanted to focus on the particular button to start the animation.

However we will have to alter the above code to achieve this. First download the hoverIntent plugin and follow these steps:

1) Add new JavaScript call to ‹head› bellow interface.js call

1	<script src="hoverIntent.js" type="text/javascript"></script>

2) We have to rewrite JavaScript code that does the magic

<script type="text/javascript">
$(document).ready(function() {
	$("#menu a").hoverIntent({
	   sensitivity: 1, // number = sensitivity threshold (must be 1 or higher)
	   interval: 500, // number = milliseconds for onMouseOver polling interval
	   over: slideIn, // function = onMouseOver callback (required)
	   timeout: 700, // number = milliseconds delay before onMouseOut
	   out: slideOut // function = onMouseOut callback (required)
	});
 
	function slideIn() {
		var titleAttr = $(this).attr("title");
		$("#slideIn_container").html(titleAttr);
		$('#slideIn_container').SlideInLeft(500);
	}
 
	function slideOut() { 
		$('#slideIn_container').SlideOutRight(300);
	}
 
});
</script>

You’re done. This fix is also included in ZIP archive.

You can find more effects beside slide-in/out here, play with it

This entry was posted on Thursday, August 23rd, 2007 at 12:14 pm and is filed under Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.