composed horizontal dropdown menu problem

1,024 Posts

Frank Reply #1, 19 years ago

I am trying to put codes of a few free templates together, but have problems with the Horizontal dropdown menu.
The url is http://www.pianoquartet.nl. Much easier to see the problem here in the menu (both in FF and IE7, just checked IE6, oh my, looks even worse embarrassed

)

The CSS used is as follows

 /* common styling */
.menu {
font-family: verdana, sans-serif;
width:100%;
height: 110px;
position:relative;
font-size:0.80em;
z-index:100;
margin:0px 0 0 0px;
border-top : 1px solid #fff;
border-bottom : 1px solid #fff;
background : #417c2c;
color : #333;
}
.menu ul {
float : left;
width : 100%;
padding-left : 0;
margin : 0 0 20px 0;
font-size : 110%;
border-top : 1px solid #fff;
border-bottom : 1px solid #fff;
background : #417c2c;
color : #333;
}
.menu ul li {
display: inline;
float:left;
position:relative;
margin:0;
padding-left: 0px;
}
.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color:#000;

height:2em;
color:#9BCA0F;
border:1px solid #9BCA0F;
border-width:1px 1px 0 1px;
background:#FFF;
padding-left:6px;
line-height:2em;
border-top: 1px solid #6DA133;

}
* html .menu ul li a, .menu ul li a:visited {
width:100%;
w\idth:71px;
}
.menu ul li ul {
display: none;
}
table {
margin:-1px;
border-collapse:collapse;
font-size:1em;
}

/* specific to non IE browsers */
.menu ul li:hover a,
.menu ul li a:hover {
color:#9BCA0F;
background:#F4F4F4;
border-top: 1px solid #9BCA0F;
}

/*added*/
.menu ul li a.here, .menu a .active  {
color:#FFA500;
background:#FFF;
border-top: 1px solid #676767;
}
.here {
color:#9BCA0F;
background:#EBEBEB;
border-top: 1px solid #ff9900;
}

.menu ul li:hover ul,
.menu ul li a:hover ul {
display:block;

top:2em;
margin-top:1px;
left:0;
width:100%;
}
* html .menu ul li a:hover ul {
margin-top:0;
marg\in-top:1px;
}

.menu ul li:hover ul li ul,
.menu ul li a:hover ul li a ul {
visibility:hidden;
width:100%;
height:0;
width:0;
}

.menu ul li:hover ul li a,
.menu ul li a:hover ul li a {
display:block;
background:#F7F7F7;
color:#9BCA0F;
height:auto;
line-height:1.2em;
padding:5px 10px;
width:100%;
border:1px solid #BABABA;

}
* html .menu ul li a:hover ul li a {
width:100%;
w\idth:100%;
}

.menu ul li:hover ul li a.drop,
.menu ul li a:hover ul li a.drop {
background:#F8F8F8 url(drop.gif) bottom right no-repeat;
}

.menu ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover {
background:#FFF;
color:#6DA133;
}

.menu ul li:hover ul li:hover ul,
.menu ul li a:hover ul li a:hover ul {
visibility:visible;
position:absolute;
left:150px;
top:0;
width:100%;
}

.menu ul li:hover ul li:hover ul.left,
.menu ul li a:hover ul li a:hover ul.left {
left:-150px;
}

It is contained in a seperate style sheet "menu.css".
I am not asking for someone to finish this site. Just hoping someone here can spot the error in a second.

Using: Modx 9.6, Wayfinder 2.0, XP SP2, ff ie7/6, safari 4 win & mac.

Code copied from: www.tattoocms.it, www.mitchinson.net, and some CSS tuts on this subject.

Cheers, Frank.

MODX Staff
2,502 Posts

Jay Gilmore Reply #2, 19 years ago

Looking at your code there are some errors kicking out in my validator. That being said take a look at the very well tested examples from the author of Wayfinder:

http://www.muddydogpaws.com/development/wayfinder/examples.html

It looks to me like your IE conditional comments are not written correctly and as a matter of personal opinion you could certainly cut out a few divs by applying classes to block level containers like your meny <UL>.

Author of zero books. Formerly of many strange things. Pairs well with meats. Conversations are magical experiences. He's dangerous around code but a markup magician. Blog ✦ Twitter ✦ LinkedIn ✦ GitHub

412 Posts

fruitwerks Reply #3, 19 years ago

I would like to suggest that you pick a menu system you like and build your site around that. You will need to at least familiarize yourself with CSS. I have found that wayfinder does not work for me because I can not get it to stay behind any iframe or lightbox type of scripts. I started with a template that I liked and worked with it. In the end I made my own template from scratch after getting a slight grip on CSS.

Good Luck!

MODX Staff
2,502 Posts

Jay Gilmore Reply #4, 19 years ago

The reason the dropdowns don’t work with Lightbox or other similar overlay techniques is because of the z-index property.

You have to make sure that the z-index you use doesn’t place the dropdown above or below your lightbox overlay. if you look at the lightbox CSS files you will see that the z-index is set for 100 for the #lightbox and 90 for the overlay and 10 for the hover nav. If you stick two zeros (00) at the end of each so you have 10000, 9000 and 1000 respectively you should have no problems using lightbox with the wayfinder dropdowns.

Z-index is a tricky property to work with especially when using multiple css files with multiple z-index levels. Remember that the higher the number the more above it will be. A z-index of 100 will be "above" a z-index of 1.

There may be other issues as different browsers treat z-index differently which may requires containers to have z-index defined so that you don’t end up with your "layers" overlapping.

Author of zero books. Formerly of many strange things. Pairs well with meats. Conversations are magical experiences. He's dangerous around code but a markup magician. Blog ✦ Twitter ✦ LinkedIn ✦ GitHub

412 Posts

fruitwerks Reply #5, 19 years ago

ahh.. wow that simple eh. Well I have switched over to a very simple single level menu. It is working out well so far. In a month or two when I will be forced to add more content I will look into menus again.

Thanks!

1,024 Posts

Frank Reply #6, 19 years ago

I was hoping someone could spot the mistake(s).

Looking at your code there are some errors kicking out in my validator.

For the CSS/HTML, I am allways using Firefox, thingy plugin, and the page validates well. Also in Rapid CSS no errors, so I am wondering what tools you use.

About MuddyDogPaws, the links only give me examples, and not the css html codes, or am i looking in the wrong place.
As said, about the "over done" divs etc, this code was put together from bits and pieces. I took out the conditional comments,written for IE7, no change. I did a course in css, think i should go for a more advanced course and a PHP course or get a brain upgrade. Always a nice option.

Anyway, thanks for the input, hope you can give me the link for Stu Nicholls codes of the dropdown menu´s.

best, fr

MODX Staff
2,502 Posts

Jay Gilmore Reply #7, 19 years ago

Frank,

I use two validators with FireFox. The one that catches everything is the HTML Validator add-on that catches dropped end elements or missing or empty elements--partly because it works on the browser rendered source so if a missing element or incorrectly closed element exists the browser "fixes" it and renders it --often causeing a cascade of errors after it. I like this real world checking to ensure that it is valid as rendered and not just on the W3C site where it is not actually browser rendered but XML parsed.

The CSS for the Dropdowns used in Wayfinder are located in your /assets/snippets/wayfinder/examples/ directory. All of the menus are included in the sample code so you can just copy the whole sample, snippet call and all and put it into your template.

Author of zero books. Formerly of many strange things. Pairs well with meats. Conversations are magical experiences. He's dangerous around code but a markup magician. Blog ✦ Twitter ✦ LinkedIn ✦ GitHub

1,024 Posts

Frank Reply #8, 19 years ago

Quote from: smashingred at Sep 11, 2007, 03:02 PM

Frank,

I use two validators with FireFox. The one that catches everything is the HTML Validator add-on that catches dropped end elements or missing or empty elements--partly because it works on the browser rendered source so if a missing element or incorrectly closed element exists the browser "fixes" it and renders it --often causeing a cascade of errors after it. I like this real world checking to ensure that it is valid as rendered and not just on the W3C site where it is not actually browser rendered but XML parsed.

The CSS for the Dropdowns used in Wayfinder are located in your /assets/snippets/wayfinder/examples/ directory. All of the menus are included in the sample code so you can just copy the whole sample, snippet call and all and put it into your template.

Cheers, some good ideas! Will check this right now.

Frank.

1,024 Posts

Frank Reply #9, 19 years ago

That whole validation seems to be worth a new topic. The modx manager page does not validate, still it works.
Even the page where I downloaded the tool you suggested, does not validate, still it works. Just a thought,

ch fr.

412 Posts

fruitwerks Reply #10, 19 years ago

Validation is just something cool... That is why there is Quirks mode

Last I checked I only have one page on my site that does not validate (due to eform). It took me a while and about 3kb of CSS to get there... I do not display the logos on my site, and even those who do sometimes do not validate. Although I like valid code, if it renders ok in your visitors browser, that is just fine