Designs Advice Topic: cascading menu with premade background images

Designs Advice Topic: cascading menu with premade background images http://designsadvice.com/forums/ Designs Advice Topic: cascading menu with premade background images en Fri, 30 Jul 2010 13:51:37 +0000 drew on "cascading menu with premade background images" http://designsadvice.com/forums/topic/cascading-menu-with-premade-background-images-3#post-204 Fri, 25 Jan 2008 09:51:24 +0000 drew 204@http://designsadvice.com/forums/ maybe something like this will help <pre><code><ul id="nav"> <li>Heading <ul> <li><a href="">Menu1» drop</a></li> <li><a href="">Option1</a></li> <li><a href="">Option2</a></li> <li><a href="">option3</a></li> </ul> </li> <li>Grunts <ul> <li><a href="">Menu2 </a></li> <li><a href="">Option1</a></li> <li><a href="">Option2</a></li> </ul> </li> <li>menu3 <ul> <li><a href="">Option1</a></li> <li><a href="">Option2</a></li> <li><a href="">option3</a></li> </ul> </li> </ul></code></pre> Styling it To get started, all of the lists need to be jigged around a bit — namely, the padding and margin set to zero and the list-style set to none: <pre><code>ul { padding: 0; margin: 0; list-style: none; }</code></pre> Now we need to transform the first-level list into a horizontal menu bar. There are a number of methods to do this, discussed in detail elsewhere. We could display the list-items inline (display: inline), but for this example, we are going to float them to the left. <pre><code>li { float: left; position: relative; width: 10em; }</code></pre> The position has been set to relative because we want the position of the second-level, nested lists to be relative to the first-level list items and the width has been set to space it out a bit. The dropdown menu is coming together. The next step is to tackle the second-level lists that will be the dropdowns themselves: <pre><code>li ul { display: none; position: absolute; top: 1em; left: 0; }</code></pre> This positions the second-level lists absolutely (pulling them out of the flow of HTML into a world all of their own) and sets their initial state to not be displayed. If you substitute display: none with display: block, you will see the need for the top and left properties in Internet Explorer, because without them, IE will align the second-level lists to the top right of their relative parent rather than the bottom left. Unfortunately, this IE fix will mess things up in browsers like Opera, so add the following CSS to reset the top and left properties on all but IE browsers: <pre><code>li > ul { top: auto; left: auto; }</code></pre> And now, making the sucker work. To make a second-level list appear when its parent list item is “rolled over,” we simply need to add the following: <code>li:hover ul, li.over ul{ display: block; }</code> Which says that any list that is nested in a list item that has the cursor hovering over it should be displayed. Finally, because the lists are floated left, the content underneath it needs to be set free of the floating by applying clear: left to it. Now add this JavaScript <pre><code><script type="text/javascript"><!-- startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("nav"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace(" over", ""); } } } } } window.onload=startList; -></script></code></pre> Heres an example: <a href="http://www.htmldog.com/articles/suckerfish/bones/" rel="nofollow">http://www.htmldog.com/articles/suckerfish/bones/</a> rockstar on "cascading menu with premade background images" http://designsadvice.com/forums/topic/cascading-menu-with-premade-background-images-3#post-203 Fri, 18 Jan 2008 14:58:35 +0000 rockstar 203@http://designsadvice.com/forums/ sorry the customers page is <a href="http://www.pinktoesdesigns.com">here</a> rockstar on "cascading menu with premade background images" http://designsadvice.com/forums/topic/cascading-menu-with-premade-background-images-3#post-202 Fri, 18 Jan 2008 11:06:59 +0000 rockstar 202@http://designsadvice.com/forums/ alright so now im trying to make a cascading(dropdown) menu for my <a href="http://www.ptdesigns.com">customers page</a> i basically want to take the pre-existing menu bar and add drop down menu effects to the products and designs portions i have several images already made, now i need the code to make them functional rockstar.we.bs/images/menu_02.gif rockstar.we.bs/images/2menu_02.gif rockstar.we.bs/images/2menu_03.gif rockstar.we.bs/images/hilite1.gif rockstar.we.bs/images/hilite2.gif rockstar.we.bs/images/hilite3.gif rockstar.we.bs/images/hilite4.gif all the code i have found so far has been for plain menus and doesnt refer to how to add images for backgrounds any help would be appreciated, thanks