One of the biggest challenges with website design is finding a good balance between User Interface (UI) design and the website optimization. Websites need to be aesthetically pleasing and have good user interactivity. But having too many graphics will make the website slow and annoying. And if your website is annoying, your visitors are less likely to stay on your site, buy your products/services or contact you.

In this article, we will look at creating a professional looking navigation menu using Cascading Style Sheets (CSS). We will be creating a vertical menu, which is ideal for wordpress sidebars. The menu’s text and button will also change color when the mouse is over the button, provide user interactivity. And all this will be done without the use of any images.

[Off topic: Did you know that the Google Custom Search WordPress Plugin provides better search results than the standard wordpress search? It’s free and available here.]

 

The Menu

Below is how the CSS menu looks, I’ve replicated it with the Little Handy Tips Menu.

 

The HTML Code

Here’s the HTML code that was used to create the menu. It is just a standard HTML Unordered List <ul>
Notice that there is a <div> tag encapsulating the unordered list, and also the first entry has a class=”top” attribute. They will be used by the CSS style sheets to identify our menu.

<div id=”menu_buttons”>
<ul>
<li><a class=”top” href=”/”>Home</a></li>
<li><a href=”about”>About</a></li>
<li><a href=”share-a-tip”>Share a Tip</a></li>
<li><a href=”contact”>Contact</a></li>
<li><a href=”subscribe-to-post”>Subscribe to Post</a></li>
<li><a href=”plugins”>Plugins</a></li>
<li><a href=”support”>Support</a></li>
</ul>
</div>

CSS Style Sheets

And here is the CSS Style Sheets which defines the menus.
It specifies what colors the button will have (#fff), the text color (#9DACBF) and also specifies a border around the menu.
It also specifies the colors to change to when the mouse is over on the button.

<style type=”text/css”>
#menu_buttons { width:180px; text-align:center; }
#menu_buttons ul { margin:0; padding:0; list-style:none; }
#menu_buttons li { margin:0; padding:0; display:block; list-style:none; }
#menu_buttons li a { color:#9DACBF; background-color:#fff; border: 1px solid #9DACBF; border-width:0px 1px 1px 1px; width:180px; text-decoration:none; display:block; height:30px; text-align:center; vertical-align:middle; padding-top:5px; }
#menu_buttons li a.current { background-color:#E4E7EA; }
#menu_buttons li a.top { border-width:1px 1px 1px 1px; }
#menu_buttons li a:hover { color:#006599; background-color:#E4E7EA; }
</style>

 

Your Turn

Now it is your turn, create a html file (e.g: menu.html) and add both HTML code and Style Sheet snippet into the file. Then view it using a web browser. Feel free to share this tutorial with your friends as sharing is sexy!