Javascript Dropdown Menu

View as text

THE HTML
------------
<ul id="sddm">
    <li><%= link_to 'Home', home_path %></li>

    <li>
      <a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">Site Setup</a>
      <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
        <%= link_to 'Manage Users', users_path %>
        <%= link_to 'Roles', roles_path %>
        <%= link_to 'Security Questions', questions_path %>
        <%= link_to 'Days', days_path %>
        <%= link_to 'Time Slots', timeslots_path %>
      </div>
    </li>

    <li>
      <a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">Audit Setup</a>

      <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
        <%= link_to 'All Audits', audits_path %>
        <%= link_to 'Queue', audit_queues_path %>
        <%= link_to 'Zip Codes', zipcodes_path %>
        <%= link_to 'Zip Locations', ziplocations_path %>
        <%= link_to 'Setup Schedule', absences_path %>
      </div>

    </li>

    <li><%= link_to 'Search Customers', search_path %></li>

    <li><%= link_to 'My Schedule', schedule_path(current_user) %></li>

    <li><%= link_to 'My Account', edit_user_path(current_user.id) %></li>
</ul>
<div style="clear:both"></div>


THE JAVASCRIPT
----------------
var timeout	= 500;
var closetimer	= 0;
var ddmenuitem	= 0;

// open hidden layer
function mopen(id)
{	
	// cancel close timer
	mcancelclosetime();

	// close old layer
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

	// get new layer and show it
	ddmenuitem = document.getElementById(id);
	ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
	closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
	if(closetimer)
	{
		window.clearTimeout(closetimer);
		closetimer = null;
	}
}

// close layer when click-out
document.onclick = mclose; 


THE CSS
-------
#sddm {	
  margin: 0;
	padding: 0;
	z-index: 30;
}

#sddm li
{	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font: bold 14px arial}

#sddm li a {	
  display: block;
	margin: 0 1px 0 0;
	padding: 4px 3px;
	width: 100px;
	background:url(/images/top_nav_bkrnd.png);
	color: #ccc;
	text-align: center;
	text-decoration: none
}

#sddm li a:hover {	
/*  text-decoration:underline;*/
  color:#fff;
}

#sddm div
{	position: absolute;
	visibility: hidden;
	margin: 0;
	padding: 0;
	background: #D5EAF5;
	border:1px solid #000;	
}

	#sddm div a
	{	position: relative;
		display: block;
		margin: 0;
		padding: 3px 10px;
		width: auto;
		white-space: nowrap;
		text-align: left;
		text-decoration: none;
		background: #D5EAF5;
		color: #000;
		font: 12px arial;
		border-bottom:1px solid #fff;
	}

	#sddm div a:hover{	
	  background: #fff;
		color: blue;
		text-decoration:underline;
	}