Results 1 to 8 of 8

Thread: Navigation: Drop Down Menus

  1. #1
    Join Date
    Oct 2009
    Location
    USA
    Posts
    40
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default Navigation: Drop Down Menus

    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?

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,810
    Thanks
    2
    Thanked 423 Times in 417 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

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

    jerdy (04-13-2010)

  4. #3
    Join Date
    Oct 2009
    Location
    USA
    Posts
    40
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

    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
    Last edited by jerdy; 04-13-2010 at 09:10 PM.

  5. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,810
    Thanks
    2
    Thanked 423 Times in 417 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

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

    jerdy (04-19-2010)

  7. #5
    Join Date
    Oct 2009
    Location
    USA
    Posts
    40
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

    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

  8. #6
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,810
    Thanks
    2
    Thanked 423 Times in 417 Posts

    Default

    Code:
    new PopUp('tst','sample_attach_menu_child',-20,25,100);
    parameter 2(-20) specifies the position left of the submenu from the <LI>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  9. #7
    Join Date
    Oct 2009
    Location
    USA
    Posts
    40
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

    Ah good to know.

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

  10. #8
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,810
    Thanks
    2
    Thanked 423 Times in 417 Posts

    Default

    Code:
    new PopUp('tst','sample_attach_menu_child',-20,-25,100);
    parameter 3(-25) specifies the position top of the submenu from the <LI>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •