~CSS_Dynamic_Navigation

media type="custom" key="213051" =CSS Navigation Test 2=

Objective
toc I would like to figure out a way to take a standard unordered list (i.e. bullets, UL) in Wikispaces and apply CSS code to the page to format the list into a dynamic navigation menu. I have posted the native UL //before// CSS application and the desired output //after// CSS application below. I have posted the two resulting HTML outputs below that. Currently using a DIV with a class of "nav2" in order to apply the CSS to the Navigation UL. However, notice that I currently have to specify more class attributes (submenu, level1, level2, level3) in order to apply the CSS behavior correctly. Of course, it is not possible to specify these custom classes using the native bullet UL feature in Wikispaces. SO, looking for a way to create a CSS that can apply to a generic UL with no class attributes. Any suggestions here are VERY welcome.

////

Output

 * Before || After ||  ||
 * * Home
 * Help/FAQ
 * Latest Activity
 * [|Beginner]
 * Navigation
 * Images
 * Media
 * Pimping
 * RSS
 * [|Advanced]
 * (x)HTML
 * CSS
 * JavaScript
 * Style || media type="custom" key="589829" ||  ||

From:
http://more.ericmeyeroncss.com/projects/06/

To Do:

 * Still need to figure out how to put this in the space.menu page AND have the dynamic popup appear over the main wiki area.
 * Document how to implement this using standard bullet tools in Wikispaces.
 * Should be able to separate the wiki content vs the required HTML to make this work.

HTML Before
code format="html4strict"  Home Help/FAQ Latest Activity  Beginner</a> <ul> <a class="wiki_link" href="/Navigation">Navigation</a></li> <a class="wiki_link" href="/Images">Images</a></li> <a class="wiki_link" href="/Media">Media</a></li> <a class="wiki_link" href="/Pimping">Pimping</a></li> <a class="wiki_link" href="/RSS">RSS</a></li> </ul></li>  <h3 id="toc~CSS_Dynamic_Navigation3"> <a href="http://themes.wikispaces.com/tag/view/advanced" rel="nofollow">Advanced</a> <ul> <a class="wiki_link" href="/HTML">(x)HTML</a></li> <a class="wiki_link" href="/CSS">CSS</a></li> <a class="wiki_link" href="/JavaScript">JavaScript</a></li> <a class="wiki_link" href="/Style">Style</a></li> </ul></li> </ul> code

HTML After
code format="html4strict" <?xml version="1.0" encoding="UTF-8"?> <a href="/">Home</a></li> <a href="/Help">Help/FAQ</a></li> <a href="/Latest_Activity">Latest Activity</a></li> <a href="/Beginner/">Beginner</a> <a href="/Navigation">Navigation</a></li> <a href="/Images">Images</a></li> <a href="/Media">Media</a></li> <li><a href="/Pimping">Pimping</a></li> <li><a href="/RSS">RSS</a></li> </ul> </li> <a href="/">Advanced</a> <li><a href="/HTML">(x)HTML</a></li> <a href="CSS">CSS</a> <li><a href="CSS_Sample">Sample CSS</a></li> <li><a href="~AttachCSS">Attach CSS</a></li> <li><a href="~CSS_Dynamic_Navigation">CSS Navigation</a></li> </ul> </li> <li><a href="/JavaScript">JavaScript</a></li> <li><a href="/Style">Style</a></li> </ul> </li> </ul>

code

CSS Code
code format="css" <style type="text/css">

<!-- default CSS Here>

/* Nav Dynamic */ div#nav2 {float: left; width: 7em; margin: -1px 0 0 -1px; background: #FDD;} div#nav2 ul {margin: 0; padding: 0; width: 7em; background: white; border: 1px solid #AAA;} div#nav2 li {position: relative; list-style: none; margin: 0; border-bottom: 1px solid #CCC;} div#nav2 li:hover {background: #EBB;} div#nav2 li.submenu {background: url(/space/showimage/submenu.gif) 95% 50% no-repeat;} div#nav2 li.submenu:hover {background-color: #EDD;} div#nav2 li a {display: block; padding: 0.25em 0 0.25em 0.5em; text-decoration: none; width: 6.5em;} div#nav2 ul a {width: auto;} div#nav2 ul ul {position: absolute; top: 0; left: 7em; display: none;} div#nav2 ul.level1 li.submenu:hover ul.level2, div#nav2 ul.level2 li.submenu:hover ul.level3 {display:block;}

code