Quote from: gesman at Nov 12, 2006, 09:39 PM
Hello, I would like to adjust a nice looking simple CSS menu to ModX "dynamic" way.
Here’s the site: http://fly2c.com
Could anyone tell me if there is an elegant way to make this menu autogenerated by Modx?
Now I’m really confused - this IS a MODx site....
If you look at the page source (on fly2c.com) we see that the HTML for the menu is very simple.. just
<ul id="tabnav">
<li><a href="#" class="active">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">archives</a></li>
</ul>
Apart from the non-working HREFs this HTML can be generated by a single Wayfinder call
[[Wayfinder? &startID=`0` &level=`1`]]
(startId = 0 means "start from the root of the site", while "level = 1" means to only use top-level pages as menu items)
The entire menu is contained in a CSS "id" element (id = tabnav) .. this is achieved by using the suggested "outerTpl" chunk from the MuddyDogPaws site... (www.muddydogpaws.com)
<ul id="topnav"[+wf.classes+]>
[+wf.wrapper+]
</ul>
To use this, you need to insert this code into a "chunk" which you can call anything you like, say "wfOuter". Then tell Wayfinder where to FIND this code to wrap the menu..
[[Wayfinder? &startID=`0` &level=`1` &outerTpl=`wfOuter`]]
OK, so this is all the work to get the HTML right... The rest of it is all done by CSS and looking at the CSS, it seems very simple and elegant.. to dig into the CSS, just look at
http://fly2c.com/assets/templates/uncomplicated/style.css
and you can see it all.
The key points seem to be
#tabnav li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
The "display:inline" means that the list items are displayed horizontally...
#tabnav a:link, #tabnav a:visited {
<stuff snipped>
border: 1px solid #ccc;
<stuff snipped>
}
Links in tabnav are given a 1-pixel solid grey border...
#tabnav a:link.active, #tabnav a:visited.active {
border-bottom: 1px solid #fff;
background: #fff;
color: #000;
}
But the ACTIVE links (the "active" class is added automatically by Wayfinder..) are given a bottom border that is white, creating the "tab" effect...
Now this does not consider "hover" which as far as I know is the single point at which IE deviates most from standards, but the hover effect is very subtle anyway and may not concern you too much.
If you are having problems with using existing SITE templates, then the problem is almost certainly that they use THEIR OWN "class" and "id" values to wrap up their menus, and then you have the problem that your "tabnav" CSS may get confused in complicated ways... I have been using "andreas01" as my base template, but have ended up substantially altering the menu parts of it to accommodate Wayfinder in the way that I want to use it..
Unfortunately the fact remains that there is no easy way (as yet) to just take an existing template, plug in a menu and have it all work perfectly...
HTH
Gordon
MODX Staff
