Need a simple horizontal menu skeleton

HTML & CSS
1

What I am looking for is probably very easy to find, but I am pretty n00b, and I don’t know what to call it, so hoping to find some help here. I want a horizontal tabbed menu system which drops down on clicking.

When I Google for CSS-based tabbed menus I can find plenty of examples, but all of them are made with the assumption that they will open on hover, and most use Javascript or some conditional-type stuff or hacks that I don’t really understand yet. I am planning to learn Javascript (just ordered the Head First book) and want to design slicker stuff in the near future. But right now I need some simple menus and I really want to understand how/why the code works as opposed to just copying and pasting stuff into the right place and not knowing quite what to do when something goes wrong. I am new to CSS and trying to ease myself into it. I have a basic grasp of the purpose and concepts, and of specificity and inheritance, but I obviously have much to learn.

Here’s what I want: a series of tabs across the top of the site. Each tab will have a single sub-menu (no nesting) which will open on clicking (not on hover) and stay open until something else (one of the links, or another tab) is clicked. This should be easy, right (maybe I’m being naïve)? I would like to find working examples so I can digest the code and customize it visually. It just seems like everything I find is trying to do MORE than that, which I’d like to avoid for the moment. I am assuming that something this simple functionally could be deployed without scripting, and still be made to easily accommodate the IE6-ers.

I’ll confess I haven’t given deep consideration to “usability” here; it just seems like a reasonable way to do a menu…but maybe that has something to do with why I can’t locate examples of what I want.

I would be grateful for any help. :slight_smile:

2

Thank you for taking the time. :slight_smile: Still trying to avoid Javascript for now, and do the click-to-open menus, just to see how they look and feel.

Still, I will try your solution out tonight, just to see if I can get it working and learn something from it!

3

True enough, Ray. The “best” CSS-only multi-level menus I know of are on Stu Nicholls’s site, and they are pretty intensive, with lots of extra markup and tricksy stuff. :slight_smile: Not for the newb. Hell, I have trouble figuring out how some of them are functioning, and I’ve been doing this a while.

On my tut site, I split the difference: I used a JS “megamenu” and provided a link for the non-JS users (that’s you, Poes) to a plainer menu. Probably makes no one particularly happy…

4

Eric Meyer wrote the classic CSS-only flyout menu (though his is vertical, that can be changed easily enough):

http://meyerweb.com/eric/css/edge/menus/demo.html

Maybe this will give you some ideas.

5

Requiring a click will result in the vast majority of users not knowing this, and so missing your sub-menus. You are putting a barrier between the user and the sub-menus, as many will mouse over the menu and on seeing no drop-down / fly out , assume that only the items they can see are available. If these don’t interest them immediately, you’v elost them.

Time to rethink this idea, perhaps.

PS why do you think you found so many menus that didn’t require users to click to reveal the sub-menus…

6

The “best” CSS-only multi-level menus I know of are on Stu Nicholls’s site, and they are pretty intensive, with lots of extra markup and tricksy stuff
Hi Michael, :slight_smile:

I don’t know if you are aware of it or not but most of those x-browser css only menus on Stu’s site were using invalid nested tables for IE6. The only reason they pass validation is because the IE comments hide the table from the validator.

He does not advocate using them anymore, a lot of people keep their old code examples for archive purposes.

As we all know IE6 is the only browser that chokes on li:hover hence the reason for the sfhover script for it only. Other than that it’s pure css for all other browsers.

Probably the best thing going for someone that does not want to script li:hover for IE6 would be Timo’s Float Drop Menu.
That was CSS Quiz #27 here and it was refined down to the final version after the quiz.

Which ironically Stu dropped in and [URL=“http://www.cssplay.co.uk/test//menu2a.html”]took part in the quiz after he got wind of it. It all started right here at SP and Stu now has several variations of the float drop menu on his site. They have taken a front seat to the old table drop menus.

As always there are limitations and these menus need widths on the LI to work properly.

7

And when he did, Stu came up with a click menu. However, as someone mentioned before, these aren’t cross-browser (because not all browsers leave the cursor focus on the last-clicked item… namely Chrome and Safari).

POS, you’ll want a Sons of Suckerfish-style menu (if it’s a dropdown, I got a little confused) and the YuriKolovsky menu is a version of it, and then layer your JS on top of that later (as you do with ALL code anyway). HTML, then CSS, then JS. And, I know eruna was trying to keep things simple for an example, but the HTML will not have onmouseover stuff in it. The JS will be entirely separate.
The Sons of Suckerfish page is really where I learned how to do “a” dropdown menu.

However when you said something about tab-clicking, I thought Eric Watson or Ray H did something like that (no dropdowns, just tabs you click on) and so far as I know, this is cross-browser (relies on server refreshes or course, but you could always layer some Hijax/ajax over that if you want).

Hm, Shaun Rambaran has on his page a sort of setup that may appeal to POS. http://forge.co.tt/ This is all CSS and HTML, though I think he also has a JS layer on top of it. Only works with certain design limitations, but creative minds can work with that.

Alex Dawson has a page that does something with the :target CSS pseudoclass…

I dunno if I can keep up with DK’s “POS” moniker, makes me think of another term : )

8

As much as I admire Meyer’s pioneering work with CSS I’m afraid I would not recommend that menu. I doubt he would either today. It is using display:none/block for the hide and show method for the sub ul which from an accessibility standpoint is not good. Keyboard users and screen-readers are not able to tab through the sublist items since they are display:none;

:slight_smile: Still trying to avoid Javascript for now, and do the click-to-open menus, just to see how they look and feel.

Click functions will typically fall under behavior which is a job for javascript.
There are some pure css ways to do what you are wanting but they will not be x-browser compatible. Those methods often give some ill effects as far as using the browsers back button along with them.

Have a look at This Recent Thread , but being a css newb as you said you are it may be to advanced for you. Secondly they are experimental and not really recommended to be turned loose on the web.

Let us know if you just want a simple css dropdown and we can surely help with that.

Hope that helps :slight_smile:

9

Menuing can be one of the trickiest aspects of a layout.

I can explain how I do it. I’ll use this site as an example:

Lets start with the HTML:

The navigation is in a main_nav div block.
The navigation itself is in a nested list.
The span tags are used to replace the text with graphics


<div id="main_nav">
	
<ul>
 <li onmouseover="show(this)" onmouseout="hide(this)">
<a href="/Winooski_Watershed" id="watershed" >
<span>Winooski Watershed</span></a>
   <ul>
       <li >
       <a href='/News_From_the_Tributaries' id='News_From_the_Tributaries'  > News From the Tributaries</a></li>

        <li ><a href='/Plants_and_Animals' id='Plants_and_Animals'  > Plants and Animals</a></li>
          <li ><a href='/Human_History' class="last"  id='Human_History'  > Human History </a></li>
    </ul></li>

...more links

</ul>
			
			<div class='clearme' >&nbsp;</div>
			
		</div>

Now the CSS

The <li>'s are set to display as block elements and float left.
The clearme div at the bottom clears them to make the main div height correct.

The span tag is set to display none so the text is not shown but replaced by an image.

The nested lists are set to position:absolute. This makes them absolute relative to the parent.

/* main navigation */

#main_nav {
	clear:both;
	background-color:#fefce6;
	width:960px;
	padding:10px 0;
}

#main_nav li{
	float:left;
	display:block;
	position:relative;
}

#main_nav li a span{
	display:none;
}

#main_nav  a {
	display:block;
	height:30px;
	background: url(/images/navigation.gif);
	width:100px;
}

#main_nav #watershed {
	background-position: 0 0;
	width:187px;
}

#main_nav #projects {
	background-position: -187px 0;
	width:98px;
}


#main_nav #get_involved {
	background-position: -285px 0;
	width:124px;
}

#main_nav #experience {
	background-position: -408px 0;
	width:179px;
}

#main_nav #living {
	background-position: -587px 0;
	width:189px;
}

#main_nav #events {
	background-position: -775px 0;
	width:85px;
}

#main_nav #about {
	background-position: -858px 0;
	width:75px;
}


/* hover states */

#main_nav #watershed:hover {
	background-position: 0 30px;
	width:187px;
}

#main_nav #projects:hover {
	background-position: -187px 30px;
	width:98px;
}


#main_nav #get_involved:hover {
	background-position: -285px 30px;
}

#main_nav #experience:hover {
	background-position: -408px 30px;
}

#main_nav #living:hover {
	background-position: -587px 30px;
}

#main_nav #events:hover {
	background-position: -775px 30px;
}

#main_nav #about:hover {
	background-position: -858px 30px;
}


/* Drop Down Menus */

#main_nav ul ul {
position:absolute;
top:29px;
left:10px;
width:130px;
background:url(/images/dropdown_top.gif) #1b84aa no-repeat;
padding:10px 20px;
z-index:999;
display:none;
}

#main_nav ul ul li{
	display:list-item;
	list-style:none;
	float:none;
	margin-bottom:10px;
}

#main_nav ul ul a{
	display:inline;
	background:none;
	color:white;
	text-decoration:none;
}

#main_nav ul ul a:hover{
	color:black;
}

Javascript

Here is some very simple Javascript to hide and close the menus.

<script type="text/javascript" language="javascript" >

	function show(element){
		element.getElementsByTagName('ul')[0].style.display="block";
	}
	
	function hide(element){
		element.getElementsByTagName('ul')[0].style.display="none";
	}

</script>

It takes a while to get all the concepts here. Keep plugging away and it will eventually make sense.

E

10

Thanks everyone for weighing in. I’ve been swamped with other stuff and not time to explore this yet, but I am hoping for this weekend.

I love it. Makes me giggle every time I see it.:lol: