PDA

View Full Version : Drop Down Menu (Multi-level)



GOLFnTours.com - Francis
10-22-2008, 03:51 PM
Would anyone help with script on adding a second level drop down menu?

I have the first level menu (for names of countries) done alright; courtesy of scripts from Dynamic Drive (Hover over 'Golf Courses' on top menu bar on www GOLFnTours com).

I need the second level for the name of the cities for the various countries listed on the first level.

Dynamic Drive has provided some urls for help on the multi-levels but I am really not a Java person; the script looks Greek to me.

I believe with the first level done right, adding the second level should not be too difficult if one is more familiar with Java.

Would any guru out there help?
Thanks

Nile
10-22-2008, 09:19 PM
I'd say that this shouldn't be that hard to switch menus, try a different menu. I'm sure this one will fit your needs:
http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_horizontal_blue/

jscheuer1
10-22-2008, 09:44 PM
Warning: Please include a link to the DD script in question in your post. See this thread (http://www.dynamicdrive.com/forums/showthread.php?t=6) for the proper posting format when asking a question.

You might also want to consider other Dynamic Drive Menus from this index:

http://www.dynamicdrive.com/dynamicindex1/indexc.html

TheJoshMan
10-22-2008, 10:03 PM
You could just as easily use css to accomplish this.

The CSS:


* {
margin:0;
padding:0;
}

body {
background:#151515;
font-family:tahoma, arial, verdana, sans-serif;
color:#ababab;
font-size:13px;
}

#nav, #nav ul {
height:34px;
background:#7a7a7a;
float: left;
width: auto;
list-style: none;
line-height: 1;
font-weight: bold;
padding: 0;
margin: 50px 0 0 50px;
position:relative;
}
#nav {
padding: 0 25px;
}

#nav a {
display: block;
width: auto;
color: #303030;
text-decoration: none;
padding: 0 25px;
line-height:34px;
}
#nav a:hover{
color:#151515;
}


#nav li {
float: left;
padding: 0;
width: auto;
}

#nav li ul {
position: absolute;
left: -999em;
height: auto;
width:185px;
font-weight: normal;
border-width: 0;
margin: 0;
background:#adadad;
}

#nav li li {
padding:0 15px 0 0;
width: auto;
}

#nav li ul a {
width: 120px;
}

#nav li ul ul {
margin: -34px 0 0 185px;
}

#nav li:hover, #nav li.ieHover {
background: #adadad;
}

#nav li ul li:hover, #nav li ul li.ieHover{
background:#fff;
}



/*===============================DO NOT EDIT BEYOND HERE====================================*/

#nav li:hover ul ul,
#nav li:hover ul ul ul,
#nav li.ieHover ul ul,
#nav li.ieHover ul ul ul {
left: -999em;
}
#nav li:hover ul,
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li.ieHover ul,
#nav li li.ieHover ul,
#nav li li li.ieHover ul {
left: auto;
}
#nav li:hover ul ul,
#nav li:hover ul ul ul,
#nav li.ieHover ul ul,
#nav li.ieHover ul ul ul {
left: -999em;
}
#nav li:hover ul,
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li.ieHover ul,
#nav li li.ieHover ul,
#nav li li li.ieHover ul {
left: auto;
}
#nav li:hover ul ul ul,
#nav li:hover ul ul ul ul,
#nav li.ieHover ul ul ul,
#nav li.ieHover ul ul ul ul {
left: -999em;
}
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li li li li:hover ul,
#nav li li.ieHover ul,
#nav li li li.ieHover ul,
#nav li li li li.ieHover ul {
left: auto;
}
#nav li:hover ul ul ul ul,
#nav li:hover ul ul ul ul ul,
#nav li.ieHover ul ul ul ul,
#nav li.ieHover ul ul ul ul ul {
left: -999em;
}
#nav li li li:hover ul,
#nav li li li li:hover ul,
#nav li li li li li:hover ul,
#nav li li li.ieHover ul,
#nav li li li li.ieHover ul,
#nav li li li li li.ieHover ul {
left: auto;
}


The HTML:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Strictly CSS Menubar </title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="generator" content="EditPlus 3">
<meta name="author" content="Josh Jones">
<link rel="stylesheet" type="text/css" href="nav-style.css">
<!--[if IE]>
<style type="text/css">
#cmd li ul {
background:#a5a5a5;
}
</style>
<![endif]-->
</head>
<body>
<ul id="nav">
<li><a href="#">United States</a>
<ul>
<li><a href="#">Alabama</a>
<ul>
<li><a href="#">Birmingham</a></li>
<li><a href="#">Mobile</a></li>
<li><a href="#">Montgomery</a></li>
<li><a href="#">Huntsville</a></li>
<li><a href="#">Tuscaloosa</a></li>
</ul>
</li>
<li><a href="#">Alaska</a>
<ul>
<li><a href="#">Anchorage</a></li>
<li><a href="#">Fairbanks</a></li>
<li><a href="#">Juneau</a></li>
</ul>
</li>
<li><a href="#">Arizona</a>
<ul>
<li><a href="#">Kingman</a></li>
<li><a href="#">Mesa</a></li>
<li><a href="#">Phoenix</a></li>
<li><a href="#">Quartzsite</a></li>
<li><a href="#">Tempe</a></li>
<li><a href="#">Tucson</a></li>
<li><a href="#">Yuma</a></li>
</ul>
</li>
<li><a href="#">Arkansas</a>
<ul>
<li><a href="#">Bentonville</a></li>
<li><a href="#">Fayetteville</a></li>
<li><a href="#">Fort Smith</a></li>
<li><a href="#">Little Rock</a></li>
<li><a href="#">Texarkana</a></li>
<li><a href="#">West Memphis</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Some Coutnry</a></li>
<li><a href="#">Some Other Country</a></li>
<li><a href="#">Another Country</a></li>
</ul>
<script type="text/javascript" src="http://www.eight7teen.com/freebies/ieHover.js"></script>
</body>
</html>


Working Model: http://eight7teen.com/freebies/state-menu.html