The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Does this look OK to you?

OK, I'm to the point in my site redesign where I'd really appreciate some feedback.

I've created a tableless 2-column layout with CSS and XHTML 1.0 Strict. I've also created a menu/submenu system that allows me to create just one lo--ooong list of main menu and submenu items in which all of the submenu items are hidden by default, then load separate CSS files that unhide the submenu items that are appropriate to each main menu page.

The new layout and menus work great for me in IE6, but I'm new to CSS/XHTML, so I'd really appreciate finding out if anyone here sees anything wrong with my menus in their browser, before I go to all the trouble to convert all of my pages to this new layout.

The only two buttons that work the way I want them to so far are the CB Guides and Reviews buttons. Don't click on any of the other buttons, because they're all waiting for me to create submenus for them, if no one sees any problems with the way the first two buttons are working.

A few people have sent me PMs, asking how I created my menus without JavaScript. I'm sure I'm not the first one to do it the way I did it, but here are the basic steps, for anyone who's interested:

1. Created a unordered list containing ALL of my menu items and submenu items. Each main menu item has its own named id (i.e. home, guides, reviews, etc.)

2. Used CSS to style the list to have color, no bullets, font size, line-height, etc.

3. Used the CSS display:hide tag to hide ALL of the submenus by default.

3. In the HTML of the CB Guides page, I added one @import line to the header, to load a separate guides.css file that unhides JUST the guides sub-menu, using display: block, to override the existing display:none that my main CSS file applies to all of the submenus.

4. In the HTML of the Reviews page, I added one @import line to the header that loads a separate reviews.css file. The reviews.css file is an exact copy of guides.css with the id in each rule changed from guides to reviews. It unhides JUST the reviews sub-menu, using display: block to override the existing display:none that my main CSS file applies to all of the submenus.

If it turns out that there are no problems with my menus, then I will repeat step 4 for each of my main menu items (using their ids), so that each main menu page will display its own submenu, but none of the other submenus.

The advantages to this approach are that:

1. It's done totally in CSS, so it doesn't need or use JavaScript or PHP.

2. It allows me to have just one long list of main and submenu items, while calling a separate CSS file on each main menu page to unhide whichever submenu I want to unhide for that page. That will make it relatively easy to add/remove/edit links in one or more of the menus in the future.

This example shows a list modified from listamatic, to have levels 4 (i think deep. Clicking onto the second and third pages doesn't load a new style sheet - all that changes is a class selecter, done inline after my main stylesheet. This saves the creation of multiple stylesheets, and i'm not a programmer - but i think - would simplify the process of getting php, based on which page you're on, to insert the proper class and display the correct menu!

I went to town to see how many levels i could get deep with different effects, so currently the second page shows ALL nested lists in the second top level, but thiis could be changed to only show a specific level with classes attached to the nested lists within that level.
edit >> actually no it can't of course nested lists are prevoiusly being hidden by their parents - anyone know how to achieve what i mentioned above? showing only a list that happens to be 3 or 4 levels deep.

Strangely - if you view the second page in ie6, the sub sub sub sub links still have their rollovers and slightly more padding on the left( as i think they're supposed to , with selecter #navigation li li li li a) - but in firebird and opera they dont! Anyone know which is correct ?

...This saves the creation of multiple stylesheets, and i'm not a programmer - but i think - would simplify the process of getting php, based on which page you're on, to insert the proper class and display the correct menu!

I'm not a programmer, either, so my method uses only CSS and doesn't require any JavaScript, PHP, or other programming.

It took me about 3 days of mulling ideas around in my head before I finally "got my brain around" the idea of calling separate stylesheets to display appropriate submenus. Even then, I made backup copies of all of the related files before I started, just in case I got confused and had to give up on trying to make it all work. A couple times, I almost ended up doing that.

I've looked at your demo pages and re-read your post several times, but I haven't been able to figure out your method yet. Maybe I'll be more successful in that effort after I mull it over for a few days.

"Why don't you just embed a page style within a comment in the header of each document, and use that page style to unhide the appropriate submenu for that page?"

That's actually an excellent question, and I considered using that method for a few days. Zeldman actually uses that method in his transitional redesign project in his "Designing With Web Standards" book.

However, according to Zeldman (page 411):

On a technical note, the <!-- comments that surround our style sheet would be a problem if we were authoring in XHTML 1.0 Strict, but we're using Transitional. These comments would also be a problem if we were serving our page as application/xhtml+xml, but we're serving it as text/html. To understand why these elements would pose a problem in a strict XHTML environment, see http://devedge.netscape.com/viewsource/2003/xhtml-style-script/

My separate-style-sheets method is a way to be able to use only CSS to hide/unhide submenus in an XHTML 1.0 Strict environment. Like I said before, I'm sure that many other people who know a lot more about CSS than I do, have already thought of that idea before, so I'm not claiming that it's "my" idea, but I sure am glad that I thought of it.

I'm a relative beginner when it comes to this level of CSS, and I'm currently exhausted (it's nearly 3:00 AM here as I finish my last edit of this message), so I'm not sure I fully comprehend how your idea works yet, but, from what I understand, YOUR IDEA IS SUPER!

I'd love to be able to have just one stylesheet and make a simple change to each page's body class instead of loading a separate additional stylesheet to display each submenu!

I'm looking forward to trying your idea after I get some sleep.

If it works the way I think it will work, it will be easier to maintain and much more efficient than my separate stylesheet idea.

BTW, I'm intentionally using @import to hide my main stylesheet from NN4, and I've tried to use only semantic markup in my XHTML code, so I think that my pages will display (albeit very plainly) in NN4, text readers, cell phones, etc., without any stylesheet.

Now that this thread has evolved from being a possible menu tip to being a really neat menu tip, one of the mentors may want to consider renaming it so that more people will see it.

I was impressed by Ian's suggestion too - I have some embedded styles in my pages that control the highlighting of the current page in the navigation system. I think with Ian's suggestion I will be able to move these styles into my stylesheet instead, which is a much more preferable solution.

After getting 5 hours of sleep, I fully understood HOW it works, so I moved my submenu selectors into my main stylesheet, deleted my separate submenu stylesheets, and used the body class as Ian suggested. Right now, both my CB Guides and Reviews submenu demos are running with Ian's method!

From the testing I've done, I'm able to use Ian's suggestion too. I have main and sub-navigation on my pages so I have to use 2 classes on my <body> tag, e.g:

Code:

<body class="eftmenu item1">

The CSS for "eftmenu", makes the 'EFT' text "button" appear depressed, and the CSS for "item1" highlights the first menu item in my sub-navigation. These rules give the user visual cues as to where they are in the site navigation.

Thanks, Andy! I followed your link and read that Import hack a couple of times, but I didn't really understand why it is needed, so I've bookmarked it for later reference, when I have time to figure it out.

I just added a page that shows how my Home page would display in NN4 and on devices/in browsers that don't recognize CSS. It looks pretty plain, but at least it all displays. And I'm definitely going to have to add a "Skip Navigation" link and some tab order code to make the whole thing more accessible.

After working on it for the past several days, and making sure that it worked perfectly, I've decided that I'm not going to use my submenu system after all.

Because it looks great, works great, and uses only CSS, it would be a perfect system for many Web sites.

Unfortunately, my site had so many articles and pages in the submenus that, even though nearly all of them were hidden on each page, those hidden submenus added about 9K to the file size of each of my pages. On many pages, that made the difference between the file being 17K or being 26K. I couldn't justify making my pages more than 50% larger, just to display one neat-looking submenu on each page.

So, instead, I'm going to use only my main menu system, and I've added a Site Map button to my main menu. Anyone who views the Site Map will see the entire menu/submenu unordered list of hyperlinks on one page, but they won't have to load as hidden items on all of my other pages.