How to Create a Simple Website Menu

Want to know how to Create a Simple but Stylish Website Menu? Well you've come to the right place! Lets get started. First see the sample menu below.

HomeAbout UsServicesContact UsLocationLinks

This sample is put into dull greys to allow you to visualise your own business or website colour scheme instead. The menu uses simple HTML and CSS. First copy the HTML code below. Place the code in the 'body' section of the html code of your webpage where you want the menu to appear.

<div class="toolbar"><a class="menu" href="https://www.blogger.com/blogger.g?blogID=6630109348646593095" title="Home Page">Home</a><a class="menu" href="https://www.blogger.com/blogger.g?blogID=6630109348646593095" title="About Us">About Us</a><a class="menu" href="https://www.blogger.com/blogger.g?blogID=6630109348646593095" title="Services">Services</a><a class="menu" href="https://www.blogger.com/blogger.g?blogID=6630109348646593095" title="Contact Us">Contact Us</a><a class="menu" href="https://www.blogger.com/blogger.g?blogID=6630109348646593095" title="Location">Location</a><a class="menu" href="https://www.blogger.com/blogger.g?blogID=6630109348646593095" title="Contact Us">Links</a></div>

You can obviously replace the href, title and text values to match those of your own webpages. Next the CSS code.

a.menu:link{text-decoration: none;} a.menu:visited{text-decoration: none;} a.menu{border-right: 3px solid #666666;text-decoration:none;background-color:#999999;padding: 10px;color: #ffffff;font-family: Verdana, sans-serif;font-size: 13pt;} a.menu:hover {background-color: #666666;border-right: 3px solid #000000;}

The CSS code can either be place in the head section of the webpage if you are using internal CSS, between 'style' and '/style'. Or on your stylesheet if you are using external CSS. So try it out and get started working on your own web menu. Drop a comment to let us know how you get on.