PDA

View Full Version : CSS Chrome Menu



benslayton
05-20-2006, 10:09 PM
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
05-21-2006, 07:50 PM
Can Anyone help? Please.

jscheuer1
05-21-2006, 07:53 PM
I'd go with a different menu script that already has that type of action.

benslayton
05-21-2006, 08:09 PM
That's what I was trying to do, but I could not find one. DD doesn't have any, & i've googled it...

jscheuer1
05-21-2006, 09:28 PM
I'm not sure what you want then, what's wrong with something like this:

http://www.dynamicdrive.com/dynamicindex1/topmen3/index.htm

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

benslayton
05-21-2006, 09:36 PM
Because this is how I want it to look...

Menu (http://www.adriantnt.com/templates/menu_tabs.swf)

But I do not want to steal it.

jscheuer1
05-21-2006, 09:56 PM
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
05-21-2006, 10:09 PM
I've tried it.

With me using http://www.bellsouthpwp2.net (http://www.bellsouthpwp2.net/b/e/benslayton124)/b/e/benslayton124 (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
05-22-2006, 04:13 AM
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
05-22-2006, 05:24 AM
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.