Nested CSS Menus
Posted Sat, 03/19/11
I did a bit of sprucing-up at Deidre Dalton's web site on Friday. For the first time on my own, I used and modified a nested CSS side-bar menu.
As opposed to drop-down or plain text links, CSS menus allow for sub-menus that shoot off to the side of the main navigation. For example, I wanted to create a sub-menu next to the "Books" category of the web site, which would individually link to individual pages for all eight titles in the Collective Obsessions Saga. I also used the same feature on the "Projects" selection.
Select "Books" or "Projects" from the list below in order to see the sub-menus in action. Note: links will open in a new window to avoid getting trapped in a frame.
Thanks to Dynamic Drive for the easy explanation and use of nested CSS menus. I modified the code to match the font and colors of the specified site, which was even easier than understanding the process.
Believe it or not, fooling around with web design is my way of relaxing, aside from reading.
POSTSCRIPT 03/30/11: Since posting this blog entry, the design of Deidre Dalton's web site has changed again, sans the CSS menu.
*Related Posts: Quick Format Fix (formatting paragraphs, 08/05/10); Puter Learning (table headings on every page, 09/29/10); Uncommon Headers (inserting a header on first page only, 11/21/10); Canadian English (spell-check using MS Works, 12/06/10); Typeover Tools (typeover function on keyboard, 12/23/10); Nested CSS Menus (vertical css menus, 03/19/11). For more tips and goodies, visit the Design Notes page at Webs Divine.
Tags: Web Design/Computer Misc