DHTML & CSS navigation menu system help?

Hey Everyone,

Just registered here, looks like a good resource!

So this is my issue. I've created a menu navigation system using a tutorial I've found on the web. It uses a mixture of DHTML, Javascript, and CSS for it's design and function.

I've edited it quite a bit to get it to work and look how I want it to, and there are just a few issues I haven't been able to figure out. Hoping there might be a wizard around here who could help out!

Here is a link to the menu system as it is now. On this html page I have also included the CSS and JS below the actual menu in case anyone would like to view how I have it currently.
http://www.aardvarkmulti.com/media/menu_test.html

Attached to this post are also screen shots (menu-ss.gif) of how I would like the end result to appear. (menu-ss2.gif) is how it is currently apppearing.

Overall, my menu needs the following changes:

1. When a parent item is selected, I would like the "Grey Rounded Box" image to swap out with a different image. This image will be the same size, but will be a dark red color, vs. the grey color.

2. When a parent item is selected, and the submenu drops down, there is a white space in between the parent menu image and the dropdown, I would like that white space to be gone. Again, this effect can be seen in the screen shot I have attached.

3. I would like a small "rounded corner" image to appear at the very bottom of each submenu, giving the effect of the rounded corner on the bottom. Once again, this can be seen in the screenshot gif I have attached to this post.

I'm sure this can be achieved with some css commands that I'm obviously not aware of, but any help would be Greatly appreciated!!!

Thanks in advance! :D

This may help.

Frank


Validation Output: 1 Error
Line 53, Column 23: character "&" is the first character of a delimiter but occurred as data.
<a href="#">Webcasts & Events</a>✉
This message may appear in several cases:

You tried to include the "<" character in your page: you should escape it as "&lt;"
You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&amp;", which is always safe.
Another possibility is that you forgot to close quotes in a previous tag.

Line 53, Column 24: XML Parsing Error: xmlParseEntityRef: no name.
<a href="#">Webcasts & Events</a>

This may help.

Frank


Validation Output: 1 Error
Line 53, Column 23: character "&" is the first character of a delimiter but occurred as data.
<a href="#">Webcasts & Events</a>✉
This message may appear in several cases:

You tried to include the "<" character in your page: you should escape it as "&lt;"
You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&amp;", which is always safe.
Another possibility is that you forgot to close quotes in a previous tag.

Line 53, Column 24: XML Parsing Error: xmlParseEntityRef: no name.
<a href="#">Webcasts & Events</a>

Frank, thanks a lot for your suggestions. I will remember those helpful hints.

However, I'm still looking for a solution, so if anyone has additional ideas or even links that might put me in the right direction please do post them.

I have also uploaded an additional screenshot/storyboard which might help to understand my dilemma a bit better! :thumbsup:

I am not an expert at css, but I do not recognise the css you give. I always understood that DIV was a html tag, and that the css was in the form
#Content etc
or
.Whatever

I have not previously seen DIV in a css command.

I may have missed it, but it is certainly new to me. Most css

Usually in this form:-

Frank





*{
margin: 0;
padding: 0;
}


.p {color:white;}
#body
{ margin: 0px; padding: 0px;
display: inline-block;
background-color: #bbb;
color:white; }

.wrapper
{ text-align: center;
background-color: #bbb;
color:white;
margin-top:0px; }

.wrapper p
{ display: inline;
font-size:60% }

.wrapper span
{ margin: 1em;
vertical-align: top;
width: 140px;
height: 150px;
display: inline-block; }

.wrapper p span
{ vertical-align: bottom; }


.wrapper p img
{ margin-bottom: 0px;
border: none;
margin-top: 0px; }

.wrapper a
{ text-decoration:none;
color: #000; }

#main
{ float: right;
width: 750px; }

#main p
{ clear: both;
width: auto; /* reverting the width set in #content p */
text-align: center;
color: #ffffff; }

#main a
img {border: 2px solid white;}

#main a:hover
img {border-color: orange;}

#wrap
{ position: relative;
width: 950px;
margin: auto; }

Good eye Frank! I just went into my css form and removed the "div" so now my stylesheets display ".sdmenu" instad of "div.sdmenu"....unfortunately that doesn't resolve the design issues I'm asking about but thanks again for another good suggestion.

Good eye Frank! I just went into my css form and removed the "div" so now my stylesheets display ".sdmenu" instad of "div.sdmenu"....unfortunately that doesn't resolve the design issues I'm asking about but thanks again for another good suggestion.
You do still have the word DIV in your css. I don't know whether it causes any of your problems, but it is worth bearing in mind.

Frank

you'd be better to put your nav menu into a unordered list like this,

<ul>
<li>Main item 1</li>
<li>Main Item 2</li>
<li>
<ul>
<li>sub level flyout 1</li>
<li>sub level flyout 2</li>
</ul>

This would make the first item have no flyout outs and the second item would have two flyouts. look up www.alistapart.com or google suckerfish menu for more detailed instructions.

bazz

Bazz,

I appreciate your suggestions. However I have already put so much work into this menu system I would love for it to display properly. I have looked into Suckerfish menus and while I think they are good, they don't seem to look and function the same way that this menu system does.

If anyone has additional suggestions on how I can tweak this CSS to make it display properly I would greatly appreciate it.