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.
About the author /
Mohamed RiasI'm a programmer, photographer, and proud parent. With a passion for coding and a love of capturing life's moments through my camera lens, I'm always on the lookout for new challenges and opportunities to grow. As a dedicated parent, I understand the importance of balancing work and family, and I strive to be the best version of myself in all aspects of my life.
Related Posts
-
December 6, 2012 -
September 14, 2012 6 Handy Tips for Responsive Web Design
-
September 5, 2012 65 Amazing High Resolution 3D Wallpapers for your Desktop
-
August 21, 2012 50+ Amazing Olympics Infographics Inspirations
-
August 21, 2012 50+ Amazing Olympics Infographics Inspirations
-
November 27, 2010 45+ Online Image Editors and Funny Photo Effects Creators
Popular
Editor’s Pick
-
April 23, 2023 Exploring the Wonders of Gigapixel Photography: How to Achieve Stunning Detail and Clarity in Your Images
Gigapixel photography is a technique that captures images with incredibly high resolution and detail, allowing for stunningly clear and vibrant pictures that are perfect for printing or displaying on large screens. In this article, we’ll explore some tips and techniques you can use to achieve amazing results with gigapixel photography. Definition of gigapixel photography Gigapixel…
-
April 24, 2023 React Performance Optimization: Strategies and Techniques for Efficient Data Fetching and Management
When developing modern web applications, efficient data fetching and management are crucial for providing a seamless user experience. As the amount of data in web applications grows, optimizing data fetching and management becomes increasingly important. Overview of the importance of data fetching and management in modern web applications Data fetching refers to retrieving data from…
-
April 22, 2023 Mastering Webpack Module Federation: A Comprehensive Guide for Modern Application Development
Introduction Welcome to this comprehensive guide on mastering Webpack Module Federation for modern application development. In this guide, we’ll dive into the world of Webpack and explore its Module Federation feature in-depth. Definition of Webpack Module Federation Webpack Module Federation is a feature of the Webpack module bundler that allows developers to share code and…
-
January 15, 2010 16 useful Mac cheat Sheets
Cheat sheet is a concise set of notes used for quick reference. Cheat sheets will contain most of the shortcuts needed to program faster. And it is meant for newbie users who can’t remember the shortcuts or commands. In this article , I have collected some of the useful cheat sheets available for Mac OS….
-
April 25, 2023 WhatsApp Multiple Device Log-in: Simplify Staying Connected Across Devices
WhatsApp, which is a widely used messaging platform, is introducing a game-changing feature that will allow users to log into their WhatsApp account on multiple devices. This much-awaited update aims to simplify staying connected across devices by making it easier for users to maintain their chats. In this comprehensive guide, we will explore the benefits…