/* Styles unrelated to the menu */ body { font-family:arial,sans-serif ; font-size:80% ; margin:0 ; padding:0 } #content { margin-right:10px ; position:absolute ; left:220px ; top:10px } #tag { background:#EFEFFF ; color:#000 ; font-family:verdana,sans-serif ; font-size:80% ; padding:5px 10px ; text-align:center } /* END unrelated styles */ /* Styles the container wrapped around the entire menu system */ #navParent { border:1px solid #000 ; left:10px ; position:absolute ; /* Positioning is not always necessary. */ top:10px ; width:200px ; } /* Set universal styles for all menus */ /* To add more menus, simply tack on their ids to the list, separating them with commas */ #menu1, #menu2, #menu3, #menu4, #menu5 { display:none ; /* Hides all menus when the page is loaded */ list-style:none ; /* Removes bullets from unordered lists */ margin:0px 10px ; padding:5px 0px ; } /* These next two rules ensure the link styles are only applied to anchor tags located inside the menu system. All other links will be unaffected, since we've used descendent selectors. Note, any universal link styles you specify above these rules on this page may be inherited by the menu system! */ #navParent a { background:#FFF ; color:#000 ; text-decoration:none ; } #navParent a:hover { /* Adds an optional hover effect to the links */ background:#EFEFFF ; color:#000 ; } /* Styles the header tags in the menu without affecting the heirarchy you've chosen for your content. Again, we've used descendent selectors, and again, specifying universal rules for h* tags above this portion of code may affect how the headings in your menu system are displayed. */ #navParent h1 { background:#06C ; border-bottom:1px solid #000 ; color:#FFF ; font-size:80% ; margin:0px ; padding:2px 5px ; text-align:center ; } /* Sets the style you wish to use when linking via the h1 tag. We've set these styles to be the same as when the menu h1 tag is not linked */ #navParent h1 a { background:#06C ; color:#FFF ; text-decoration:none ; } /* This is the key to the dynamic aspect of the menu system. Each set of selectors starts with the id you're using in each page's body tag to identify where it belongs. The second selector identifies the menu to be displayed when the browser identifies the category tied to the page.*/ /* Let's take a look at the first rule and separate it from the others: #cat1 #menu1 { display:block } */ /* In effect, this rule is saying to the browser, "when you see the identifier 'cat1', look on that page for another identifier, 'menu1'. If found, display the element to which 'menu1' is affixed as a block-level element." This is how the browser knows to only open up the right menu on the right page. Every page has been identified. Go through them, paying attention to the tags. You'll see it right away. */ /* If you create a new menu category, simply add a new set of selectors onto the end of the list below, and make sure all the pages falling within this category carry the appropriate id. Easy :-) */ #cat1 #menu1, #cat2 #menu2, #cat3 #menu3, #cat4 #menu4, #cat5 #menu5 { display:block ; }