Help with CSS for dropmenu?

156 Posts

neilcreek Reply #1, 17 years, 11 months ago

Thanks to help with a previous menu, I’m beginning to understand the complexities of formatting lists with CSS, but I’m still a long way from competant, and I could do with some help on my next one.

I’m working on this site for a client, and they have a specific vision for how they want their menu to work:
http://www.orionvisuals.com/wip/hmc/index.php?id=4 So far it’s just got a few example sections, but will be a lot more fleshed out in the future.

The header is a flash graphic with the top level navigation. It’s still under development at the moment but clicking on the words works.

I’d like to be able to display the menu with DropMenu. Since the top level menu is in the flash file, I don’t want to display that. When each level 2 item is clicked on (eg Television, Print or Case Studies) I want the next level to appear to the right, and remain there. I’d like the same behaviour to persist down the hierarchy, with the submenu levels appearing to the right of all parent menus. I’d like the parents to stay a different colour all the way up to the top. Once the bottom level is clicked on, the actual page for that document is loaded, and the menu is displayed at the top already ’open’ to that section.

Here’s a screen shot of the concept taken at one of the pages at the bottom of the hierarchy:

Is it possible to do this with DropMenu and CSS? Or will I need to resort to javascript, which is something I know even less about. Any help or even pointing in the right direction would really be appreciated!

Thanks!

4,213 Posts

doze Reply #2, 17 years, 11 months ago

I don’t think this is a right forum to ask for help to style a list with css... Sitepoint would be a better place for these kind of questions for example.

But as I’m such a nice guy, here’s a starting point for you: wink

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>menu</title>
</head>
<style>
li {
list-style-type: none;
}
li ul {
position: absolute;
top:0;
left:100px;
}
ul, ul ul, ul ul ul {
position: absolute;
top:0;
margin:0;
padding:0;
list-style-image:none;
width:100px;
}
div{
position: relative;
height: 100px;
background-color: #c0c0c0;
}
</style>

<body>
<p>horizontal sub items menu thing</p>
<div>
<ul>
	<li>list item 1</li>
	<li><b>list item 2</b>
		<ul>
			<li>sub item 1</li>
			<li><b>sub item 2</b>
				<ul>
					<li><b>sub sub item 1</b></li>
				</ul>
			</li>
			<li>sub item 3</li>
		</ul>
	</li>
</ul>
</div>
<p>some content continues...</p>
</body>
</html>

"He can have a lollipop any time he wants to. That's what it means to be a programmer."

93 Posts

jwtyler Reply #3, 17 years, 11 months ago

For CSS styling of DropMenu the best tool I have found yet is the Developer Plugin for FF. Just select the "Outline current element" option, in the status bar at the bottom of the browser you will see the hierarchy of the drop menu element. i.e. ul>li>li>ul. Then you can just create the neccesary css classes. Thanks to ScottyD for that tip

156 Posts

neilcreek Reply #4, 17 years, 11 months ago

Thanks for the help folks

I’m sorry of this is the wrong place to ask, but it might be useful to others as well, so perhaps you can make an exception?

Rather juan just ask you "how do I do it?" I want to give it my best shot and ask specific questions when I get into trouble. Don’t want to be one of those "help vampires" I’ve read about. So this is where I’m at now:

I want to hide the top level of the menu. Using the code you gave above (which was very helpful thanks!) I’ve done this:

#menu ul {
display:none;
}

#menu ul ul, ul ul ul {
display:block;
}

But it seems the inherited "none" takes priority over the later "block". Obviously I’m not understanding the inheritance correctly. How would I do this? Remembering I only want the lower levels to display for the current item selected, not all.

1,193 Posts

ScottyDelicious Reply #5, 17 years, 11 months ago

Do a search for the "ListChildOrSibs" snippit. I think that will do exactly what you want.

-sD-

Husband, Father, Brother, Son, Programmer, Atheist, Nurse, Friend, Lover, Fighter.
All of the above... in no specific order.

I send pointless little messages