Navigation: Drop Down Menus

**jerdy** · 04-12-2010, 12:05 AM

I was looking to make a drop down menu (similar to the one at the bottom of this page: Yoga Talk) But I am unsure of how to make a horizonally fit version into my top navigation (Home, About, etc) <div>.

Any help? Maybe there's an easier way to make a drop down menu aside from javascript?

**vwphillips** · 04-12-2010, 09:40 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<link href="http://www.yogamoves.net/css/yoga_moves.css" rel="stylesheet" type="text/css" />
<style type="text/css">

body { font-size: 0.7em; }
h3   { font-size: 1.6em; margin: 0px; }

a.sample_attach, a.sample_attach:visited, div.sample_attach
{
	display: block;
	width:   175px;
	border:  1px dotted black;
	padding: 2px 5px;
	background: #92278F;
	text-decoration: none;
	font-family: "Courier New", Courier, monospace;
	font-weight: 300;
	font-size: 1.2em;
	color: #FFF;
	text-align: left;
}

a.sample_attach, a.sample_attach:visited { border-bottom: none; }

</style>
</head>

<body>
<div id="navigation">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="eye_pillows.html">Eye Pillows</a></li>
        <li><a href="blog.html" class="selected"><font color="#2829A6">Yoga Talk</font></a></li>

        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li id="tst"><a href="contact.html" >More Thoughts</a></li>
      </ul>
</div>

<div id="sample_attach_menu_child">
<a class="sample_attach" href="entry1_habits.html">1 ~ Habits</a>
<a class="sample_attach" href="entry2_limitations.html">2 ~ Limitations</a>
<a class="sample_attach" href="entry3_light.html">3 ~ Let there be Light</a>
<a class="sample_attach" href="entry4_something_new.html">4 ~ Trying Something New</a>

</div>

<script type="text/javascript">
function PopUp(tid,pid,leftoffset,topoffset){
 this.obj=document.getElementById(tid);
 this.pop=document.getElementById(pid);
 this.pop.style.position='absolute';
 this.pop.style.visibility='hidden';
 this.pop.style.zIndex='101';
 var oop=this;
 this.lftos=leftoffset||0;
 this.topos=topoffset||0;
 this.obj.onmouseover=function(){ oop.PopUp(); }
 this.obj.onmouseout=function(){ oop.PopHide(); }
 this.pop.onmouseover=function(){ oop.PopUp(); }
 this.pop.onmouseout=function(){ oop.PopHide(); }
}

PopUp.prototype.PopUp=function(){
 clearTimeout(this.to);
 this.pop.style.left=zxcPos(this.obj)[0]+this.lftos+'px';
 this.pop.style.top=zxcPos(this.obj)[1]+this.topos+'px';
 this.pop.style.visibility='visible';
}

PopUp.prototype.PopHide=function(){
 var oop=this;
 oop.to=setTimeout(function(){ oop.pop.style.visibility='hidden'; },500);
}

function zxcPos(obj){
 var rtn=[0,0];
 while(obj){
  rtn[0]+=obj.offsetLeft;
  rtn[1]+=obj.offsetTop;
  obj=obj.offsetParent;
 }
 return rtn;
}



new PopUp('tst','sample_attach_menu_child',-20,25);
</script>
</div>

</body>

</html>

**jerdy** · 04-13-2010, 09:03 PM

Great, thank you

How do I create different list id's. I see the first one you did was 'tst'...

I'm working on it here:
http://www.yogamoves.net/drop_down_menu.html

**vwphillips** · 04-14-2010, 10:19 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<link href="http://www.yogamoves.net/css/yoga_moves.css" rel="stylesheet" type="text/css" />
<style type="text/css">

body { font-size: 0.7em; }
h3   { font-size: 1.6em; margin: 0px; }

a.sample_attach, a.sample_attach:visited, div.sample_attach
{
	display: block;
	width:   175px;
	border:  1px dotted black;
	padding: 2px 5px;
	background: #92278F;
	text-decoration: none;
	font-family: "Courier New", Courier, monospace;
	font-weight: 300;
	font-size: 1.2em;
	color: #FFF;
	text-align: left;
}

a.sample_attach, a.sample_attach:visited { border-bottom: none; }

</style>
</head>

<body>
<div id="navigation">
      <ul>

        <li id="tst"><a href="contact.html" >Home</a></li>
        <li id="eye"><a href="eye_pillows.html">Eye Pillows</a></li>
        <li><a href="blog.html" class="selected"><font color="#2829A6">Yoga Talk</font></a></li>
		<li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>

      </ul>

</div>

<div id="sample_attach_menu_child">
<a class="sample_attach" href="entry1_habits.html">1 ~ Habits</a>
<a class="sample_attach" href="entry2_limitations.html">2 ~ Limitations</a>
<a class="sample_attach" href="entry3_light.html">3 ~ Let there be Light</a>
<a class="sample_attach" href="entry4_something_new.html">4 ~ Trying Something New</a>
</div>

<div id="eye_pillow_drop">
<a class="sample_attach" href="eye_pillows.html#order">Order Eye Pillows</a>
<a class="sample_attach" href="about_eyepillows.html">About Eye Pillows</a>

<a class="sample_attach" href="eye_excercise.html">Eye Excercises</a>
</div>


<script type="text/javascript">

function PopUp(tid,pid,leftoffset,topoffset,delayhide){
 this.obj=document.getElementById(tid);
 this.pop=document.getElementById(pid);
 this.pop.style.position='absolute';
 this.pop.style.visibility='hidden';
 this.pop.style.zIndex='101';
 var oop=this;
 this.lftos=leftoffset||0;
 this.topos=topoffset||0;
 this.ms=delayhide||200;
 this.obj.onmouseover=function(){ oop.PopUp(); }
 this.obj.onmouseout=function(){ oop.PopHide(); }
 this.pop.onmouseover=function(){ oop.PopUp(); }
 this.pop.onmouseout=function(){ oop.PopHide(); }
}

PopUp.prototype.PopUp=function(){
 clearTimeout(this.to);
 this.pop.style.left=zxcPos(this.obj)[0]+this.lftos+'px';
 this.pop.style.top=zxcPos(this.obj)[1]+this.topos+'px';
 this.pop.style.visibility='visible';
}

PopUp.prototype.PopHide=function(){
 var oop=this;
 oop.to=setTimeout(function(){ oop.pop.style.visibility='hidden'; },this.ms);
}

function zxcPos(obj){
 var rtn=[0,0];
 while(obj){
  rtn[0]+=obj.offsetLeft;
  rtn[1]+=obj.offsetTop;
  obj=obj.offsetParent;
 }
 return rtn;
}



new PopUp('tst','sample_attach_menu_child',-20,25,100);
new PopUp('eye','eye_pillow_drop',-20,25,100);
</script>
</div>

</body>

</html>

**jerdy** · 04-19-2010, 09:19 AM

Thank you

I'm having a few issues lining up the drop down menu with it's navigation button. I tried a few centering codes but nothing seemed to make any effect...

Code: http://www.yogamoves.net/drop_down_menu.html
Example: See attached image

**vwphillips** · 04-19-2010, 10:25 AM

Code:

new PopUp('tst','sample_attach_menu_child',-20,25,100);

parameter 2(-20) specifies the position left of the submenu from the <LI>

**jerdy** · 04-20-2010, 08:24 PM

Ah good to know.

What if I want the drag down menu to float above the navigation instead of below it?

**vwphillips** · 04-21-2010, 08:02 AM

Code:

new PopUp('tst','sample_attach_menu_child',-20,-25,100);

parameter 3(-25) specifies the position top of the submenu from the <LI>

Thread: Navigation: Drop Down Menus

Thread Tools

Search Thread

Navigation: Drop Down Menus

The Following User Says Thank You to vwphillips For This Useful Post:

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions