HI all,
Today I am going to tell you that how we can make a nice menu bar with submenus using css3. In this
article you do...
Step 2: Now we will add some submenus under any menu item as follows:
<ul class="menubar">
<li><a href="#" />Home</li>
<li...
Step 3: Now it’s time to give nice look using CSS properties. There are two ways to use CSS properties.
Either you can use...
Step 4: Now we need to align menu items. We can do this using following CSS properties like as below:
.menubar li{
float:l...
Step 6: Now we will styled hyperlinked menu elements; using following CSS class:
.menubar a {
display:block;
border-right:...
Menu bar with multiple of submenus using css3 & html only
Upcoming SlideShare
Loading in …5
×

Menu bar with multiple of submenus using css3 & html only

1,280 views

Published on

This document shows step by step represent that how we can make a nice menu bar containing multiple sub menus. I have made this design using latest features of CSS3 and HTML.
There is no use of JQuery or Java Script.

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,280
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
13
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Menu bar with multiple of submenus using css3 & html only

  1. 1. HI all, Today I am going to tell you that how we can make a nice menu bar with submenus using css3. In this article you do not have need to use any type of images. It totally depends on new features of css3 like gradient, box shadow, box radius etc. Step 1: First of all we will make an unordered list with some list elements at your simple html page like this: <Html> <head><title> Menu Bar with Submenus</title></head> <body> <ul class="menubar"> <li><a href="#" />Home</li> <li><a href="#" />About Us</li> <li><a href="#" />Contact Us</li> <li><a href="#" />Projects</li> <li><a href="#" />Blog</li> <li><a href="#" />Help</li> <li><a href="#" />Sitemap</li> </ul> </body> </html> Save this page as Menubar.html and open it using any browser like Chrome, Firefox, Safari & IE. It will look like below screen shot.
  2. 2. Step 2: Now we will add some submenus under any menu item as follows: <ul class="menubar"> <li><a href="#" />Home</li> <li><a href="#" />About Us</li> <li><a href="#" />Contact Us</li> <li><a href="#" />Projects <ul> <li><a href="#" />Ongoing Projects <ul> <li><a href="#" />2000 Projects</li> <li><a href="#" />2001 Projects</li> <li><a href="#" />2002 Projects</li> </ul> </li> <li><a href="#" />Future Projects <ul> <li><a href="#" />2013 Projects</li> <li><a href="#" />2014 Projects</li> <li><a href="#" />2015 Projects</li> </ul> </li> </ul> </li> <li><a href="#" />Blog</li> <li><a href="#" />Help <ul> <li><a href="#" />Getting help Online <ul> <li><a href="#" />Via Chat</li> <li><a href="#" />Via Messaging</li> <li><a href="#" />Via Emailing</li> </ul> </li> <li><a href="#" />Getting help offline <ul> <li><a href="#" />Via Hard copy</li> <li><a href="#" />Via Executive</li> <li><a href="#" />Via visit at center</li> </ul> </li> </ul> </li> <li><a href="#" />Sitemap</li> </ul> Save your file and refresh your browser page; now you will see below screen shot.
  3. 3. Step 3: Now it’s time to give nice look using CSS properties. There are two ways to use CSS properties. Either you can use internal CSS or can use External CSS. I am going to use internal CSS which will embed in head section like as below: We will add a class in <ul> element. I am using menubar class you can use any other name. <Html> <head><title> Menu Bar with Submenus</title> <style> body { background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DC143C), to(#A52A2A)); background-image: -moz-linear-gradient(0% 100% 90deg, #DC143C, #A52A2A); background-image: -o-linear-gradient(0% 100% 90deg, #DC143C, #A52A2A); background-image: -ms-linear-gradient(0% 100% 90deg, #DC143C, #A52A2A); background-image: linear-gradient(0% 100% 90deg, #DC143C, #A52A2A); background: #DC143C; } .menubar, .menubar ul{ list-style:none; padding: 0; margin-left:150px; } </style> </head> First of all we need to remove bullet symbol. We can remove by using list-style: none property. Here I am using padding: 0 and margin-left: properties to align menu bar from left top corner.
  4. 4. Step 4: Now we need to align menu items. We can do this using following CSS properties like as below: .menubar li{ float:left; line-height: 40px; position: relative; text-align:center; width: 160px; } Add this class to your CSS style. Now your web page will look like as below screen shot: Step 5: Now we will hide submenus so that they will view at their requirement. Add following class to your CSS style. .menubar li ul{ position: absolute; margin-top: 0px; margin-left: 0px; display: none; } .menubar ul li ul{ position: absolute; margin-top: -25px; margin-left: 157px; }
  5. 5. Step 6: Now we will styled hyperlinked menu elements; using following CSS class: .menubar a { display:block; border-right:10px solid #fff; border-left:10px solid #fff; background:#000; color:#fff; text-decoration:none; padding:0 10px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -o-border-radius: 30px; -ms-border-radius: 30px; border-radius: 30px; -webkit-box-shadow: 10 1px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 10 1px 10px rgba(0, 0, 0, 0.5); -o-box-shadow: 10 1px 10px rgba(0, 0, 0, 0.5); -ms-box-shadow: 10 1px 10px rgba(0, 0, 0, 0.5); box-shadow: 10 1px 10px rgba(0, 0, 0, 0.5); } Here I am using border-radius & box-shadow to give nice look to hyperlinked element. Step 7: Now we will style hyperlinked element during hover by adding following class: .menubar a:hover { background-color:#909090; color:#000; } .menubar li:hover ul, .menubar li.over ul{ display:block; } .menubar li:hover ul ul, .menubar li.over ul ul{ display:none; } .menubar ul li:hover ul, .menubar ul li.over ul{ display:block; } Now finally refresh your browser and you will see your menu bar with submenus.

×