PDA

View Full Version : Adding a drop down menu



soundsofchewelah
12-27-2008, 03:02 AM
First of all, I just want to thank everyone for providing such wonderful graphics and stuff for everyone.

Well, I am creating a website for a fire department, and found one of the navigation menus at, http://www.dynamicdrive.com/style/csslibrary/item/glossy_horizontal_menu/ Well, I liked it a lot, so I used the code, but with my graphics. Basically, it looks the same, but with tan/cream colors.

So here's my question, can anyone help me in creating a drop down menu for this navigation bar? I know it involves jscript, but I'm not familiar with that. and I tried coping the parts of other scripts that had drop down menus and meshing into the current script, but obviously, I don't know what I'm doing. hahaha, thank you so much for any help!

bluewalrus
12-27-2008, 05:36 AM
mix this http://www.alistapart.com/articles/dropdowns with that and ask if you have further question.

Redbekah
12-27-2008, 06:57 PM
They also have these examples of the Dynamic Drive site:
http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm

But I am also curious about making one the way that you are suggesting. So I am going to try it for myself and let you know if I make it happen. Please let us know if you come up with it yourself as well.

Redbekah

soundsofchewelah
12-30-2008, 04:34 AM
Thanks guys. I'm trying now to see if I can't mesh them together. Which I know isn't the best way to do this. ;) I'll post back to see if i run into any problems.

soundsofchewelah
01-13-2009, 07:42 AM
Sorry that it took me so long to get back to you about this. I have had no luck.... I just can't seem to be able to pick which lines of code are causing the menu not to work. I used both of your suggestions, and just can't make it work. I would appreciate any help.

I like the simplicity of the suckerfish menu, but I couldn't even get that to work with that menu script I used.

HTML Navigation Menu Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


<html><head><title>West Thurston</title>

<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<center>
<table cellspacing="0" cellpadding="0" border="2" class="background">
<tr>
<td>
<div id="banner"> <img src="images/WestThurstonHeader.jpg" alt="Serving Better Together"> </div>
</center>
<ul class="glossymenu">

<li><a href="#"><b>Home</b></a></li>
<li><a href="#"><b>News</b></a></li>
<li><a href="#"><b>Services</b></a></li>
<li><a href="#"><b>Public Education</b></a></li>
<li><a href="#"><b>Employees</b></a></li>
<li><a href="#"><b>About Us</b></a></li>
<li><a href="#"><b>Contact</b></a></li>
</ul>


<center>
<div id="content">
<div id="left"> <span class="flt-lft"><img src="images/thumbnail-1.jpg" alt="Thumbnail"></span>
<p class="date">January 1 - New Website:</p>
<p>Well, this is part of it. The website is not complete just yet. There's a few background images that I want to add for the titles in the boxes to the right. The header is a major disaster and is only temporary. What I had in mind for the header is the the two Rochester and Littlerock stations, blended together. The footer is pretty much what I had in mind, although I may alter the colors a bit so that the footer can match the rest of the website.</p>
<p>All graphics are made by me, except for the two images to the left.</p>

<p class="flt-rgt"><a href="#">MORE</a></p>
<span class="flt-lft"><img src="images/thumbnail-2.jpg" alt="Thumbnail"></span>
<p class="date">December 31: - CSS Menu</p>
<p>Just a heads up that the navigation menu will have "drop down" selections when you move the mouse over a navigation category. This makes navigating through the website easier and faster.</p>
<p>I would like to talk to several people at the station to find out what the main links and sub links should be on the navigation menu.</p>
<p class="flt-rgt"><a href="#">MORE</a></p>
</div>
<div id="right">
<div id="headlines"> <span class="heading1">LIST
OF EVENTS</span>
<p class="date">Events Scheduled</p>
<p>Tue Dec 2 04:00 PM <br>
- WTFD Advisory Council Monthly Meeting of Advisory Council regarding
the Capital Compaign.</p>
<p class="date">Events Scheduled</p>
<p>Tue Dec 2 04:00 PM <br>
- WTFD Advisory Council Monthly Meeting of Advisory Council regarding
the Capital Compaign.</p>
<span class="flt-rgt"><a href="#">MORE</a></span>
</div>
<div id="stats">
<span class="heading2">Just A Box</span>
<p>I really can't think of anything to put here. Maybe popular links or "leave feedback" link.</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<div style="clear: both;"></div>
</div>
<div id="footer"> <a href="#">Home</a> | <a href="#">News</a> | <a href="#">Services</a> |
<a href="#">Public Education</a>
| <a href="#">Employees</a>
| <a href="#">About Us</a>
| <a href="#">Contact Us</a>
<br>
<br>
<p> West Thurston Fire District #1. All rights reserved.</p>
</div>
</td>
</tr>
</table>
</center>
</body></html>

Entire CSS File


body {
background: #dfdbc2 url(images/barbg.gif) repeat-x;
color: #00000;
font-family: tahoma, arial;
font-size: 10px;
margin: 0px;
padding: 0px;
text-align: left;
}

* html body {
}

img {
border: 0px;
}

a:link {
color: #611b1d;
font-size: 11px;
font-weight: bold;
text-decoration: underline;
}

a:visited {
color: #611b1d;
font-size: 11px;
font-weight: bold;
text-decoration: underline;
}

a:hover, a:active {
color: #FFFFFF;
font-size: 11px;
font-weight: bold;
text-decoration: none;
}

#footer a:link {
color: #FFFFFF;
font-size: 11px;
font-weight: bold;
margin-left: 10px;
margin-right: 10px;
text-decoration: none;
}

#footer a:visited {
color: #FFFFFF;
font-size: 11px;
font-weight: bold;
margin-left: 10px;
margin-right: 10px;
text-decoration: none;
}

#footer a:hover, #footer a:active {
color: #000000;
font-size: 11px;
font-weight: bold;
margin-left: 10px;
margin-right: 10px;
text-decoration: underline;
}

#banner {
clear: both;
height: 290px;
width: 800px;
}

#container {
margin: 0px auto;
text-align: left;
width: 800px;
}

#content {
display: left;
clear: both;
width: 800px;
background: #a09c7f;
background-repeat: repeat;
}

#footer {
background: url(images/footer-bg.gif) no-repeat;
clear: both;
color: #FFFFFF;
display: block;
font-size: 11px;
height: 108px;
padding-top: 20px;
text-align: center;
width: 800px;
}

#headlines {
background: #827961;
height: 199px;
padding: 10px;
width: 254px;
}

#left {
background: #a09c7f url(images/content-top-bg.gif) no-repeat 0% 0%;
float: left;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
padding-top: 80px;
width: 486px;
}

.background {
background-color: #FFFFFF;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #999999;
border-bottom-color: #999999;
border-left-color: #999999;
}

.nlink, .nlinkend {
float:left;
width:auto;
list-style: none;
display:inline;
text-align:center;
padding-top: 15px;
padding-left: 17px;
padding-right: 17px;
height:28px;
}
.nlink{
background-image: url(images/nav-line.gif);
background-repeat: no-repeat;
background-position: right top;
}
.nlinkend {
background-image: none;
}
.glossymenu{
position: relative;
padding: 0 0 0 0px;
margin: 0 auto 0 auto;
background: url(images/menu_bg.gif) repeat-x; /*tab background image path*/
height: 46px;
width: 800px;
list-style: none;
}

.glossymenu li{
float:left;
}

.glossymenu li a{
float: left;
display: block;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}

.glossymenu li a b{
float: left;
display: block;
padding: 0 24px 0 8px; /*Padding of menu items*/
}

.glossymenu li.current a, .glossymenu li a:hover{
color: #fff;
background: url(images/menuhover.gif) no-repeat; /*left tab image path*/
background-position: left;
}

.glossymenu li.current a b, .glossymenu li a:hover b{
color: #fff;
background: url(images/menuhoverright.gif) no-repeat right top; /*right tab image path*/
}
#right {
float: left;
width: 274px;
}

#right p {
margin-top: 0px;
}

* html #right p {
margin-top: -5px;
}

#stats {
background: #494949;
padding: 10px;
width: 254px;
}

* html #stats {
height: 170px;
}

.date {
color: #dfdbc2;
font-weight: bold;
}

.flt-lft {
float: left;
margin-right: 20px;
}

.flt-rgt {
float: right;
}

.heading1 {
background: url(images/heading-bg-1.gif) no-repeat;
color: #909090;
display: block;
font-family: arial, tahoma;
font-size: 14px;
font-weight: bold;
height: 21px;
margin-bottom: 12px;
padding-left: 40px;
padding-top: 4px;
width: 181px;
}

* html .heading1 {
margin-bottom: 5px;
}

.heading2 {
background-color: url(images/heading-bg-2.gif) no-repeat;
color: #909090;
display: block;
font-family: arial, tahoma;
font-size: 14px;
font-weight: bold;
height: 21px;
margin-bottom: 5px;
padding-left: 38px;
padding-top: 4px;
width: 161px;
}

bluewalrus
01-14-2009, 04:35 AM
Is this what you want to have drop downs?


<ul class="glossymenu">
<li><a href="#"><b>Home</b></a></li>
<li><a href="#"><b>News</b></a></li>
<li><a href="#"><b>Services</b></a></li>
<li><a href="#"><b>Public Education</b></a></li>
<li><a href="#"><b>Employees</b></a></li>
<li><a href="#"><b>About Us</b></a></li>
<li><a href="#"><b>Contact</b></a></li>
</ul>


Try


<ul class="glossymenu">

<li><a href="#"><b>Home</b></a>
<ul>
<li><a href="#"><b>Link</b></a></li>
<li><a href="#"><b>Link</b></a></li>
<li><a href="#"><b>Link</b></a></li>
<li><a href="#"><b>Link</b></a></li>
</ul></li>
<li><a href="#"><b>News</b></a></li>
<li><a href="#"><b>Services</b></a></li>
<li><a href="#"><b>Public Education</b></a></li>
<li><a href="#"><b>Employees</b></a></li>
<li><a href="#"><b>About Us</b></a></li>
<li><a href="#"><b>Contact</b></a></li>
</ul>


Then add in (this won't work in ie 6 or 7 though I dont think)

ul li ul {visibility:hidden;}
ul li:hover ul {visibility:visible;}

soundsofchewelah
01-14-2009, 06:52 AM
I appreciate the help blue, but that didn't work. No matter all my attempts to get a drop down, it ends up looking like this.... As you can see the "link" links that were supposed to be under "home" as you wrote in your code, they all end up as a main link, not a sub-link (dropdown). This of course pushes the other main links down one level and creates that white bar.

http://h1.ripway.com/soundsofchewelah/Screenshot.jpg

bluewalrus
01-14-2009, 02:16 PM
Try this one out


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


<html><head><title>West Thurston</title>
<style type="text/css">
body {
background: #dfdbc2 url(images/barbg.gif) repeat-x;
color: #00000;
font-family: tahoma, arial;
font-size: 10px;
margin: 0px;
padding: 0px;
text-align: left;
}

* html body {
}

img {
border: 0px;
}

a:link {
color: #611b1d;
font-size: 11px;
font-weight: bold;
text-decoration: underline;
}

a:visited {
color: #611b1d;
font-size: 11px;
font-weight: bold;
text-decoration: underline;
}

a:hover, a:active {
color: #FFFFFF;
font-size: 11px;
font-weight: bold;
text-decoration: none;
}

#footer a:link {
color: #FFFFFF;
font-size: 11px;
font-weight: bold;
margin-left: 10px;
margin-right: 10px;
text-decoration: none;
}

#footer a:visited {
color: #FFFFFF;
font-size: 11px;
font-weight: bold;
margin-left: 10px;
margin-right: 10px;
text-decoration: none;
}

#footer a:hover, #footer a:active {
color: #000000;
font-size: 11px;
font-weight: bold;
margin-left: 10px;
margin-right: 10px;
text-decoration: underline;
}

#banner {
clear: both;
height: 290px;
width: 800px;
}

#container {
margin: 0px auto;
text-align: left;
width: 800px;
}

#content {
display: left;
clear: both;
width: 800px;
background: #a09c7f;
background-repeat: repeat;
}

#footer {
background: url(images/footer-bg.gif) no-repeat;
clear: both;
color: #FFFFFF;
display: block;
font-size: 11px;
height: 108px;
padding-top: 20px;
text-align: center;
width: 800px;
}

#headlines {
background: #827961;
height: 199px;
padding: 10px;
width: 254px;
}

#left {
background: #a09c7f url(images/content-top-bg.gif) no-repeat 0% 0%;
float: left;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
padding-top: 80px;
width: 486px;
}

.background {
background-color: #FFFFFF;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #999999;
border-bottom-color: #999999;
border-left-color: #999999;
}

.nlink, .nlinkend {
float:left;
width:auto;
list-style: none;
display:inline;
text-align:center;
padding-top: 15px;
padding-left: 17px;
padding-right: 17px;
height:28px;
}
.nlink{
background-image: url(images/nav-line.gif);
background-repeat: no-repeat;
background-position: right top;
}
.nlinkend {
background-image: none;
}
.glossymenu{
position: relative;
padding: 0 0 0 0px;
margin: 0 auto 0 auto;
background: url(images/menu_bg.gif) repeat-x; /*tab background image path*/
height: 46px;
width: 800px;
list-style: none;
}

.glossymenu li{
float:left;
}

.glossymenu li a{
float: left;
display: block;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}

.glossymenu li a b{
float: left;
display: block;
padding: 0 24px 0 8px; /*Padding of menu items*/
}

.glossymenu li.current a, .glossymenu li a:hover{
color: #fff;
background: url(images/menuhover.gif) no-repeat; /*left tab image path*/
background-position: left;
}

.glossymenu li.current a b, .glossymenu li a:hover b{
color: #fff;
background: url(images/menuhoverright.gif) no-repeat right top; /*right tab image path*/
}
#right {
float: left;
width: 274px;
}

#right p {
margin-top: 0px;
}

* html #right p {
margin-top: -5px;
}

#stats {
background: #494949;
padding: 10px;
width: 254px;
}

* html #stats {
height: 170px;
}

.date {
color: #dfdbc2;
font-weight: bold;
}

.flt-lft {
float: left;
margin-right: 20px;
}

.flt-rgt {
float: right;
}

.heading1 {
background: url(images/heading-bg-1.gif) no-repeat;
color: #909090;
display: block;
font-family: arial, tahoma;
font-size: 14px;
font-weight: bold;
height: 21px;
margin-bottom: 12px;
padding-left: 40px;
padding-top: 4px;
width: 181px;
}

* html .heading1 {
margin-bottom: 5px;
}

.heading2 {
background-color: url(images/heading-bg-2.gif) no-repeat;
color: #909090;
display: block;
font-family: arial, tahoma;
font-size: 14px;
font-weight: bold;
height: 21px;
margin-bottom: 5px;
padding-left: 38px;
padding-top: 4px;
width: 161px;
}
ul li ul { display:none;}

ul li ul {width:55px;}
ul li:hover ul { display:block;
position:fixed; top:315px; left:175px; list-style-type:none;}
</style>
</head>
<body>
<center>
<table cellspacing="0" cellpadding="0" border="2" class="background">
<tr>
<td>
<div id="banner"> <img src="images/WestThurstonHeader.jpg" alt="Serving Better Together"> </div>
</center>
<ul class="glossymenu">
<li><a href="#"><b>Home</b></a>
<ul>
<li><a href="#"><b>Link</b></a></li>
<li><a href="#"><b>Link</b></a></li>
<li><a href="#"><b>Link</b></a></li>
<li><a href="#"><b>Link</b></a></li>
</ul></li>
<li><a href="#"><b>News</b></a></li>
<li><a href="#"><b>Services</b></a></li>
<li><a href="#"><b>Public Education</b></a></li>
<li><a href="#"><b>Employees</b></a></li>
<li><a href="#"><b>About Us</b></a></li>
<li><a href="#"><b>Contact</b></a></li>
</ul>

<center>
<div id="content">
<div id="left"> <span class="flt-lft"><img src="images/thumbnail-1.jpg" alt="Thumbnail"></span>
<p class="date">January 1 - New Website:</p>
<p>Well, this is part of it. The website is not complete just yet. There's a few background images that I want to add for the titles in the boxes to the right. The header is a major disaster and is only temporary. What I had in mind for the header is the the two Rochester and Littlerock stations, blended together. The footer is pretty much what I had in mind, although I may alter the colors a bit so that the footer can match the rest of the website.</p>
<p>All graphics are made by me, except for the two images to the left.</p>

<p class="flt-rgt"><a href="#">MORE</a></p>
<span class="flt-lft"><img src="images/thumbnail-2.jpg" alt="Thumbnail"></span>
<p class="date">December 31: - CSS Menu</p>
<p>Just a heads up that the navigation menu will have "drop down" selections when you move the mouse over a navigation category. This makes navigating through the website easier and faster.</p>
<p>I would like to talk to several people at the station to find out what the main links and sub links should be on the navigation menu.</p>
<p class="flt-rgt"><a href="#">MORE</a></p>
</div>
<div id="right">
<div id="headlines"> <span class="heading1">LIST
OF EVENTS</span>
<p class="date">Events Scheduled</p>
<p>Tue Dec 2 04:00 PM <br>
- WTFD Advisory Council Monthly Meeting of Advisory Council regarding
the Capital Compaign.</p>
<p class="date">Events Scheduled</p>
<p>Tue Dec 2 04:00 PM <br>
- WTFD Advisory Council Monthly Meeting of Advisory Council regarding
the Capital Compaign.</p>
<span class="flt-rgt"><a href="#">MORE</a></span>
</div>
<div id="stats">
<span class="heading2">Just A Box</span>
<p>I really can't think of anything to put here. Maybe popular links or "leave feedback" link.</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<div style="clear: both;"></div>
</div>
<div id="footer"> <a href="#">Home</a> | <a href="#">News</a> | <a href="#">Services</a> |
<a href="#">Public Education</a>
| <a href="#">Employees</a>
| <a href="#">About Us</a>
| <a href="#">Contact Us</a>
<br>
<br>
<p> West Thurston Fire District #1. All rights reserved.</p>
</div>
</td>
</tr>
</table>
</center>
</body></html>

soundsofchewelah
01-15-2009, 05:20 AM
You're the best Bluewalrus! There was a little problem with the positioning, but I fixed it, and added a background color (which I might change again). There's only one LAST problem. The "tab" image that is used for the main menu links also appears for the sub menu links. Not sure if that makes sense, so I took a screenshot of what happens when I move my mouse over a sub link.

http://h1.ripway.com/soundsofchewelah/mouseover.jpg

So we all know that looks pretty cheesy (the tab image). So this shows how little I know CSS... What would be the code to replace that tab image with just a color highlight as the background? I've been working on this simple task for an hour now. LOL (I know that's pretty sad).

bluewalrus
01-15-2009, 11:43 PM
You put the background tag on the wrong li property change that or give the other ones a class not sure exactley what you mean. You only want the tab's on the top row or on the first set like home. If the first then make it ul li background-image:whatever... ul li ul li background- image none.


Definatley not the best explination but I got a bunch of work to do right now. Message back if its neither of those or if that doesn't make sense at all.