Web Design Tips

FrontPage Universe Tips

Navigation Menu without Images


We have talked about the power and flexibility of Cascading Style Sheets in the past and this is yet another example of how to create a stylish and functional navigation menu bar without using any images. The speed of loading and using this method of navigation far out-weighs the use of javascripts and images. Try the following script for yourself and modify it to suit your own needs.

<style>
div.menuBar,
div.menuBar a.menuButton {
font-family: Verdana, Arial, sans-serif;
font-size: 8pt;
color: #000000;
}

div.menuBar {
background-color: #F0EEE2;
padding: 6px 2px 6px 2px;
text-align: center;
margin-left:20px;
}

div.menuBar a.menuButton {
background-color: transparent;
border: 1px solid;
border-color: #f0f0f0 #909090 #909090 #f0f0f0;
color: #000000;
cursor: pointer;
left: 0px;
margin: 1px;
padding: 2px 6px 2px 6px;
position: relative;
text-decoration: none;
top: 0px;
z-index: 100;
}

div.menuBar a.menuButton:hover {
background-color: transparent;
border-color: #909090 #f0f0f0 #f0f0f0 #909090;
color: #000000;
}

</style>

Include this code in the body of your html page where you would like the menu to appear.

<div class="menuBar">
<a class="menuButton" href="">First Button</a>
<a class="menuButton" href="">Second Button</a>
<a class="menuButton" href="">Third Button</a>
<a class="menuButton" href="">As Many more buttons as you need</a>
</div>