Navigation is certainly a very important part in web design, especially if we keep in mind that the navigation of a page is there to orient and guide the user. Navigation is a key element of any website. With the help of navigation menu, the user gets from section to section, and to different contents. It not only creates something unique but also it helps the user browse the site easily. Thus Navigation menu is one of the few design elements which provide users with some sense of orientation and guide them through the site. Users should be able to rely on it that is why designers shouldn’t mess around with it.
There are different types of navigation menus .However the most commonly used are horizontal and vertical type navigation menus. This article will teach you how to set up different kinds of navigation menus which comes under the categories of horizontal and vertical navigation. CSS is of course the perfect language for designing beautiful navigation menus. It can be applied to any type of website and is very flexible. With the help of HTML and CSS code given below for different navigation menus you can easily set up these navigation menus. Let’s have a look on it one by one.

Horizontal navigation menus

It is probably the most common style found online. This type of navigation consists of a horizontal list of the sections of the site, generally named in one or two words each. Some of the examples of this type of navigation menus are as follows.

CSS Spotlight Menu:

Spotlight Menu uses CSS3’s border-radius property and transitions to add a circular background to its menu items when the mouse rolls over each one. The result is a Flash-like, sleek spotlight menu! The circular background appears in all major browsers, including IE9, where as the transition effect works in browsers that support CSS3 transitions, namely, FF3.5+, Safari 3.1+, Google Chrome, and Opera 11.6+.

<style type="text/css">
.spotlightmenu{
width: 100%;
overflow:hidden;
}
.spotlightmenu ul{
margin: 0;
padding: 0;
font: bold 14px blue; /* font style and size */
list-style-type: none;
text-align: center; /* "left", "center", or "right" align menu */
}
.spotlightmenu li{
display: inline-block;
position:relative;
padding: 5px;
margin: 0;
margin-right: 5px; /* right margin between menu items */
}
.spotlightmenu li a{
display:inline-block;
padding: 5px;
min-width:60px; /* horizontal diameter of spotlight */
height:60px; /* vertical diameter of spotlight */
text-decoration: none;
color: black;
margin: 0 auto;
overflow:hidden;
-moz-transition: all 0.5s ease-in-out; /* CSS3 transition to animate all A properties */
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.spotlightmenu li:hover a{
color: white;
background: pink; /* background color of spotlight */
-webkit-border-radius: 50%; /* large radius to create circular borders */
-moz-border-radius: 50%;
border-radius: 50%;
}
.spotlightmenu li a span{
position:relative;
top:35%; /* move text down so it appears centered within menu item */
}
</style>

HTML CODE
<div class="spotlightmenu">
<ul>
<li><a href="http://www.smashingtips.com"><span>Home</span></a></li>
<li><a href="http://www.smashingtips.com"><span>HTML</span></a></li>
<li><a href="http://www.smashingtips.com"><span>CSS</span></a></li>
<li><a href="http://www.smashingtips.com"><span>DHTML</span></a></li>
<li><a href="http://www.smashingtips.com"><span>JavaScript</span></a></li>
</ul>
</div>

CSS Circle Menu

Here we use the CSS trick for the creation of “circles”, by using CSS3’s border-radius property that’s set to a very large value: When we do this, the border on each of the four corners of the element merge into a continuous round edge, creating the look of a circle. Using this trick, the following creates a series of circle menu links. The key as mentioned is just to set the border-radius property to a very large value, at least 50% of both the width and height of the element:

CSS CODE
<style type="text/css">
.circlemenu{
width: 100%;
overflow:hidden;
}
.circlemenu ul{
margin: 0;
padding: 0;
font: bold 14px Verdana;
list-style-type: none;
text-align: center;
}
.circlemenu li{
display: inline;
margin: 0;
}
.circlemenu li a{
display:inline-block;
text-align:center;
text-decoration: none;
color: white;
background:purple;
margin: 0;
margin-right:5px;
width:100px;
height:100px;
border-radius: 400px; /*really large border radius to create round borders*/
-moz-border-radius: 400px;
-webkit-border-radius: 400px;
}

.circlemenu a span{
position:relative;
top:40%;
}
.circlemenu li a:visited{
color: white;
}
.circlemenu a:hover{
background: #a71b15;
}
</style>

HTML CODE
<div class="circlemenu">
<li><a href="http://www.smashingtips.com"><span>Home</span></a></li>
<li><a href="http://www.smashingtips.com/new.htm"><span>HTML</span></a></li>
<li><a href="http://www.smashingtips.com"><span>CSS</span></a></li>
<li><a href="http://www.smashingtips.com"><span>DHTML</span></a></li>
<li><a href="http://www.smashingtips.com"><span>JavaScript</span></a></li>
</ul>

CSS3 Semi Opaque Menu:

This menu takes advantage of CSS3 gradient background to produce a menu with a semi opaque rollover effect. Linear gradient backgrounds in CSS3 helps us in adding a graduating background to any element on the page. It’s supported in FF3.6, Safari 2+ and Google Chrome. In IE9, SVG is used to create a similar look while IE gets its act together. Whatever the solid background colour of the main UL behind it, the menu item’s background peeks through.

CSS CODE
<style type="text/css">
div.bottombar{ /* bar that runs across the bottom of the menu */
height: 10px;
background: #1a1109;
}
ul.semiopaquemenu{ /* main menu UL */
font: bold 14px Georgia ;
width: 100%;
background: #b1e958;
padding: 11px 0 8px 0; /* padding of the 4 sides of the menu */
margin: 0;
text-align: left; /* set value to "left", "center", or "right" to align menu accordingly */
}
ul.semiopaquemenu li{
display: inline;
}
ul.semiopaquemenu li a{
color:black;
padding: 6px 8px 6px 8px; /* padding of the 4 sides of each menu link */
margin-right: 15px; /* spacing between each menu link */
text-decoration: none;
}
ul.semiopaquemenu li a:hover, ul.semiopaquemenu li a.selected{
color: black;
background: -moz-linear-gradient(top, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.16) 100%); /* fade from white (0.82 opacty) to 0.16 opacity */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.82)), color-stop(100%,rgba(255,255,255,0.16)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
background: linear-gradient(top, rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1ffffff', endColorstr='#29ffffff',GradientType=0 );
-moz-box-shadow: 0 0 5px #595959; /* CSS3 box shadows */
-webkit-box-shadow: 0 0 5px #595959;
box-shadow: 0 0 5px #595959;
padding-top: 12px; /* large padding to get menu item to protrude upwards */
padding-bottom: 20px; /* large padding to get menu item to protrude downwards */
}
</style>

HTML CODE
<ul class="semiopaquemenu
<li><a href="http://www.smashingtips.com"><span>Home</span></a></li>
<li><a href="http://www.smashingtips.com/new.htm"><span>HTML</span></a></li>
<li><a href="http://www.smashingtips.com"><span>CSS</span></a></li>
<li><a href="http://www.smashingtips.com"><span>DHTML</span></a></li>
<li><a href="http://www.smashingtips.com"><span>JavaScript</span></a></li>
</ul>
<div class="bottombar"></div>

Vertical Navigation Menus

It is also quite common, and is often useful for sites requiring a longer list of button bar items, expandable navigation, or for titles of longer length. Vertical navigation is most commonly found along the left side of the web page, though right side navigation can be effective if designed properly or if for secondary navigation. Examples are as follows:

CSS3 animated vertical slanted menu:

This is a vertical list menu that uses CSS3 animation to gradually expand the selected menu item horizontally so to highlight it. CSS3 lets us animate virtually any CSS property, so instead of directing changing into a property, the browser slowly morphs into the new value instead. This is done with the help of CSS3’s “transition” property. It also uses the CSS border trick to create a cross browser slanted left edge. The final result is a sleek vertical list menu that uses pure HTML mark up.

<style>
ul.svertical{
width: 250px;
overflow: auto;
background: grey;
margin: 0;
padding: 0;
padding-top: 7px;
list-style-type: none;
}

ul.svertical li{
text-align: right;
}

ul.svertical li a{
position: relative;
display: inline-block;
text-indent: 5px;
overflow: hidden;
background: rgb(127, 201, 68); /* initial background color of links */
font: bold 16px Germand;
text-decoration: none;
padding: 5px;
margin-bottom: 7px; /* spacing between links */
color: black;
-moz-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8); /* inner right shadow added to each link */
-webkit-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8);
box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8);
-moz-transition: all 0.2s ease-in-out; /* CSS3 transition of hover properties */
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

ul.svertical li a:hover{
padding-right: 30px; /* add right padding to expand link horizontally to the left */
color: black;
background: rgb(153,249,75);
-moz-box-shadow: inset -3px 0 2px rgba(114,114,114, 0.8); /* contract inner right shadow */
-webkit-box-shadow: inset -3px 0 5px rgba(114,114,114, 0.8);
box-shadow: inset -3px 0 5px rgba(114,114,114, 0.8);
}

ul.svertical li a:before{ /* CSS generated content: slanted right edge */
content: "";
position: absolute;
left: 0;
top: 0;
border-style: solid;
border-width: 70px 0 0 20px; /* Play around with 1st and 4th value to change slant degree */
border-color: transparent transparent transparent black; /* change black to match the background color of the menu UL */
}
</style>

<ul class="svertical">
<li><a href="http://www.smashingtips.com/">BLOGGER</a></li>
<li><a href="http://www.smashingtips.com/style/" >FREEBIES</a></li>
<li><a href="http://www.smashingtips.com/jsref/">INSPIRATIONS</a></li>
<li><a href="http://www.smashingtips.com/domref/">PHOTOGRAPHY</a></li>
<li><a href="http://www.smashingtips.com">TECHIE TIPS</a></li>
<li><a href="http://www.smashingtips.com/">WORDPRESS</a></li>
</ul>

Nested Side Bar Menu:

This is a very simple and professional looking multi level side menu which uses JavaScript code. Mark up wise it’s just a regular nested UL list, turned into a drop down menu with the help of very small JavaScript code. The menu’s background should be a solid colour instead of a background image, as the later property is reserved to show the right arrow images that appear next to menu items with additional sub menus.

<style type="text/css">
.sidebarmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: bold 13px Verdana;
width: 180px; /* Main Menu Item widths */
border-bottom: 1px solid #ccc;
}

.sidebarmenu ul li{
position: relative;
}
.sidebarmenu ul li a{
display: block;
overflow: auto; color: white;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}
.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: #012D58; /*background of tabs (default state)*/
}

.sidebarmenu ul li a:visited{
color: white;
}

.sidebarmenu ul li a:hover{
background-color: black;
}

/*Sub level menu items */
.sidebarmenu ul li ul{
position: absolute;
width: 170px; /*Sub Menu Items width */
top: 0;
visibility: hidden;
}

.sidebarmenu a.subfolderstyle{
background: url(right.gif) no-repeat 97% 50%;
}

/* Holly Hack for IE */
* html .sidebarmenu ul li { float: left; height: 1%; }
* html .sidebarmenu ul li a { height: 1%; }
/* End */

</style>

<script type="text/javascript">
var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas

function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
else //else if this is a sub level submenu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
ultags[t].style.visibility="visible"
ultags[t].style.display="none"
}
}
}

if (window.addEventListener)
window.addEventListener("load", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)

</script>

<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Sub Item 2.1.3</a></li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
</div>

So this is all about some different navigation menus which will make the site more unique as well as user-friendly.