1. Markup Your Menu
Begin by creating your list using the following HTML markup. The text (menu choices) between the <li></li> tags can be changed to your navigation.
2. Remove Existing Formatting
The html element <ul> has preexisting formatting appended to it. Here is the breakdown of the CSS that will remove this formatting.
3. Tile Menu Items Horizontally
To place your menu items on the horizontal, give <li> some property declarations.
4. Margin and Padding
Great job, you currently have a plain text menu at your disposal! With CSS, you can style your text to look however you want. Using the margin: and padding: declarations are helpful tools in getting the layout that you want.
If you understand how margin and padding declarations work, you can create a number of attractive site navigation menus from ordinary text.
5. Adding backgrounds
Using a gradient, you can create a chrome look to your menu. Whip up a gradient in your favorite image manipulation program, and set it as the background image of the <ul> element in CSS.
Download this menu: menu_chrome.zip (contains plain_list_menu_chrome.htm, style_chrome.css, and gradient images)
The background of this menu will expand to accommodate large text, or text that has been blown up according to user preferences in the browser. The key is two background images: one for the <ul> element, and another for an invisible div wrapped around the navigation bar, set the same width as the foreground <ul>.
6. Tabbed Navigation
After creating some tab shaped images, you could end up with a visually pleasing hybrid of CSS and your own custom artwork.
Download this menu: menu_tabbed.zip (contains plain_list_menu_tabbed.htm file, style_tabbed.css, and tab image)
Previewing this menu can help you to see how CSS can also be used to create some basic visual effects. CSS features pseudo-classes that affect the actions of links, such as when the user hovers their mouse over a menu choice. The classes li:hover and a:hover within the tabbed menu stylesheet might give you some insight as to some functionality that CSS has. You do not have to turn to more complex JavaScripting in order to produce menus with some visual flair.
Conclusion / Links
I am a strong advocate of CSS for its ability to give the most ordinary html document a chance at being visually attractive, and I hope this tutorial will pique your interest in adopting CSS for your web publishing needs. I will leave you with a few websites that can further educate or inspire you about designing with Cascading Style Sheets.
- CSS Zen Garden Design Showcase
This site challenges designers by receiving submissions that modify the original css zen garden html using only CSS. There are some incredible works.
- css/edge
This site aims high by showcasing some examples of what CSS could offer a designer, such as css that can follow a curve.
- CSS Library: Codes and Examples
This site is a repository containing example menus, as well as effects for images and web forms.
May your web design journeys take you far and wide!
~Trisha Peterson - 12/3/09 |