Hi Everyone
Thought I would share this for people who want a really really quick and elegant wayfinder menu.
I made a css solution for nested lists, that requires absolutely NO css in the html - no template crap, no id’s, no classes, just really basic default semantic nested lists.
http://blake.ecenturyserver.co.uk/purecss_dropdown.html
So simply wrap your wayfinder call in container and menu inner id’s like such:
<div id="menu_container">
<div id="menu_inner">
[[Wayfinder? &startId=`0` &level=`2`]]
</div>
</div>
And voila, you have a horizontal list nav for top tier, second is a vertical drop down, then all subsequent children slide out the side.
Perfect!
Let me know what you all think - hope it is useful!
complete code follows:::
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />-->
<!--
| Made by Blake Williams - 13 may 2010 :: [email protected]
| Tested in IE(7&8), firefox, Opera, Safari, Chrome, Sleipnir, flock - yadda yadda
|
| Pure CSS drop down / slide out menu with NO body css Classes or ID's
| This baby is INIFINITE
-->
<title>Blakes Pure CSS Drop Down / Slide-out Menu</title>
<style type="text/css">
* {margin:0; padding:0;}
#menu_container {height:44px;margin:50px auto;border:1px solid #06C;width:1000px;}
#menu_inner {padding:0 0 0 20px;}
/* set up the base level horizontal nav */
#menu_inner ul,#menu_inner li {list-style:none;position:relative;}
#menu_inner > ul li {float:left;}
#menu_inner a {text-decoration:none;display:block;font:14px Arial, Helvetica, sans-serif;color:#000;padding:14px 20px;}
#menu_inner a:hover {background:#f00;color:#fff;}
/* the second tier - to default to no display */
#menu_inner li > ul,#menu_inner li > ul li {display:none;}
#menu_inner li > ul {border:1px solid #09F;border-top:1px solid #06C;width:220px;}
/* pseudo selector of li makes it visible */
#menu_inner li:hover > ul {display:block;position:absolute;}
#menu_inner li > ul li {background:#fff;color:#000;position:relative;display:block;}
#menu_inner li > ul li a {color:#000;border-bottom:1px dotted #CCC;width:200px;padding:10px;}
#menu_inner li > ul li a:hover {background:#ccc;}
/* After the second tier, the rest need to pop out of the side - as a default I have chosen to slide to the right */
#menu_inner li > ul li > ul {position:absolute;left:220px;top:-1px;display:none;}/* left = width of children */
#menu_inner li > ul li:hover > ul {position:absolute;left:220px;top:-1px;display:block;}/* this should inherit BUT if you take out redundant styles there are glitches */
</style>
</head>
<body>
<div id="menu_container">
<div id="menu_inner">
<ul>
<li><a href="#">Level 1</a></li>
<li><a href="#">Level 1</a></li>
<li><a href="#">Level 1</a>
<ul>
<li><a href="#">Level 2</a></li>
<li><a href="#">Level 2</a></li>
<li><a href="#">Level 2</a></li>
<li><a href="#">Level 2</a></li>
<li><a href="#">Level 2</a></li>
<li><a href="#">Level 2</a></li>
<li><a href="#">Level 2</a></li>
</ul>
</li>
<li><a href="#">Level 1</a></li>
<li><a href="#">Level 1</a></li>
<li><a href="#">Level 1</a>
<ul>
<li><a href="#">Level 2</a></li>
<li><a href="#">Level 2</a>
<ul>
<li><a href="#">Level 3</a></li>
<li><a href="#">Level 3</a></li>
<li><a href="#">Level 3</a></li>
<li><a href="#">Level 3</a></li>
<li><a href="#">Level 3</a>
<ul>
<li><a href="#">Level 4</a></li>
<li><a href="#">Level 4</a></li>
<li><a href="#">Level 4</a></li>
<li><a href="#">Level 4</a>
<ul>
<li><a href="#">Level 5</a></li>
<li><a href="#">Level 5</a></li>
<li><a href="#">Level 5</a></li>
<li><a href="#">Level 5</a></li>
<li><a href="#">Level 5</a></li>
<li><a href="#">Level 5</a></li>
<li><a href="#">Level 5</a></li>
</ul>
</li>
<li><a href="#">Level 4</a></li>
<li><a href="#">Level 4</a></li>
<li><a href="#">Level 4</a></li>
</ul>
</li>
<li><a href="#">Level 3</a></li>
<li><a href="#">Level 3</a></li>
</ul>
</li>
<li><a href="#">Level 2</a></li>
<li><a href="#">Level 2</a></li>
<li><a href="#">Level 2</a></li>
<li><a href="#">Level 2</a></li>
<li><a href="#">Level 2</a></li>
</ul>
</li>
<li><a href="#">Level 1</a></li>
</ul>
</div>
</div>
</body>
</html>
