On Wed, Dec 23, 2009 at 3:31 PM, Jack Bates <[email protected]> wrote:
> I have a nested list, > http://www.sfu.ca/~jdbates/tmp/css/200912230/<http://www.sfu.ca/%7Ejdbates/tmp/css/200912230/> > > I want the first level list items to display as a horizontal, gray > stripe > > I want to hide the second level list items, except children of the first > level list item which has class .active (in this example "Add/edit"), > e.g. > > ul.links ul.links > { > display: none; > } > > li.active ul.links > { > display: block; > } > > I want these visible second level list items to display as a horizontal > blue stripe, under the horizontal grey stripe > > Here's a picture of what I'm trying to achieve - > http://www.sfu.ca/~jdbates/tmp/css/200912230/screenshot.png<http://www.sfu.ca/%7Ejdbates/tmp/css/200912230/screenshot.png> > > What's the cleanest way to do this? Can it be done without un-nesting > the list? > You can probably do that with a Suckerfish-style approach: http://htmldog.com/articles/suckerfish/dropdowns/ The only difference between the examples in that article and what you're trying to do is the horizontal layout of the nested <ul> menus, and that should just be a matter of how you style those elements. I'm sure someone can point you to an example just like what you want. But there is an important usability question to think about. Is the idea that your visitor would hover the mouse over the top-level menu items (Add/edit, Import, and Admin) and then the matching second-level menu would be revealed when they hover? If that's the case, then you definitely should *not* use a pure CSS approach. Think about how someone will interact with the menu. In your screen shot, they would hover over Add/edit, and then suppose they want to select the Term item way over on the right. When they move the mouse over to Term, they probably will not be careful to move it straight down off of the top level menu and then over to the right. They may well move the mouse on a diagonal, inadvertently touching the Import top-level item on the way. With a pure CSS approach, that will then hide the menu item they wanted to hit and show the items for the Import or Admin menus. Oops! So instead of pure CSS, you need a combined CSS+JavaScript approach to fix that. The JavaScript code can use a timer to avoid hiding and showing the wrong submenu inadvertently. One good way to do this is with the Superfish menu plugin for jQuery: http://users.tpg.com.au/j_birch/plugins/superfish/ This takes a Suckerfish CSS menu and adds the timer to allow diagonal mouse movement, along with other features. Highly recommended. If you're not going to hide and show the submenus based on mouse hovering, then you may not need to worry about this. -Mike ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
