Web Hosting Talk







View Full Version : Drop down navigation menu...


2399Skillz
09-04-2009, 04:07 AM
Hey guys,

I am having a bit of trouble. I want to build a navigation table that some of the links you click on, will bring a "sub menu" that will slide down below the link, in categories.

Basically I want it to look something like this.

-Home
-Products
--2005-2010Mustang Parts
--1996-2005 DOHC Mustang Parts
--1996-2004 SOHC Mustang Parts
-Contact Us
-About Us


Something like that, this is a shorten version though.

How I have it setup right now (without the sub menus)

-Home
-Products
-Contact Us
-About Us

I have an index template/page that I am using
<?php
include("nav.html");?>

Code to pull the navigation table. In the nav.html tile, it's just a basic list with div's

<div id="sidebar" >
<ul class="sidemenu">
<li><a href="index.html">home</a></li>
<li><a href="products">products</a></li>
<li><a href="services">services</a></li>
<li><a href="aboutus">about us</a></li>
<li><a href="contact">contact</a></li>
<li><a href="policies">policies</a></li>
<li><a href="racing">racing</a></li>
<li><a href="videos">videos</a></li>
<li><a href="gallery">gallery</a></li>
<li><a href="forums">forums</a></li>
</ul>

</div>


Now I've attempted to get some javascript to work on this. What I've done is, in the index.php file place the information in the header section (to call the javascript file) then in the nav.html file I put in the code needed. It simply doesn't work this way as I've learned. Is there some other way to get this to work the way I need it to? I'm a little lost here. :confused:

Thanks in advance for any advice! :agree::)

2399Skillz
09-04-2009, 04:35 AM
Well I've figured out a cheater way to do it, using multiple nav.html documents.

Basically what I have done is when a link that needs a submenu is clicked, it'll go to a page that's the "main" page for the category but call a custom nav.html file this time that's got a sub menu under it.

Really wish there was an easier way to define this all in one file, but I suppose this will do for now.

cartikadave
09-04-2009, 12:32 PM
You will want to do this in CSS and not JavaScript (my opinion). Take a look at this link of search results (http://www.google.com/search?client=opera&rls=en&q=css+dropdown+menu&sourceid=opera&ie=utf-8&oe=utf-8) or even suckerfish CSS (http://htmldog.com/articles/suckerfish/dropdowns/) gives a good tutorial and needed code examples etc. I also found this online tool (http://pixopoint.com/suckerfish_css/) to get you started :)