Does this look OK to you?

[ComputerBob]

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 URL is
http://www.computerbob.com/my2col.html

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.

TIA!

[vgarcia]

Edit:

Thread reopened

[ComputerBob]

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.

[jt_va]

Bob, I browse with IE6 also and I think the new design looks and works great. Very cool!

[Fire59]

looks good in mozilla 1.4

[Hartmann]

The design looks great in Mozilla Firebird 0.6.1

Great tip on creating the menu as well!

[kurdt_the_goat]

Great idea !! I took a look at your code with the intention of seeing if i could simplify the process of showing a nested level.

http://www.arach.net.au/~kurdt/nests/

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 ?

[ComputerBob]

...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.

[Tygger2512]

Very neat navigation solution Computer Bob - well done!

[ComputerBob]

Thanks for your feedback, everyone! I really appreciate it.

I'm going to go ahead with converting all of my pages to use my new menu system.

If anyone finds a problem with it, please post it, so I can make any necessary changes to my code.

Thanks, again!

[ComputerBob]

I'm sure that someone will think of asking:

"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.

[Ian Glass]

Edit:

Thread reopened

'Pologies for that, Vinnie & Bob (I had erroneously reported this thread as a review).

Anyway, to remedy my specious injustice... works perfectly fine in Opera 7.2b, CB. :-)

Also, instead of importing different stylesheets, you could use one stylesheet and give the <body> a class. Then just use a couple o' CSS selectors, an you'd be all set across your site:

<!--In the HTML-->
<body class="guide"> <!--...or...--> <body class="reviews">

/*Then in the CSS*/
#nav li ul { display: none; } /*hides sub lists in #nav*/

.guide #guides ul, .reviews #reviews ul /*, etc*/ {display: block }
/*shows sub menus on the right page*/

I forget whether descendent selectors work properly in NN4 or not.

~~Ian

[ComputerBob]

THANKS, IAN!

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.

[Tygger2512]

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.

[ComputerBob]

IAN'S IDEA WORKS!

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!

http://www.computerbob.com/my2col.html

[Tygger2512]

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:

<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.

Changing all my code to the new solution now.

Andy.

[Tygger2512]

CB,

If you want to eliminate <style></style> from your XHTML completely, and still use @import to hide from NN4.x, take a look at this wiki.

Andy.

[ComputerBob]

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.

[ComputerBob]

My Home, CB Guides, and Reviews buttons all work the way they're supposed to work. My Home button "lights up" without any submenus, while the other two buttons "light up" along with their submenus.

http://www.computerbob.com/my2col.html

Progress is moving very slowly, because it's taking me a long, long time to add all of the URLs, titles, and link text for all of my submenu items to the menu unordered list.

[ComputerBob]

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.

http://www.computerbob.com/my2col_nocss.html

[ComputerBob]

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.

http://www.computerbob.com/my2col.html

I guess sometimes you have to drive all the way to her house before you finally realize, just as you pull into her driveway, that you don't really want to see her after all.

At least I learned a lot about CSS from working on that submenu system.