Wayfinder dropdown menu

104 Posts

rachelmarama1 Reply #1, 15 years, 10 months ago

Hi,

I’m wondering if anyone can help me sort out a css/mod-x issue I am having with a dropdown menu using wayfinder. I want a vertical menu with a single level of dropdown menu underneath
Here’s the page I am working on:
http://www.medicosconscientes.net/index.php?id=2

The issue is that I want a horizontal menu, not a vertical one! I followed the instructions for the basic dropdown menu on the Muddydogpaws site (thanks Kyle)
http://muddydogpaws.com/development/wayfinder/examples/example-2.html

I updated the [+xxxx+] to [[+xxx]] for Revolution, and I started doing some restyling. But - my menu refuses to sit nicely on the page. I CAN get it to work locally by saving the HTML and the css on my desktop, so it seems to be something in Revolution.

I did see this comment on the Muddydogpaws site:

Kyle:
Aug 22, 2010 at 09:05 PM

Kirk, you should be able to get the CSSPlay menus that I have demos for working in Revolution. You may need to make sure it is an uncached snippet call. There is an issue with how the css gets added if you add the css via the Wayfinder call (using the &cssTpl parameter) so you have to call it uncached.

Could this be my issue?

Any help appreciated, thank you! And if I need to post code here to solve the issue please let me know.

Rachel

561 Posts

samba Reply #2, 15 years, 10 months ago

Hola,
I think I see what you’re referring to, you want the left side menu to be horizontal? I see an immediate problem, and I would suggest editing basic_dd.css.

The width setting here killed it. Notice how wide it is. Many of your menu items use this class. I took it out, and it started to work. You may still need to define width, but possibly narrower.

.menu {
  border-bottom: 0 none;
  font-family: arial,sans-serif;
  letter-spacing: 1.5px;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  width: 940px;
  z-index: 100;
}

Then I believe you’ll have to start playing with these settings to get the next level to show:

.menu ul li:hover ul {
    display: block;
    left: 0;
    position: absolute;
    top: 40px;
    width: 140px;
}

Oh, and maybe "enfermedades" instead of "enfirmidades"?

That should get you started. And wow, second time I’ve played with grid system CSS this week! Cool!
Ciao,
Dave

MODx and Wordpress development
Linux, PHP 5.2, MySQL 5.0, Evo 1.05, Revo 2.08-pl, Firefox 4

104 Posts

rachelmarama1 Reply #3, 15 years, 10 months ago

Thanks so much Samba! I’m thinking maybe I should be posting on a CSS forum & not the mod-x one embarrassed

That has sorted my issue out, and I now have a lovely horizontal menu.
I can’t get the menu below (the dropdown) to show though, on any pages. I’ve been playing around with the z-index, thinking that it was the scrolling image on the homepage, but it seems to not like any of the pages. You can see the top of the menu on the first item, and it’s being cut off where the next "row" starts, I think. Any suggestions for me?
ps thanks for the Spanish spelling tips.

16 Posts

jelmer Reply #4, 15 years, 10 months ago

rachelmarama,

Instead of giving the z-index: 100; style on your .menu put this on your #menuwrapper. I think this will fix your problem.

104 Posts

rachelmarama1 Reply #5, 15 years, 10 months ago

Thanks Jelmer. I’ve tried that out, and no dice, unfortunately.

16 Posts

jelmer Reply #6, 15 years, 10 months ago

hmm strange huh

You could give it a try by putting the z-index on; column grid_12 menu_background. I doubt if that works. If you want i can post some css code that i always use on this sort of navigations.

104 Posts

rachelmarama1 Reply #7, 15 years, 10 months ago

Hi Jelmer,

That would be great (the css code). I had the menu working in my HTML with other code, but then thought it would be easier to use code that was already working for Mod-x, and i’ve grabbed the css from muddydogpaws. Maybe not the best way to go. If you could give me your css, I will keep trying!

Thanks,
Rachel

16 Posts

jelmer Reply #8, 15 years, 10 months ago

Well here is the CSS code:

#nav {
	position:relative;
	z-index:100;
}
#nav ul, #nav ol {
	list-style-type:none;
	padding:0px;
	margin:0px;
}
#nav li {
	color:#464646;
	float:left;
	margin:0px 25px 0px 0px;
	cursor:pointer;
}
#nav ul a:link, #nav ul a:visited {
	text-decoration:none;
	color:#464646;
}
#nav ul a:hover, #nav ul a:active {
	color:#f17b10;
	text-decoration:none;
}
#nav a {
	display:block;
}
#nav ul ol {
	left:-5000px;
	position:absolute;
	padding-top:5px;
	list-style-type:none;
	border-bottom:1px solid #86796f;
}
#nav ul ol li {
	height:20px;
	width:172px;
	float:none;
	padding:4px 0px 0px 8px;
	margin:0px;
	color:#464646;
	text-align:left;
	border:1px solid #86796f;
	border-bottom:none;
	background-image:url(../afbeeldingen/nav_sub.jpg);
	background-repeat:no-repeat;
}
#nav ul ol a:link, #nav ul ol a:visited {
	text-decoration: none;
}
#nav ul ol a:hover, #nav ul ol a:active {
	color:#f17b10;
	text-decoration:none;
}
#nav li:hover ol {
	left: auto;
}
#nav li:hover ol {
	left: auto;
	background-position: 0 0;
}

Here I use the <ul> list for horizontal menu and the <ol> list for the dropdown. This also need to be changed in the wayfinder Tpl.

So thats the CSS code.

I just copied and paste it. I hope this helps you, good luck.

61 Posts

anablepo Reply #9, 15 years, 10 months ago

I know you probably don’t want to start over - but I almost always start out with the ol’ suckerfish, since it seems to be a bit of an industry staple.

http://htmldog.com/articles/suckerfish/dropdowns/

From there - if you tweak the tweak the first couple def’s and put the wayfinder in a class’d div - there’s no wayfinder templates, and you get a nice clean ul in your code.

Anyhow - I guess I’m just saying there’s an easier way that doesn’t break as easily during upgrades etc.

’would be happy to provide some examples if you want.

104 Posts

rachelmarama1 Reply #10, 15 years, 10 months ago

Thanks all - I have managed to start again and have implemented a new menu. It needs some styling, but I at least have it working (in firefox anyway).