Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to Work with CSS3 Menus

This article will cover the CSS3 Menus. I will demonstrate the functionality by giving some examples and play with Simple, Interactive and Dropdown Sub-menus.

Introduction:

This tutorial will cover some creative menu designing and hovering effects using CSS3. The article will cover simple composition of elements, an icon, a main title and a secondary title, that will be animated on hover using CSS animation.

Basic idea of menu designing in CSS3 will be HTML structure in which menu will be unordered list where each item is a link element (As discussed in my previous CSS menu tutorial). Following section is example of designing a simple interactive menu in CSS3

Listing 1: Simple CSS3 Menu

<html>
<head>
<title>CSS3 Menu Example</title>
<style type="text/css">
ul.cssTabs {
	background: #99DDAA;
	border:solid 3px #CC22FF;
	padding: 0 85px;
	width: 600px;
	margin:20px;
	font-size:12px;
	font-weight:bold;
}
ul.cssTabs > li {
	background:#989898;
	color:#3a3a3a;
	border:solid 1px #606060;	
	border-bottom:3;	
	display: inline-block;
	margin: 10px 1px -1px;
	padding: 10px 25px;
}
 
ul.cssTabs > li.active {
	background:#989898;
}
</style>
</head>
<ul class="cssTabs">
	<li class="active">Home</li>
	<li>Products</li>
	<li>Services</li>
	<li>technology</li> 
	<li>Entertainment</li>            
</ul>
</body>
</html>
Above figure is Simple menu designing - horizontal way without any clickable and hovering effect

Figure 1: Above figure is Simple menu designing - horizontal way without any clickable and hovering effect

Interactive CSS3 Menu With Submenu:

This part contains designing of menu and submenu with some special clickable effect. Program contains “cssMenu” class which adds border, width, padding, margin etc to semantic HTML part which hold menu and submenu in list. Listed example will clear the concept.

Listing 2: Interactive CSS3 Menu with Submenu

	
<html>
<head>
<style type="text/css">
ul.cssMenu {
	background: #89DD22;
	border:solid 8px #CC22FF;
	padding: 0 85px;
	width: 600px;
	margin:20px;
	font-size:14px;
	font-weight:bold;
}
ul.cssMenu > li {
	background:#CC88CC;
	color:#3a3a3a;
	border:solid 8px #606060;	
	border-bottom:5;	
	display: inline-block;
	margin: 5px 1px -1px;
	padding: 20px 10px;
}
 
ul.cssMenu > li.active {
	background:#ffffff;
}
</style>
</head>
<ul class="cssMenu">
		<li><a href="#">Home</a></li>
		<li><a href="#">Tutorial</a>
			<ul>
				<li><a href="#">HTML</a></li>
				<li><a href="#">XHTML</a></li>
				<li><a href="#">JAVASCRIPT</a></li>
				<li><a href="#">PHP</a></li>
				<li><a href="#">Scirnce</a>
					<ul>
						<li><a href="#">Physics</a></li>
						<li><a href="#">Chemistry</a></li>
						<li><a href="#">Biology</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="#">Connect</a>
			<ul>
				<li><a href="#">Facebook</a></li>
				<li><a href="#">Gmail</a></li>
				<li><a href="#">Orkut</a></li>
				<li><a href="#">Twitter</a></li>

				</ul>
		</li>
		<li> <a href="#">Entertainment</a>
<ul>
				<li><a href="#">Video</a></li>
				<li><a href="#">Auido</a></li>
				<li><a href="#">Games</a></li>
				<li><a href="#">others</a></li>

				</ul>
	</ul>
</body>
</html>
The Above figure is output of simple menu designing with submenu.

Figure 2: The Above figure is output of simple menu designing with submenu.

CSS3 Animated Dropdown Menu:

In the Above example, the semantic HTML is a logical structure and has a correct meaning, even if styling is totally missing at this point. In CSS part of script list contains many sub lists. Submenu appeared while hovering on main menu. Please note that Microsoft Internet explorer 6 does not support hovering.

In listed example menu is a single, nested unordered list. Each link that acts as a trigger to show a sub-menu is assigned with another class. The root menu items are floated left. That's how we get an ordinary list to display horizontally. The menu is an unordered list. Simply add new ‘LI’ elements as you needed. Following script will compile the idea of dropdown animated menu in CSS3

Listing 3: CSS3 Dropdown Menu

<html>
<head>
<title>CSS3 Menu Example</title>
<style type="text/css">
 /* Main */
#menu{
	width: 65%;
	margin: 0;
	padding: 10px 5 5 5;
	list-style: none;  
	background: #FF0000;
	background: -moz-linear-gradient(#FF0000, #FF0000); 
        background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));	
	background: -webkit-linear-gradient(#444, #111);	
	background: -o-linear-gradient(#444, #111);
	background: -ms-linear-gradient(#444, #111);
	background: linear-gradient(#FF0000, #111);
	-moz-border-radius: 100px;
	border-radius: 100px;
	-moz-box-shadow: 0 2px 1px #66FFCC;
	-webkit-box-shadow: 0 2px 1px #66FFCC;
	box-shadow: 0 2px 1px #66FFCC;
}
#menu li{
	float: left;
	padding: 3 0 15px 0;
	position: relative;
}
#menu a{
	float: left;
	height: 25px;
	padding: 0 25px;
	color: #FF0000;
	text-transform: uppercase;
	font: bold 13px/20px Arial, Helvetica;
	text-decoration: none;
	text-shadow: 0 1px 0 #000;      
}
#menu li:hover > a{
	color: #fafafa;
}

*html #menu li a:hover{ /* IE6 */
	color: #fafafa;
}

#menu li:hover > ul{
	display: block;
}

/* Sub-menu */

#menu ul{
    list-style: none;
    margin: 0;
    padding: 0;    
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;    
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);    
    background: -o-linear-gradient(#444, #111);	
    background: -ms-linear-gradient(#444, #111);	
    background: linear-gradient(#444, #111);	
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#menu ul li{
    float: none;
    margin: 0;
    padding: 0;
    display: block;  
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

#menu ul li:last-child{   
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;    
}

#menu ul a{    
    padding: 10px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}

*html #menu ul a{ 
	height: 10px;
	width: 150px;
}
*:first-child+html #menu ul a{ 
	height: 10px;
	width: 150px;
}
#menu ul a:hover{
        background: #0186ba;
	background: -moz-linear-gradient(#04acec,  #0186ba);	
	background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
	background: -webkit-linear-gradient(#04acec,  #0186ba);
	background: -o-linear-gradient(#04acec,  #0186ba);
	background: -ms-linear-gradient(#04acec,  #0186ba);
	background: linear-gradient(#04acec,  #0186ba);
}
#menu ul li:first-child a{
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}
#menu ul li:first-child a:after{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}
#menu ul li:first-child a:hover:after{
    border-bottom-color: #04acec; 
}
#menu ul li:last-child a{
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

#menu:after{
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
</style>
</head>
<ul id="menu">
	<li><a href="#">Home</a></li>
		<li><a href="#">Tutorial</a>
			<ul>
				<li><a href="#">HTML</a></li>
				<li><a href="#">XHTML</a></li>
				<li><a href="#">JAVASCRIPT</a></li>
				<li><a href="#">PHP</a></li>
				<li><a href="#">Scirnce</a>
					<ul>
						<li><a href="#">Physics</a></li>
						<li><a href="#">Chemistry</a></li>
						<li><a href="#">Biology</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="#">Connect</a>
			<ul>
				<li><a href="#">Facebook</a></li>
				<li><a href="#">Gmail</a></li>
				<li><a href="#">Orkut</a></li>
				<li><a href="#">Twitter</a></li>

				</ul>
		</li>
		<li> <a href="#">Entertainment</a>
<ul>
				<li><a href="#">Video</a></li>
				<li><a href="#">Auido</a></li>
				<li><a href="#">Games</a></li>
				<li><a href="#">others</a></li>
				</ul>
<li><a href="#">News</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Shopping</a></li>
</ul>
</body>
</html>
Above figure is output of Dropdown menu in CSS 3

Figure 3: Above figure is output of Dropdown menu in CSS 3

Conclusion:

This tutorial have covered the basic designing concept of CSS3 menu’s. Go through the examples given with this post and let us know your feedback/questions. We @ mrbool always ready to answer your queries.

CSS 3 Training Course (Cascading Style Sheets) - Mr.Bool Online Courses



I am Software Developer from India. I hold B.Tech. in Computer Science & Engineering. I am having 2+ years experience of developing Web applications and Websites using HTML, JavaScript, CSS, C#.NET etc..

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login