2 Level Menu

139 Posts

nootkan Reply #1, 16 years, 10 months ago

I am trying to create a two level menu for my site using wayfinder but cannot seem to figure it out. I’ve been to the muddypaws site but don’t understand what I’m reading. I tried copying and pasting all the info for the two level example and got the same thing as the image below. I created the chunks as they were in the example and deleted the css from my template because it looks like I have to use the css in wayfinder as per the example. When that didn’t work I went back to my original setup that Susan Otwell helped me set up for a one level menu and now I want to make the photo tab drop down to include Gallery, Gallery 2, Gallery 3, Gallery 4 and Favorites. In my wayfinder call I tried this

[[Wayfinder? &startId=`0`  &level=`2`]]

and in my stylesheet I have this

					/*TOP MENU*/
#navcontainer {
clear : both;
width : 100%;
}
#navcontainer ul {
float : left;
width : 100%;
padding-left : 0;
margin-left : 0;
margin:0px;padding:0px;
background : #a67e1c;
color : #fff;
}
#navcontainer ul li {
display : inline;
}
#navcontainer ul li a {
float : left;
padding : 0.2em 0.5em;
text-decoration : none;
border-right : 1px solid #fff;
background : #a67e1c;
color : #fff;
}
#navcontainer ul li a:hover {
background : #c79316;
color : #fff;
}
#active a:link, #active a:visited, #active a:hover {
background : #c79316;
color : #fff;
}
#navcontainer ul ul {
position: relative;
z-index: 500;
}
#navcontainer ul ul li a:hover {
background: #c79316;
color: #fff;}

Here is what it looks like

Can anyone shed some light on what I’m doing wrong?

139 Posts

nootkan Reply #2, 16 years, 10 months ago

Well I’ve tried three different two level drop down menus and none of them seem to work with wayfinder. Does anyone have one that does work? Two gave me the same result as the above post and one showed up as a vertical text menu. All I’m doing is changing the css to the drop down menu I’m using and keeping the wayfinder call [[Wayfinder? &startId=`0` &level=`2`]]

ul#nav, ul#nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	}
 
ul#nav  li {
	position: relative;
	float: left;
	width:149px;
}
	
#nav li ul {
	position: absolute;
	margin-left: -999em; /* hide menu from view */
	top: auto;
	left:0;
}
 
/* Styles for Menu Items */
ul#nav  li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #a67e1c; /* IE6 Bug */
	padding: 5px;
	border: 1px solid #ccc;
		margin-bottom:-1px;
	min-height:0;
	}
/* commented backslash mac hiding hack \*/ 
* html ul#nav  li a {height:1%;	position:relative;}
/* end hack */ 
 
/* this sets all hovered lists color */
#nav li:hover a,#nav  li.over a,
#nav li:hover li a:hover,#nav li.over li a:hover {
   color: #fff;
   background-color: #c79316;}
 
/* set dropdown to default */
#nav li:hover li a,#nav li.over li a {
   color: #777;
   background-color: #a67e1c;
}
#nav li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
#nav li:hover ul,#nav li.over ul {margin-left:0; } /* show menu*/

2,314 Posts

anonymized-26931 Reply #3, 16 years, 10 months ago

Hi nootkan,

maybe this thread helps: http://modxcms.com/forums/index.php/topic,22737.msg184227.html#msg184227
demos:
-> http://bfenthusiasts.com/fleet/armorique.html
-> http://beta.codeflow.nl/

139 Posts

nootkan Reply #4, 16 years, 10 months ago

Thanks Sharkbait for your reply. That looks like something I may try later, however I was looking for a simple drop down for one tab only. I am struggling to understand how to use chunks still and figured I’d better stick to the basics for now until I can read up more on chunks/snippets. I can’t understand why the normal menu works with just a simple wayfinder call and css only but adding a drop down seems to mess everything up. I don’t do this for a living (I’m a long haul truckdriver by trade) I’m just helping out a friend who was disgruntled with his previous website and host. I built my own website a few years ago (when I ran a sport fishing business) with dreamweaver using tables and then last year I changed everything over to css where my drop down works good, so I guess I’m a real newbie with modx.

2,314 Posts

anonymized-26931 Reply #5, 16 years, 10 months ago

actually i’m not sure which of the menus you are trying to build...
there’s a ready to go wayfinder config which will look like this: http://modxguru.com/jquery_superfish_multi_lavel
-> you can grab it here: http://modxcms.com/forums/index.php/topic,31376.0.html

2,314 Posts

anonymized-26931 Reply #6, 16 years, 10 months ago

btw. most of the muddydogpaw-examples are also included as ready to use (more or less plug’n play) wayfinder configs -> have a look at your assets -> snippets -> wayfinder -> configs folder to see which of them are available
you simply call the by

[!Wayfinder?startId=`0` &config=`place-the-name-of-the-configfile-here`!]

e.g.

[!Wayfinder?startId=`0` &config=`cssplay-dropdown`!]

139 Posts

nootkan Reply #7, 16 years, 10 months ago

Sharkbait, thanks for the replies. I have tried everything you’ve posted but get the same results as my above posted images. I like the idea of the muddy paws examples as that is what I wanted the first time around. I didn’t know they were included in the modx config. I’m starting to think that this has something to do with me using my own template and css file but how to find out where the problem is occurring is becoming frustrating.

2,314 Posts

anonymized-26931 Reply #8, 16 years, 10 months ago

I’m starting to think that this has something to do with me using my own template and css file but how to find out where the problem is occurring

if you are testing the included config files, uncomment the menu part of your current css file, since it might conflict with the config css

139 Posts

nootkan Reply #9, 16 years, 10 months ago

Yeah I tried that also with no luck. huh

139 Posts

nootkan Reply #10, 16 years, 10 months ago

Silly me, I forgot to change the div above the wayfinder call in my header chunk. Works like a charm now. Thanks for all your help sharkbait. wink