CSS is a colorful fancy environment for web designers since its releasing day. However, the latest changes in CSS are so awesome and powerful. Some years back, creating A drop down menu was not possible without jQuery and CSS. CSS used to design the Menu and jQuery used to functioning the menu. Now it is alone possible with CSS3. So today I will give you a complete solution for CSS Drop Down Menu for your website or blog. I have given complete HTML and CSS codes for this menu. You can simply copy them and paste into your webpage or website. You can latter on change the design, colors, links according to your needs.
You can easily add this beautiful drop down menu to any blogger template, just follow below steps to do so:
1. Login to your blogger account
2. Go to Template >> HTML >> Proceed
3. Find this piece of Code ]]></b:skin>
4. Just above/before ]]></b:skin> paste below CSS code.
@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);
/* Menu CSS */
#cssmenu, #cssmenu > ul{
background: #CCC;
padding-bottom: 5px;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
}
#cssmenu:before, #cssmenu:after, #cssmenu > ul:before, #cssmenu > ul:after {
content: '';
display: block;
}
#cssmenu:after, #cssmenu > ul:after {
clear: both;
}
#cssmenu > ul{
background: #C00;
margin: 0;
padding: 0;
position: relative;
}
#cssmenu > ul li{
margin: 0;
padding: 0;
list-style: none;
}
#cssmenu > ul > li{
float: left;
position: relative;
}
#cssmenu > ul > li > a{
padding: 23px 26px;
display: block;
color: FFF;
font-size: 14px;
text-decoration: none;
text-transform:capitalize;
line-height: 20px;
}
#cssmenu > ul > li:hover > a{
background:#CCC;
color:#000;
}
#cssmenu > ul > li > a > span{
line-height: 20px;
}
#cssmenu > ul > li.active > a, #cssmenu > ul > li > a:active{
background:#ccc;
color:#000;
text-shadow:none;
font-weight:bold;
text-transform:capitalize;
}
#cssmenu > ul ul{
opacity: 0;
visibility: hidden;
position: absolute;
top: 120px;
background:#CCC;
margin: 0;
padding: 0;
z-index: 1;
}
#cssmenu > ul li:hover ul{
opacity: 1;
visibility: visible;
margin: 0;
color: #000;
z-index: 2;
top:64px;
left: 0;
}
#cssmenu > ul ul:before{
content: '';
position: absolute;
top: -10px;
width: 100%;
height: 20px;
background: transparent;
}
#cssmenu > ul ul li{
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
#cssmenu > ul ul li a{
padding: 18px 26px;
display: block;
color: #393939;
font-size: 13px;
text-decoration: none;
text-transform: capitalize;
width: 150px;
border-left: 4px solid transparent;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
-ms-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
text-shadow: 0 1px 0 white;
}
#cssmenu > ul ul li a:hover {
border-left: 4px solid #C00;
background:#999;
color: white;
text-shadow: 0 1px 0 black;
}
Save your template and you’ve added the CSS3 part of the drop down menu to your blog.
CSS Customization for this menu
You can do some customization in above CSS as you want, to change the color of a link simply replace any of your choice color name/code. Just Replace Color: FFF; with you own color. you can also generate color code with our color code generator tool.
#cssmenu > ul > li > a{
padding: 23px 26px;
display: block;
color: FFF;
font-size: 14px;
text-decoration: none;
text-transform:capitalize;
line-height: 20px;
}
if you want to change the background of menu link. find the following below section and replace background: #C00; with you own color code.
#cssmenu > ul{
background: #C00;
margin: 0;
padding: 0;
position: relative;
}
with this method you can change anything background color, text color, text shadow, hover effect and much more. if you need any help feel free to post any query in comment form below.
Now add an HTML/JavaScript widget from your blog’s Layout section and paste below code inside that widget:
1. Go to blogger layout section.
2. click on add a gadget.
3. scroll down and find HTML/JavaScript widget.
4. When you found click on “+” Sign.
5. and paste the following HTML Code in blank text area. ( Title Area Leave blank )
<div id='cssmenu'>
<ul>
<li class='active '><a href='index.html'><span>Home</span></a></li>
<li class='has-sub '><a href='#'><span>Products</span></a>
<ul>
<li><a href='#'><span>Product 1</span></a></li>
<li><a href='#'><span>Product 2</span></a></li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
Just replace the “#” sign with your links and this is a one product drop down menu so you need to copy the entire <ul></ul> tag and paste again and again as far as you want.
I’m continuously working to produce more web designing projects and freebies for you, however, let me know how was this menu and if you liked this then kindly share it with your friends, Please leave your responses in the comments section below, and let me know what you think! Cheers ;)
We also discuss about the Creating A Responsive Web Design And Template. Do you want to create your own responsive menu for your website but don't know how ? In this post we will show 4 awesome responsive menus that you can use to build your own website. For simple navigation, the solutions can be straight-forward. However, if you’re working on something a bit more complex, maybe with multiple nested lists and dropdowns, a more dramatic rearrangement may be in order. In this approach to responsive navigation, we’re going to use an approach that can accommodate large, multi-level navigation menus using media queries, whilst trying to keep our markup simple and our external resources minimal. In this article you will see how you can build an awesome CSS3 animated Responsive dropdown menu.
Enjoy..!!
