Site Admin
Joined: 10 Dec 2007
Posts: 143
Location: New Zealand
|
The following example represents how to display drop down menus using jQuery + HTML + CSS with fadeIn() and fadeOut() funtion:
| Code: | <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var timeout = 500;
var closetimer = null;
var menuitem = null;
function display_menu()
{
menu_canceltimer();
if( $(this).find('.sub_menu').length > 0 )
{
if( $(this).find('.sub_menu').is(":hidden") )
{
hide_menu();
$(this).find('.sub_menu').fadeIn();
$(this).attr({'class': 'current_top_menu'});
menuitem = $(this).find('.sub_menu');
}
}
else
{
menuitem.parent().attr({'class': 'top_menu'});
hide_menu();
}
}
function hide_menu()
{
if( menuitem )
{
menuitem.parent().attr({'class': 'top_menu'});
menuitem.fadeOut();
}
}
function menu_closetimer()
{
closetimer = window.setTimeout(hide_menu, timeout);
}
function menu_canceltimer()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
$(document).ready(function()
{
$('.top_menu').hover(display_menu,menu_closetimer);
});
document.onclick = hide_menu;
</script>
<style type="text/css">
#drop_menu
{
margin: 0;
padding: 0;
}
#drop_menu .top_menu
{
float: left;
list-style: none;
font: 12px Tahoma, Arial
}
#drop_menu .top_menu a
{
display: block;
background: #002477;
padding: 7px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 100px;
color: #EAFFED;
white-space: nowrap
}
#drop_menu .top_menu a:hover
{
background: #acf;
color: #000;
}
#drop_menu .current_top_menu
{
float: left;
list-style: none;
font: 12px Tahoma, Arial
}
#drop_menu .current_top_menu a
{
display: block;
background: #acf;
padding: 7px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 100px;
color: #000;
white-space: nowrap
}
#drop_menu .sub_menu
{
margin: 0;
padding: 0;
position: absolute;
display: none;
border-top: 1px solid white
}
#drop_menu .sub_menu li
{
float: none;
display: inline
}
#drop_menu .sub_menu a
{
width: 130px;
background: #acf;
color: #000;
}
#drop_menu .sub_menu a:hover
{
background: #002477;
color: #EAFFED;
}
</style>
</head>
<body>
<ul id="drop_menu">
<li class='top_menu'><a href="#">Menu 1</a>
<ul class='sub_menu'>
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li class='top_menu'><a href="#">Menu 2</a>
<ul class='sub_menu'>
<li><a href="#">Submenu 2-1</a></li>
<li><a href="#">Submenu 2-2</a></li>
<li><a href="#">Submenu 2-3</a></li>
<li><a href="#">Submenu 2-4</a></li>
<li><a href="#">Submenu 2-5</a></li>
</ul>
</li>
<li class='top_menu'><a href="#">Menu 3</a></li>
<li class='top_menu'><a href="#">Menu 4</a>
<ul class='sub_menu'>
<li><a href="#">Submenu 4-1</a></li>
<li><a href="#">Submenu 4-2</a></li>
</ul>
<li class='top_menu'><a href="#">Menu 5</a></li>
</ul>
</body>
</html> |
Where:
 if( $(this).find('.sub_menu').length > 0 ) means if sub_menu is found within element(s)
$('.top_menu').hover(menu_open,menu_closetimer); execute menu_open() when mouse enters top_menu, and execute menu_closetime() when mouse leave top_menu.
menuitem.parent().attr({'class': 'CLASSNAME'}); change parent's class to top_menu or current_top_menu
closetimer = window.setTimeout(menu_close, timeout); setting function to execute after certain period of time. timeout is in micro-seconds.
Functions:
display_menu() - Display drop down menus
hide_menu() - Hide drop down menus
menu_closetimer() - Assign time out to hide menus
menu_canceltimer() - Clear time out to hide menus
_________________
Paul KH Kim
http://www.onlinesolution.co.nz |
|
