PDA

View Full Version : 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 (www.yogamoves.net/blog.html)) 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
<!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
<!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 :cool:

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
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
new PopUp('tst','sample_attach_menu_child',-20,-25,100);
parameter 3(-25) specifies the position top of the submenu from the <LI>