Remove ul functions i dd menu

**spaniland** · 03-01-2008, 11:31 AM

1) Script Title: Chrome CSS Drop Down Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...rome/index.htm

3) Describe problem:
Hi. Plese see http://www.holedesign.com/asp/welcome.asp for example. I would like to have the menu dropped down as is, but list the links horisontally (or any html style i prefeer) instead of having the javascript makin it ul styled.

The menu are database generated, so i would like to have full design-freedom on the output aswell.

Thanks

- håvard -

**jscheuer1** · 03-01-2008, 02:57 PM

You could just change the style from:

Code:

/* ######### Style for Drop Down Menu ######### */

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


.dropmenudiv a{
width: auto;
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:

Code:

/* ######### Style for Drop Down Menu ######### */

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


.dropmenudiv a{
width: auto;
display: inline;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}

**spaniland** · 03-01-2008, 03:57 PM

Hmmm...

Thanks for the feedback. But I really did not get the result I was looking for.
Please see http://www.holedesign.com/asp/welcome.asp for the result.

I did the following:
1: Changed the 2 variables you market (and removed the !important comment, correct ??)
2: Removed the width style on the layer itself, to truly make it auto, correct?

It still looks like it creates an ul function. I searched the js place to correct, but could find it...

Thanks for the effort.

- håvard -

**jscheuer1** · 03-01-2008, 06:06 PM

!important is not a comment. It is valid css style syntax which tells the browser to override all other later property/value pairs for all elements selected by that rule that might contradict it, unless they also have the !important syntax. But my primary reason for using it was to override the individual width settings which you say you removed. However, you might as well reinstate !important.

Now, to get this working, use a valid URL DOCTYPE, like:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Holedesign </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content="">
<meta name="descri . . .

Then, just to be safe, also get rid of:

Code:

* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}

**spaniland** · 03-02-2008, 12:16 AM

Thanks a lot for a straight forward and educationally post!!!!

Have nice one...

- håvard -

**spaniland** · 03-02-2008, 12:30 AM

Maybe I should started a new thread, but here goes...

I would like to center the drop down menu.
In the menu "møbler" at http://holedesign.com/asp/welcome.asp the option "reoler" should be located directly under.

Once again, thanks a lot...

- håvard -

**jscheuer1** · 03-02-2008, 03:47 AM

Well, centering it will not necessarily achieve the exact alignment that you envision, but it will be very close. Try this out - replace (in chrome.js near the top):

Code:

getposOffset:function(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
},

with:

Code:

getposOffset:function(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft+what.offsetWidth/2 : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset-(offsettype=="left"? this.dropmenuobj.offsetWidth/2 : 0);
},

It takes the horizontal center of the trigger as the starting point and subtracts half of the width of the drop down to arrive at the drop down's left position. Basically, centers the drop down under the trigger.

Now personally, I think it looked better the way it was, but it's up to you which you prefer.

Thread: Remove ul functions i dd menu

Thread Tools

Search Thread

Remove ul functions i dd menu

The Following User Says Thank You to jscheuer1 For This Useful Post:

Centering the drop down

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions