Small navigation line – bottom menu “fnutt”

by Peter

Web site navigation is important. A good, well designed web site navigation system can

increase the numbers of pages viewed by each visitor. This in turn can increase signups, customers, sales, members or whatever it is your site is designed to do and make your website more successful.–Why Good Website Navigation Is Important

A number of different types of menus are in use on web pages. Here we have previously shown how to build efficient horizontal CSS-based drop-down menus and CSS-based horizontal fly-out menus. These are types of menus that are very frequently used. However, many web sites concerned with making it easy for users to navigate the site provide other navigational feature on their pages in addition to the main menus.

Small, relatively simple menus at the bottom of the page are quite common. They are often placed a little below the end of the content or high up in the footer. Here is how such a menu might look:

Home CSS menu Vertical CSS menu CSS for Pretty images

It is very easy to build a small navigation bar like this with HTML and CSS. We don’t even need a list – just the links and a little CSS. Here is the HTML:

1
2
3
4
<p id="bottommenu">
<a href="/">Home</a> <a href="#">CSS menu</a>
<a href="#">Vertical CSS menu</a>  
<a href="#">CSS for Pretty images</a> </p>

The HTML, as you can see, is just a paragraph of links. As I only want it to take up one line, I make certain it is short.

And here is the CSS for it:

1
2
3
4
5
6
#bottommenu { text-align:center; font-family:Arial, sans-serif; 
   font-size:13px; } 
#bottommenu a{ color:red; padding:0 10px; 
   border-left:1px #333 solid; text-decoration:none;}
#bottommenu a:first-child {border-left: 0;}
#bottommenu :hover { text-decoration:underline; color:crimson;}

The first line sets up the font and alignment (center). The second line styles the links (here you could use the technique I showed in an earlier post to get larger “hit spots” on the links). and places borders on the left side to separate them. The third line uses the “a:first-child” pseudo-class to remove the border in front of the first link. And the last line of CSS styles the hover links.

That’s all! Enjoy!

Related Posts:

Leave a Comment