Blogging Sueblimely

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% [?]