Popout Menu Question

Issues

[two4god07]

I was wanting to make a verticle popout menu for a webpage that had the menu pop below the other menu and pushed all other text down without covering it up. I'm just now learning how to do popout menus so this is out of my reach.

Ex

HOME
ABOUT US
CONTACT US

and when you mouse over about us

HOME
ABOUT US
who we are
our mission
our staff
CONTACT US

any thoughts?

[two4god07]

Heres a clip of my html

<ul id="menu">
<li><a href="index.html">Home</a>
</li>
<li><a href="about.html"
onmouseover="mopen('m2')"
onmouseout="mclosetime()">Who We Are</a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="about.html#mission">Our Mission</a>
<a href="about.html#believe">What We Believe</a>
<a href="staff.html">Our Staff</a>
</div>
</li>

Heres my 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;

Here's my css

#menu
{margin: 0;
padding: 0;
z-index: 30}

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

#menu li a
{display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 100px;
background: #383838;
color: #FFF;
text-align: center;
text-decoration: none}

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

#menu div
{position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #383838;
border: 1px solid #000000;
width: 118px;}

#menu div a
{position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #C0C0C0;
color: #000000;
font: 12px arial}
#menu div a:hover
{background: #707070;
color: #fff}

[swa66]

I'd start by ignoring IE6 (it'll need serious help), and try to first build a pure CSS solution for standards compliant browsers. (At then end, do get a scripted solution to help out the 30% of the IE users that still failed to upgrade)

Basically start from a nested list to represent your menu, hide all the second level ones in the css, and upon hover of the first level li (something IE6 doesn't do without scripted help), show the second level menu, causing a redraw.

There should be lots of examples out there, but building your own is easy enough.

[alt131]

Hi two4god07,

My thoguhts would be to decide whether you want to do this using css, or whether you want to use javascript, then do a search for what you want. There are a huge number of examples available because this isn't difficult, but there are a few tricks to getting it to work cross-browser, so it can be easier to learn from examples.

The site I referred to in your other thread (stu nicholls) has loads of examples to give you an idea, plus a menu generator, but there are lots of techniques, so I suggest search until you find one you like.