[sam]

CSS dropdown menus are found everywhere. Some simple some too complicated with hacks and tricks and what not. But I am yet to find a place that explains the underlying concept used to construct these menus. I would prefer to understand the underlying concept and how things work rather than run through a tutorial and know how to do it without any idea of what goes on. Can somebody here explain ? I did try Google and came across many tutorials and articles but none explained the underlying concept to my satisfaction and understanding. Thank you.

[Ben Abrams]

it varys per menu. Css based menus use mainly use nested lists:
(example code used from the suckerfish menu)

<li><a href="#">Percoidei</a>
		<ul>
			<li><a href="#">Remoras</a></li>
			<li><a href="#">Tilefishes</a></li>
			<li><a href="#">Bluefishes</a></li>
			<li><a href="#">Tigerfishes</a></li>
		</ul>
	</li>

Giving something like this if the list was used without css:

• Percoidei
  • Remoras
    
  • Tilefishes
    
  • Bluefishes
    
  • Tigerfishes

however, in its simplest terms, the css for the nested list uses display: none on a normal state. so, its not shown. (thats a verrrry simple explanation). When the first list item (percoidei) is hovered, the menu list under it is shown. again, simple quick explanation. It uses hidden elements, shown at the proper time.

javascript menus are diverse per application as to how they work. but generally, they are constructed in a similar fashion. often, they use arrays to store the menu items, which are lists for a language, displaying the correct sub menu item when needed. usually, these are build in javascript files (*.js) and are included into the page, so they're not generally good with SEO, as the menu is built by the users browser and its not static html. (if you need more clarification on this ask..)

some javascript menus do use lists, and only use javascript for fancy moving effects that css couldn't ever achieve.

[sam]

I can't understand this css line can you explain what it does... particularly the greater than sign ">" ul#topmenu > li:hover > ul {width: 10em; top: 1.5em; left: -3px;}. This line is from the css style sheet of this page.

http://meyerweb.com/...menus/demo.html

Thank you.

[Ben Abrams]

No worrys.

ul#topmenu > li:hover > ul {
	 width: 10em;
	 top: 1.5em;
	 left: -3px;
}

starting from the top, ul is the tag <ul> (unordered list), and # means id (as in <div id=name" etc). so, the first line means apply the style (which is about to follow) to any unordered list with the id topmenu.

the > means in, so moving along the line.. li (obv, <li> - list item) and :hover. which is a link state (there are :hover, :active, and :visited, pretty self explanatory). so it means, that this list item must have a link, and this action is applied on the hover, of that link.

a further > means that it holds an <ul> again. so the html will most likely look something like..

<ul id="topmenu">
	 <li><a href="#"> link name</a>
		   <ul>
			   <li>i reckon a menu link will go here</li>
		  </ul>
	 </li>
</ul>

so, recapping, thi segment of css means, apply this style to an <ul> which has an id of topmenu, and has in it a list, with a link (on hover) with another <ul> inside it.

work systematically, remember the > means "it holds"
hope that helps =)

[marcamos]

I always feel icky when I have to correct my good friends, I hope they don't get angry at me, but in the interest of giving you the most accurate information, I have to correct what benbramz said. It's a slight correction, as he is mostly correct.

Sam, you asked what the ">" does as a CSS selector, and here is a brief explanation:

div#leftColumn p {color: red;}

The above CSS will turn every paragraph element inside "leftColumn" into red text.

div#leftColumn > p {color: red;}

The above CSS will turn only child paragraph elements inside "leftColumn" into red text.

So, for example, if you had this xhtml...

<div id="leftColumn">
<p>This is paragraph number one</p>
<p>This is paragraph number two</p>
   <div class="highlightBox">
   <p>This is paragraph number three</p>
   </div>
</div>

...the first two paragraphs are considered "children", because they are directly within the div#leftColumn. The third paragraph is even deeper in the hierarchy, so it isn't considered a child. If you chose to use the first instance of CSS at the top of this reply, then all paragraph elements would have red text. Otherwise, if you chose to use the second instance of CSS at the top of this reply, only the first two paragraphs would have red text.

When an element is directly within another, it is called a "child". Much like you are the child of your parents. But when an element is deeper than that, it is referred to as a descendant, much like your own children will not be children of your parents, but descendents of them instead.

[James Mitchell]

For a better illustration, I spaced out Marc's last HTML post.

<div id="leftColumn">
  <p>This is paragraph number one</p>
  <p>This is paragraph number two</p>
  <div class="highlightBox">
	 <p>This is paragraph number three</p>
  </div>
</div>

Example 1 --------------------------------------------------
If you use

div#leftColumn p {color: red;}

then your output would look like this:

This is paragraph number one

This is paragraph number two

This is paragraph number three
---------------------------------------------------------------

Example 2 --------------------------------------------------
Where as if you use

div#leftColumn > p {color: red;}

then your output would look like this:

This is paragraph number one

This is paragraph number two

This is paragraph number three
---------------------------------------------------------------

Hopefully that helps a little bit.

[Ben Abrams]

thats what i meant, maybe my explanation was a little off. look at the time of posting, (05:36) might explain why..

[marcamos]

What do I always tell you, sleeeeeeep!

[sam]

Thanks everybody for your pixel perfect answers . Things are very clear now.

[sam]

The css menu in the link that I posted does not behave well in IE7. It does not stick around to check the other items. I mean the popup disappears before you can check the other items when you move the mouse. Is it an error in my version of IE7 or do you guys see the same behavior ?

[Ben Abrams]

i cant say, as i use a mac, but its most likely IE7..

[marcamos]

Different browsers render things in different ways. This simple point will be your biggest challenge as you develop; it is mine, and most other developer's biggest challenge, no doubt about that.

You will find if you utilize a browser specific style sheet (one aimed at IE7 only), you can adjust some of the spacing and margins for that particular browser.

My guess is that some of the numeric values need to be adjusted in the CSS for IE7 only, most likely reducing the amount of space between the horizontal navigation bar, and the drop-down list that appears. If you can find, in the CSS, the particular number that determines the distance (probably something like "top:20px:", or "margin-top:20px;", etc.), you would just reduce the numberic value within a style sheet aimed at IE7 only.

If you stick this code at the top of your web pages, directly underneath your current CSS code, it allows you to use a new stylesheet for IE7 adjustments, and whatever you put inside of it will be applied only to IE7:

<!--[if IE 7]>
	<link rel="stylesheet" type="text/css" href="styles/ie7-only.css" media="screen, print" />
<![endif]-->

[TJSingleton]

Reseting the default browser styles will help a lot!

The best piece of code I know to do this if from YUI: http://developer.yahoo.com/yui/reset/

[marcamos]

TJSingleton, on Feb 19 2007, 01:52 PM, said:

Reseting the default browser styles will help a lot!

The best piece of code I know to do this if from YUI: http://developer.yahoo.com/yui/reset/

The one I wrote is good too : http://www.webradiance.com/web-design-foru...-file-t236.html

[sam]

Ok guys here is your next assignment So following is the code for simple dropdown menu. How do I stop the background of the main bar from running in to the popup ? Thanks

Edit : never mind. I was able to stop that by making a border. I am not sure this is the right approach but I was able to achieve what I wanted. I was cartwheeling having constructed a dropdown menu only to see my excitement come crashing down when I loaded up the page in IE6. It does not show anything more that the first level. I hate IE !!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>dropdown model</title>
<style type="text/css">
<!--
* {
	text-decoration: none;
	margin: 0px;
	padding: 0px;
	border-style: none;
}
#topnav	{
	width: 400px;
	list-style: none;
	text-align: center;
}
#topnav	> li	{
	width: 98px;
	margin: 1px;
	float: left;
	background: #FFCCFF;
}
#topnav li ul	{
	display: none;
}
#topnav li:hover ul	{
	display: block;
}
#subnav	{
	width: 400px;
	list-style: none;
	margin-left: -201px;
	margin-top: 2px;
	background: none;
}
#subnav li	{
	width: 98px;
	float: left;
	margin: 1px;
	background:#00FFFF;
}
-->
</style>
</head>

<body>
<ul id="topnav">
		<li>Main1</li>
		<li>Main2</li>
		<li>Main3
					<ul id="subnav">
							<li>Sub1</li>
							<li>Sub2</li>
							<li>Sub3</li>
							<li>Sub4</li>
					</ul>
		</li>
		<li>Main4</li>
</ul>
</body>
</html>

This post has been edited by sam: 19 February 2007 - 07:39 PM

[Ben Abrams]

sam, on Feb 19 2007, 09:53 PM, said:

I hate IE !!

welcome to web design..

[TJSingleton]

herkalees, on Feb 19 2007, 03:57 PM, said:

The one I wrote is good too : http://www.webradiance.com/web-design-foru...-file-t236.html

Yours is nice, but it doesn't effectively neutralize the default browsers styles. YUI is a bit more comprehensive. Check it out. Create a basic html doc, with and compare the your stylesheet with YUI's.

[lwaxhaxnc]

If you chose to use the first instance of CSS at the top of this reply, then all paragraph elements would have red text. Otherwise, if you chose to use the second instance of CSS at the top of this reply, only the first two paragraphs would have red text.

[EncoderDecoder]

James Mitchell, on 16 February 2007 - 09:59 AM, said:

For a better illustration, I spaced out Marc's last HTML post.

<div id="leftColumn">
  <p>This is paragraph number one</p>
  <p>This is paragraph number two</p>
  <div class="highlightBox">
	 <p>This is paragraph number three</p>
  </div>
</div>

Example 1 --------------------------------------------------
If you use

div#leftColumn p {color: red;}

then your output would look like this:

This is paragraph number one

This is paragraph number two

This is paragraph number three
---------------------------------------------------------------

Example 2 --------------------------------------------------
Where as if you use

div#leftColumn > p {color: red;}

then your output would look like this:

This is paragraph number one

This is paragraph number two

This is paragraph number three
---------------------------------------------------------------

Hopefully that helps a little bit.

yup, this part made me understood what was being talked about here..