To accomplish our task, our first step is to declare the stylesheet at the top of our page, that will dicate how our menu will appear, and what actions will occur within the menu.
For our example below, we will set up specifications for our links by defining our A HREF tags, including a cool hover color change
Now, you should keep in mind that only our menu should be affected by our style sheet.
In order to do this, we create an unorganized list (using the ul tag) of our links and assign a "class" to the ul tag. We can now reference just the links inside this ul using css selectors.
CSS Selectors work by allowing you to select items based on where they are. In this example we style all the A (link) tags inside our 'menu' class by using the folowing css: .menu a . This ensures that only the links in your menu are effected by our css rules without having to assign a class to every element. Using css selectors helps you keep your html organized and clean.
Here's the style sheet for our menu:
<style> /* Apply CSS to any UL (Unorderd List) with the class name 'menu' */ .menu { border: 1px solid black; margin: 0px; padding: 0px; list-style-type: none; width: 200px; } /* Collapse the List Item Tags */ .menu li { display: inline; } /* Make the links block elements and give them padding and some style */ .menu a, .menu a:visited { color: black; font: bold 11px Verdana; text-decoration: none; background-color: #ffe; display: block; padding: 2px; border-left : 10px solid #ffe; } /* Specify the rollover style for the links */ .menu a:hover { border-left : 10px solid red; background-color: yellow; color: red; } </style> <ul class="menu"> <li><a href="http://www.bravenet.com/">Free Web Tools</a></li> <li><a href="http://www.bravenet.com/webhosting/">Free Web Hosting</a></li> <li><a href="http://www.bravenet.com/resources/">Webmaster Resources</a></li> <li><a href="http://www.bravenet.com/resources/tipsandtricks">Tips and Tricks</a></li> </ul>
So, here now is the actual display of our menu, which reads in the CSS as it constructs the menu block code.
/* Apply CSS to any UL (Unorderd List) with the class name 'menu' */ .menu { border: 1px solid black; margin: 0px; padding: 0px; list-style-type: none; width: 200px; } /* Collapse the List Item Tags */ .menu li { display: inline; } /* Make the links block elements and give them padding and some style */ .menu a, .menu a:visited { color: black; font: bold 11px Verdana; text-decoration: none; background-color: #ffe; display: block; padding: 2px; border-left : 10px solid #ffe; } /* Specify the rollover style for the links */ .menu a:hover { background-color: yellow; color: red; font: bold 11px Verdana; text-decoration: none; border-left : 10px solid red; }
|