View Full Version : Adding a flyout submenu to existing vertical drop menu

07-31-2012, 04:47 PM
I am tryign to add a flyout (to the right) submenu to my existing vertical drop down menu and im pretty clueless how i can accomplish this.

my current attempt is not working, here is the code:

<!--drop menu js-->

<script type="text/javascript">
// Copyright 2006-2007 javascript-array.com

var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

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

// 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()
closetimer = null;

// close layer when click-out
document.onclick = mclose;
<!--end drop menu js-->

<div class="wrapper">
<ul id="menu">
<li id="menu_active"><a href="index.html">home</a></li>
<li><a href="detroitvideoproduction.html" rel="nofollow" onMouseOver="mopen('m1')" onMouseOut="mclosetime(2)">Production</a>
<div id="m1" class="prod" onmouseover="mcancelclosetime(2)" onmouseout="mclosetime(3)">
<a href="detroitvideoproduction.html" onmouseover="mopen('m6')" onmouseout="mclosetime(2)">Video Production</a>
<div id="m6" class="subprod" onmouseover="mcancelclosetime(2)" onmouseout="mclosetime(3)">
<li><a href="#">chicago</a></li>
<li><a href="#">detroit</a></li>
<li><a href="#">toledo</a></li>

<a href="locationsounddetroit.html">Location Sound</a>
<li onMouseOver="mopen('m2')" onMouseOut="mclosetime(2)"><a href="videoeditingdetroit.html" rel="nofollow">Post Production</a>
<div id="m2" class="postprod" onmouseover="mcancelclosetime(2)" onmouseout="mclosetime(3)">
<a href="videoeditingdetroit.html">Video Editing</a>
<a href="custommotiongraphicsdetroit.html">Custom Graphics</a>
<li ><a href="demoreel.html" rel="nofollow" onMouseOver="mopen('m3')" onMouseOut="mclosetime(2)">Demo Reel</a>
<div id="m3" class="demo" onmouseover="mcancelclosetime(2)" onmouseout="mclosetime(3)">
<a href="demoreel.html">Demo Reel</a>
<a href="http://www.youtube.com/user/VideoDetroitMI?ob=0">You Tube</a>
<a href="http://vimeo.com/liveoutloudproductions">Vimeo</a>

<li ><a href="dslrrentalsdetroit.html" rel="nofollow" onMouseOver="mopen('m5')" onMouseOut="mclosetime(2)">Equipment Rentals</a>
<div id="m5" class="rent" onmouseover="mcancelclosetime(2)" onmouseout="mclosetime(2)">
<a href="dslrrentalsdetroit.html">Camera Rental</a>
<a href="lectrosonicsrentalsdetroit.html">Audio Rental</a>
<a href="griprentalsdetroit.html">Grip Rental</a>
<a href="camerasupportdetroit.html">Camera Support</a>
<li ><a href="about.html" onMouseOver="mopen('m4')" onMouseOut="mclosetime(2)">About</a>
<div align="center" id="m4" class="us" onmouseover="mcancelclosetime(2)" onmouseout="mclosetime(3)">
<a href="about.html">About</a>
<a href="contact.html">Contact</a>

/**<li> tag have float: left; declaration. sumbmenu layer have visibility: hidden; and position: absolute;. Anchor tag set to display: block;

Everything else is usual decoration:**/

{ margin: 0;
padding: 0;
z-index: 20;
clear: all;

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

#menu li a
{ display: block;

background: #232323;
color: #FFF;

text-decoration: none


#menu li a:hover
{ background: #353535}

#menu div
{ position: absolute;
visibility: hidden;

#menu div a
display: block;

color: #fff;

#menu div a:hover
{ background: #353535;
color: #FFF}
.prod { width:150px;}
.postprod {width:185px;}
.demo {width: 140px;}
.rent {width: 200px;}
.us {width: 111px;}
/***end drop menu***/

#menu { float:left; margin-top:25px; padding-left:14px; background:url(images/menu_line.gif) right 0 no-repeat; width:958px; height:70px;}
#menu li { float:left; padding-left:1px; background:url(images/menu_line.gif) 0 0 no-repeat}
#menu li a{
padding:18px 30px 14px 38px;
#menu #menu_active a{ padding-top:16px; padding-bottom:28px;}


known issues:

The child menu (sub menu) is appearing below the parent item.
the parent item disappears when the child menu appears
the child menu does not stay visible when itself or parent item is hovered over
i suck at life :)

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum