• Beginner's Guide
  • Python is free and easy to learn after reading this tutorial.

Thursday, 19 April 2012

CSS3 Dropdown Menu Tutorial

Last updated on 09:37 - by Ramandeep Singh - Tags : , ,

I just designed a new CSS3 dropdown menu , so today i just made a tutorial for the readers to make this awesome dropdown menu.

Features :-


1) Dropdown menu

2) Just one image used

3) CSS3 gradiant effects

4) Search bar included

css3 dropdown menu

Html code


<div id='topMenu'>
<a expr:href='data:blog.homepageUrl' id='home'>home</a>

<ul id='navmenu-h'>
<li><a href='search/label/articles/' title='articles'>articles</a></li>

<li><a href='#' title='immigration'>immigration</a></li>

<li><a href='search/label/blogging/' title='blogging'>blogging</a>
</li>
<li><a href='search/label/make money/' title='make money'>make money</a></li>
<li><a href='search/label/migration guide/' title='migration guide'>migration guide</a></li>

</ul>

<!-- begin search box -->
<form action='/search' id='searchform' method='get'>
<input id='s' name='q' onblur='if(this.value==''){this.value='search site'};' onfocus='if(this.value=='search site'){this.value=''};' type='text'/>
<input id='searchsubmit' type='submit' value=''/>
</form>
</div>

 

 
[showmyads]

CSS code


/*----------------------------------------------------
{--------} Top Menu {--------}
----------------------------------------------------*/
#topMenu {
position: absolute; top: 119px; left: -13px;
background: url(http://1.bp.blogspot.com/_nI2w1Z0MWcE/TQrBKNU0uSI/AAAAAAAAA3s/Wqisw8pbr78/s1600/menu_bg.png);
width: 1005px; height: 58px;
margin: 0 auto;
z-index: 10;
}
#navmenu-h {
margin-left: 15px;
float: left;
}
/*----------------------------------------------------
{--------} Home Button {--------}
----------------------------------------------------*/
#home {
background-image:url(http://1.bp.blogspot.com/_nI2w1Z0MWcE/TQrBTlT216I/AAAAAAAAA30/qfKPFbEEJGg/s1600/home_icon.png);
width: 35px; height: 35px;
display: block;
float: left;
text-indent: -9999px;
margin: 8px 0 0 10px;
}
ul#navmenu-h { margin: 0; padding: 0; list-style: none; position: relative; }

ul#navmenu-h ul {
width: 160px; /* Sub Menu Width */
margin: 0;
list-style: none;
display: none;
position: absolute;
top: 100%;
left: 0;
}

ul#navmenu-h ul ul,ul#navmenu-h ul ul ul { top: 0; left: 100%; }

ul#navmenu-h li { float: left; display: inline; position: relative; text-align:left;font-weight:400! important;}
ul#navmenu-h ul li { width: 100%; display: block; }

/* Root Menu */
ul#navmenu-h a {
float: left;
display: block;
color: #ffffff;
font: 15px trebuchet ms,Arial, sans-serif;line-height:42px;font-weight:bold;
text-decoration: none;text-transform:uppercase;
height: 1%;
padding: 6px 12px;
}

/* Root Menu Hover Persistence */
ul#navmenu-h a:hover,ul#navmenu-h li:hover a,ul#navmenu-h li.iehover a {
background: -moz-linear-gradient(bottom, #1e201f, #474948);
background: -webkit-gradient(linear, center bottom, center top, from(#1e201f), to(#474948));
background-color: #1e201f;
background-image: -o-linear-gradient(bottom, #1e201f, #474948);
background: -webkit-gradient(linear, center bottom, center top, from(#1e201f), to(#474948));
background-color: #1e201f;
color: #fff;
padding: 6px 12px;
}

/* 2nd Menu */
ul#navmenu-h li:hover li a,ul#navmenu-h li.iehover li a {
float: none;
background: -moz-linear-gradient(bottom, #1e201f, #474948);
background: -webkit-gradient(linear, center bottom, center top, from(#1e201f), to(#474948));
background-color: #1e201f;
background-image: -o-linear-gradient(bottom, #1e201f, #474948);
background: -webkit-gradient(linear, center bottom, center top, from(#1e201f), to(#474948));
background-color: #1e201f;
padding: 0 12px; font-size:13px;line-height:35px;font-family:'droid sans',arial,sans-serif;
}

/* 2nd Menu Hover Persistence */
ul#navmenu-h li:hover li a:hover,ul#navmenu-h li:hover li:hover a,ul#navmenu-h li.iehover li a:hover,ul#navmenu-h li.iehover li.iehover a {
background: #999;text-align:left;
}

/* 3rd Menu */
ul#navmenu-h li:hover li:hover li a,ul#navmenu-h li.iehover li.iehover li a {
background: #999;
}

/* 3rd Menu Hover Persistence */
ul#navmenu-h li:hover li:hover li a:hover,ul#navmenu-h li:hover li:hover li:hover a,ul#navmenu-h li.iehover li.iehover li a:hover,ul#navmenu-h li.iehover li.iehover li.iehover a {
background: #666;
}

/* 4th Menu */
ul#navmenu-h li:hover li:hover li:hover li a,ul#navmenu-h li.iehover li.iehover li.iehover li a {
background: #666;
}

/* 4th Menu Hover */
ul#navmenu-h li:hover li:hover li:hover li a:hover,ul#navmenu-h li.iehover li.iehover li.iehover li a:hover {
background: #333;
}

/* Hover Function - Do Not Move */
ul#navmenu-h li:hover ul ul,ul#navmenu-h li:hover ul ul ul,ul#navmenu-h li.iehover ul ul,ul#navmenu-h li.iehover ul ul ul { display: none; }
ul#navmenu-h li:hover ul,ul#navmenu-h ul li:hover ul,ul#navmenu-h ul ul li:hover ul,ul#navmenu-h li.iehover ul,ul#navmenu-h ul li.iehover ul,ul#navmenu-h ul ul li.iehover ul { display: block; }
/*--------------------------------------------------------
{--------} Essential Style {--------}
---------------------------------------------------------*/
.sf-menu, .sf-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.sf-menu {
line-height: 1.0;
}
.sf-menu ul {
position: absolute;
top: -999em;
width: 10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
width: 100%;
}
.sf-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
float: left;
position: relative;
}
.sf-menu a {
display: block;
position: relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left: 0;
top: 2.5em; /* match top ul list item height */
z-index: 99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left: 10em; /* match ul width */
top: 0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left: 10em; /* match ul width */
top: 0;
}
/*--------------------------------------------------------
{--------} Search Forms {--------}
---------------------------------------------------------*/
#searchform {
position:absolute; top: 10px; right: 0;
width:190px;
}

#searchform input {
background:url(http://3.bp.blogspot.com/_nI2w1Z0MWcE/TQrCNfcJaCI/AAAAAAAAA4M/QHbm27NsnNY/s1600/searchbox_bg.png);
border:medium none;
color:#fff;
float:left;
font-size:13px;
padding:9px 3px 7px 15px;
width:130px;
font-family: verdana,Arial, Helvetica, sans-serif;
}
#searchform input#searchsubmit {
background:url(http://1.bp.blogspot.com/_nI2w1Z0MWcE/TQrCZOkALdI/AAAAAAAAA4U/Nd7NRTnq9WQ/s1600/searchbutton.png);
border:medium none;
cursor:pointer;
height:32px;
margin:0;
padding:0;
width:32px;
}

 
 

Demo

Demo in JSfiddle

 

Hope you would like this tutorial, if you face any problem regarding this tutorial , just leave a comment and i will answer you asap :)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat volutpat nibh nec posuere. A die shopuf pogest concludi cum administrasset slushie intus calidum brioche.
Follow me @ramantoday
Subscribe to this Blog via Email :

11 comments:

  1. @Abhishek Thanks for feedback

    ReplyDelete
  2. Seems awesome anyway to implement it on wordPress.

    ReplyDelete
  3. To implement it to wordpress, just find header.php or header-area.php
    Now with the help of firebug find where your top menu code is situated and just replace it with the above html code
    in stylesheet add the above css code

    ReplyDelete
  4. This one is too good.. do u mind providing a demo link for the same..?

    ReplyDelete
  5. http://designrapid.blogspot.in/
    http://jsfiddle.net/raman/qQDcA/

    ReplyDelete
  6. You will have to consider aspect inside an important challenge for one from all of the most beneficial blog sites for all of the net. I actually can suggest www.designrapid.com !

    ReplyDelete
  7. armor first. First and foremost, we must belevie (be in-Christ). If not, then please begin here: Inherit Eternal Life. After this section, we will take a look at tactical spiritual warfare and tactics of the enemy. As

    ReplyDelete
  8. I wonder if this is the old IE “:hover” plerbom, where IE 5/6 needed a “nudge” to recognize a change? The old bug was only on links, of course, but required a property on :hover that does not appear on the (non-hovered) element. This came up with Eric Meyer’s “Pure CSS popups” and may or may not be related.There are several properties you can try. Off the top of my head, I seem to remember that background-position: 0 0; or direction: ltr; work, among others.

    ReplyDelete
  9. Nice one. I have been looking for a way to have a drop down menu on my blog. I really need to try this now

    ReplyDelete
  10. Sure go on, comment back if you face any problem.

    ReplyDelete

Text Widget

Recent News

About Us

© 2014 DesignRapid. Designed by Ramandeep Singh
Powered by Blogger.
back to top