Table of contents for Navigation
- Navigation Menus 1 – Appetizers
- Navigation Menus 2 – Entrees
- Navigation Menus 3 – Main
- Navigation Menus 4 – Dessert
I thought I would get down to the meat of the main menu today by showing you some css styling.
HTML Code for all of these menus:
An unordered list:
<div id="navigation"> <ul><li><a href="#"id="a#current">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Contact</a></li> </ul> <div>
Menu 1
With no CSS styling – the list will display vertically: (If you try this with your current template, existing styling may alter the look of this):
Menu 2
- display the list horizontally – display: inline;
- take away the bullets – list-style-type: none;
CSS
#navigation ul li {
display: inline;
list-style-type: none;
}
Menu 3
- increase the font size – font-size: 1.1em;
- create space (padding) between the words
- color the link text:
- change the link text color on hover
CSS
#navigation ul li {
display: inline;
list-style-type: none;
font-size: 1.1em;
padding-right: 10px;}
#navigation ul li a { color: #330099; }
#navigation ul li a:hover {color: #00FF33;}
Menu 4
- Move the whole menu (the ul) to left by making margin and padding left "0"
- Take away the underlines – text-decoration: none;
- Add padding to link – padding: 3px 10px;
- Add background color to link – background-color: #9EBEDE;
- Add different background hover color – background-color: #006699;
CSS
#navigation ul li {
display: inline;
list-style-type: none;
margin-left: 0;
padding-left: 0;
}
#navigation ul li a {
color: #000066;
padding: 3px 10px;
text-decoration: none;
background-color: #9EBEDE;
}
#navigation ul li a:hover {
color: #00FF33;
background-color: #006699;
}
Menu 5
CSS
- Tell the menu to extend the full width of its container – width: 100%;
- Add background color to the whole menu (the ul) - background-color: #9EBEDE;
- Float the menu to the left
- Add a border to the menu items
#navigation ul {
padding-left: 0;
margin-left: 0;
background-color: #9EBEDE;
float: left;
width: 100%;
}
#navigation li {
display: inline;
list-style-type: none;
}
#navigation li a {
padding: 3px 10px;
background-color: #9EBEDE;
color: #000066;
text-decoration: none;
border-right-width: 1px;
border-right-style:solid;
border-right-color:#FFFFFF;
float: left;
}
#navigation li a:hover {
background-color: #8FD8ED;
color: #00C427;
}
Menu 6 – Tabs
- Add a border to the ul for the bottom line
- Add borders to the tabs (li)
- Add some padding to the ul to seperate the tabs from the bottom line.
- Identify the page by adding some styling and an id a#current
#navigation ul{
margin-left: 0;
padding-bottom: 3px;
padding-left: 0;
border-bottom-color: #666666;
border-bottom-width: 1px;
border-bottom-style: solid;
}
#navigation li {
display: inline;
list-style-type: none;
font-size:1.1em;
}
#navigation li a {
border-style: solid solid none;
border-color:#003399;
border-width: 1px;
padding: 3px 10px;
background: #9EBEDE;
margin-left: 3px;
text-decoration: none;
color: #000066;
}
#navigation li a:visited { color: #003366;}
#navigation li a:hover {
color: #00C427;
background-color: #8FD8ED;
}
#navigation li a#current {
background-color: #ffffff;
}
NB Notice the "border-bottom: 1px solid white;" in the last menu. This is CSS shorthand for "border-bottom-width: 1px; border-bottom-style:solid; border-bottom-width: 1px;"
I think that is more than enough to consume in one session – it certainly is for me anyway. Next (hopefully tomorrow) I will adapt these to some blogspot templates and WordPress themes. Please let me know if you want me to explain any of this further.
Popularity: 8% [?]











Wow this programing stuff is boring
But your other posts are very nice.
Thanks
Trade Show Help’s last blog post..Question On Cleaning Fabric Hanging Structure
That is actually a very nice, straightforward CSS demo. I like this post as much as the others
Thanks for the tutorial. CSS can be quite confusing to non-programming types.
I remember when I found CSS and started using it for all my navigation tools. It is a fantastic and clean way to help users see what are links and what is text (ie. hovering).
Johns last blog post..Downtown Toronto Real Estate
Whoah, thanks for the demo – I don’t know CSS so thanks
Otooos last blog post..Day 2: Progress Update
CSS is one of the best things to have happened to the Internet. WordPress is the best thing
Thanks for sharing your knowledge. i liked your work.awesome work
Great tutorial… I am still learning css myself for Madison Web Design I started with just basic HTML websites and just now expanding to the tableless designs so any css tutorial is great!
very cool stuff & it’s the latest technologies using div in web designing.