CSS Forum

**Tom_M** · 02-28-2007, 03:41 PM

I need help figuring a menu system out. I want to try doing a pure css menu (no javascript!) like the one over at HTML Dog. I have some idea as to how they did, but i'm not 100% sure. If you click on say "HTML Beginner", it takes to the HTML Beginner Turial page where you are shown a sub menu of tutorials.

I'm thinking that those sub menus just have a display property of hidden. Then using a class on the body tag, switches the sub menus display so it is viewable. Am I on the right track here?

**LadynRed** · 02-28-2007, 05:47 PM

Quote:

I'm thinking that those sub menus just have a display property of hidden. Then using a class on the body tag, switches the sub menus display so it is viewable. Am I on the right track here?

Nope. The links are calling a new page with the menu 'open', there's no show/hide behavior going on there at all.

If you want some pure CSS menus, try these sources:
http://www.alvit.de/css-showcase/css...s-showcase.php
http://www.cssplay.co.uk/menus/index.html

**taketherisk** · 10:57 PM

If you would like it done with PHP. I have script to do that.

It was made by me and a friend perfected it. If you can use PHP (you don't need php knowledge) let me know and i'll get the script together with some documentation.

Good luck in the mean time.
-Brett

PS: How are you managing your site template, by includes? like footer.php and header.php?

**Angelosanto** · 03-01-2007, 12:08 PM

I created my menu on http://www.raparcade.com out of CSS in a similar way. This is how I did it:

a.nav
{
float:left;align:center;
color:steelblue;background-color:#C7DAE9;
padding:0.4em 0.6em;border:1px solid white;;width:7em
text-decoration:none;font-weight:bold;font-family:verdana;font-size:13
}

a.nav:hover
{
background-color:#2B4F6C;color:white
}

Also a reccomendation - If you're gonna stick all your menu items in a list, then used 'defined lists' rather than 'unordered lists' as I found them so much easier to work with, especially when working with different browsers.

Hope that helped

**LadynRed** · 03-01-2007, 12:15 PM

float:left;
align: center; ?????? -- incorrect. Proper syntax is text-align: center;

Quote:

then used 'defined lists' rather than 'unordered lists' as I found them so much easier to work with, especially when working with different browsers.

And that would be improper use of a DEFINITION LIST - a menu is not a definition list, it is either an ordered (1,2,3, a, b, c) or UNordered list.

**Tom_M** · 03-01-2007, 01:55 PM

So, is something like I want even possible by using CSS alone? I want to make an unordered list appear only on certain pages with a unique ID on the body tag. I'm searching but can't find something that does that.

**LadynRed** · 03-01-2007, 02:23 PM

Did you look around at CSS Play ?
He has a vertical show/hide menu that might work:
http://www.cssplay.co.uk/menus/slide_definition.html

**Tom_M** · 02:45 PM

Yes I waded through those links. Thanks by the way! But I just couldn't find what I wanted. I think I came up with something. It looks OK in FF and IE 6. My menu styles:

Code:

#leftNav ul {
	list-style-type: none;
}

#leftNav li {
	padding-left: 10px;
}

#leftNav a {
	text-decoration: none;
}

#leftNav ul li ul {
	display: none;
}

#test #leftNav ul li ul.test {
	display: block;
}

And the xhtml:

Code:

<body id="test">
<div id="leftNav">
<ul>
    <li><a href="temp.php">Test</a></li>
    <li><a href="temp2.php">Test 2</a>
        <ul class="test">
	    <li><a href="#">Link 1</a></li>
	    <li><a href="#">Link 2</a></li>
	</ul>
    </li>
</ul>
</div>
</body>

I have a working example here: http://tmwebworks.com/afd/temp2.php

**LadynRed** · 03-01-2007, 03:17 PM

Looks pretty good !!!

**Angelosanto** · 03-03-2007, 11:03 AM

Quote:

Originally Posted by LadynRed

float:left;
align: center; ?????? -- incorrect. Proper syntax is text-align: center;

And that would be improper use of a DEFINITION LIST - a menu is not a definition list, it is either an ordered (1,2,3, a, b, c) or UNordered list.

That 'align: center': I hace NO idea why thts there, especially as the text is aligned to the left

Thanks for pointing that out

As for the point on definition lists, whats the harm in using them without using the 'dd' tag? Is it not ok to just make a list using the terms?

**LadynRed** · 03-03-2007, 12:02 PM

Well, I'll have to retract my statement on DL's for menus. When I was poking around the menu demos over at CSSPlay, I noticed he has quite a number of menus based on DLs. I can admit when I'm off-base

Semantically though, I would think it's not really a correct usage, a menu isn't definitions.. they're usually an ordinary list of choices.

**Tom_M** · 03-03-2007, 02:03 PM

I'm currently reading a book called "CSS Mastery - Advanced Web Standard Solutions" by Andy Budd. In chapter 5 he discusses using definition lists for navigation and other uses. He talks about how the xhtml specifications could be interpreted to allow definition lists to be used for other things like product properties, image galleries and page layouts.

He doesn't agree with those interpretations. I tend to agree with him. Using a definition list for anything other than that just doesn't make sense to me. I mean isn't that the whole point of creating xhtml documents? Writing semantic markup that means what it means?