CSS Chrome Menu

[benslayton]

http://dynamicdrive.com/dynamicindex1/chrome/index.htm

Instead of having the menu dropdowns on top of each other. How would I make them show up left to right instead of up and down?

[benslayton]

Can Anyone help? Please.

[jscheuer1]

I'd go with a different menu script that already has that type of action.

[benslayton]

That's what I was trying to do, but I could not find one. DD doesn't have any, & i've googled it...

[jscheuer1]

I'm not sure what you want then, what's wrong with something like this:

http://www.dynamicdrive.com/dynamici...men3/index.htm

I'm not recommending that one, but there are literally thousands like it around the web.

[benslayton]

Because this is how I want it to look...

Menu

But I do not want to steal it.

[jscheuer1]

You're not stealing anything. This stuff is all up for grabs as long as the credits remain intact. You can use images and/or styling from one menu with the code from another. That part is called design. Before you even worry about design, you need to select the code that supports the type of function that you want.

[benslayton]

I've tried it.

With me using http://www.bellsouthpwp2.net/b/e/benslayton124 For some reason flash will not let me take Templates/menu_tabs.xml (which is the original directory) and use bellsouthpwp2.net/b/e/benslayton124/templates/menu_tabs.xml

I've tried it all.

[jscheuer1]

I've looked more closely at this. Getting back to the chrome menu for a moment, I'd try changing:

.dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*Theme Change here*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}

to:

.dropmenudiv a{
width: 100%;
display: inline;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*Theme Change here*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}

and see where that got me.

[jscheuer1]

Ok, I did that and it helped quite a bit but, not exactly what one would want for a professional presentation. So, working from the distribution .zip, I fiddled about a bit more, coming up with this css for .dropmenudiv and .dropmenudiv a:

.dropmenudiv{
position:absolute;
top: 0;
border-left: 1px solid #BBB;
border-bottom: 1px solid #BBB;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
visibility: hidden;
white-space:nowrap;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
}

.dropmenudiv a{
width: 100%;
border-right:1px solid #bbb;
padding: 2px 0.5em;
padding-left:0;
text-decoration: none;
font-weight: bold;
color: black;
}

I then removed all inline style from the dropmenudivs in the HTML (some had inline style with widths defined, some didn't have any inline style). I added this script to the bottom of the HTML page, just above the closing </body> tag:

<script type="text/javascript">
var menuAnchor=document.getElementById? document.getElementById('anch') : document.all['anch'];
</script>

and this id to the first header (from the demo):

<div id="chromemenu">
<ul>
<li><a id="anch" href="http://www.dynamicdrive.com">Home</a></li>

Almost done, I then changed the calls from:

cssdropdown.dropit(this,event,'dropmenu1')

to:

cssdropdown.dropit(menuAnchor,event,'dropmenu1')

Finally, due to a slight rendering difference between Mozilla and both IE and Opera, I added this to the script (chrome.js) itself:

totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft-(document.all? 0 :1 ) : totaloffset+parentEl.offsetTop;

I think that 1 is the border width of the dropmenudiv class, or of the anchor header, didn't test it out as, it can be adjusted as needed.