Home » Tutorials » Add drop down menu in blogger

Sunday 28 July 2013

Add drop down menu in blogger

By Muhammad Aseel at July 28, 2013 Labels: , , , , ,
Add drop down menu in blogger




بِسْمِ اللَّهِ الرَّحْمَـٰنِ الرَّحِيمِ
Start with the name of Allah the most merciful and the most beneficent. Drop down menu is the most important part of blogger, you can't do blogging until you haven't menu to your blog. Today I am providing you the best and the great drop down menu for your blog you can easily being add this drop down menu to blogger. Drop down menu will help you in containing your links on it and help your blog visitors to browse your blog. This drop down menu has been made of only HTML and CSS I have not used JavaScript in this drop down menu. Click below button to see the demo or live preview of drop down menu.

Adding drop down menu in blogger

  • Go to blogger dashboard,
  • go to layout >> add a gadget,
  • now paste the below code in the HTML area of gadget:
<style>#obtmenu1 ul,
#obtmenu1 li,
#obtmenu1 span,
#obtmenu1 a {
  margin: 0;
  padding: 0;
  position: relative;
}
#obtmenu1 {
  height: 49px;
  border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  background: #141414;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAx CAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  border-bottom: 2px solid #0fa1e0;
}
#obtmenu1:after,
#obtmenu1 ul:after {
  content: '';
  display: block;
  clear: both;
}
#obtmenu1 a {
  background: #141414;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAx CAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  color: #ffffff;
  display: inline-block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  line-height: 49px;
  padding: 0 20px;
  text-decoration: none;
}
#obtmenu1 ul {
  list-style: none;
}
#obtmenu1 > ul {
  float: left;
}
#obtmenu1 > ul > li {
  float: left;
}
#obtmenu1 > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #0fa1e0;
  margin-left: -10px;
}
#obtmenu1 > ul > li:first-child > a {
  border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
}
#obtmenu1 > ul > li:last-child > a {
  border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
}
#obtmenu1 > ul > li.active > a {
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
  background: #070707;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAx CAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
}
#obtmenu1 > ul > li:hover > a {
  background: #070707;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAx CAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
}
#obtmenu1 .has-sub {
  z-index: 1;
}
#obtmenu1 .has-sub:hover > ul {
  display: block;
}
#obtmenu1 .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#obtmenu1 .has-sub ul li {
  *margin-bottom: -1px;
}
#obtmenu1 .has-sub ul li a {
  background: #0fa1e0;
  border-bottom: 1px dotted #6fc7ec;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
}
#obtmenu1 .has-sub ul li:hover a {
  background: #0c7fb0;
}
#obtmenu1 .has-sub .has-sub:hover > ul {
  display: block;
}
#obtmenu1 .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#obtmenu1 .has-sub .has-sub ul li a {
  background: #0c7fb0;
  border-bottom: 1px dotted #6db2d0;
}
#obtmenu1 .has-sub .has-sub ul li a:hover {
  background: #095c80;
}
</style>
<div id='obtmenu1'>
<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 class='has-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

Customization:

  • Change the position of your gadget where you want drop down menu display.
  • If you want to add a link just simply replace your link with (#)Hash tag.
  • If you want to change the name of any tab than simply change the text which is written between the <span></span> tag.
  • If you want to add any tab just simply add the code like this:
<li><a href="your-link"><span>your tab name</span></a></li>
  •  If you want to make any tab drop down than add the code like this:
<ul>
         <li class='has-sub'><a href='your-link'><span>your tab name</span></a>
            <ul>
               <li><a href='your-link'><span>your tab name</span></a></li>
               <li class='last'><a href='your-link'><span>your tab name</span></a></li>
            </ul>
         </li></ul>

 Last words:

This drop down menu credit goes to css menu maker and if you like this menu so tell me via your comments.

Share This Post

    Share to Facebook Share to Twitter Share to Google+ Share to Stumble Upon Share to delicious Share to Blogger Share to Technorati Share to Email view more services

Do you Like this Article?

rss twitter facebook
Subscribe us and get daily updates directly to your email inbox.
We will not share you email with anyone so you don't have to worry.

No comments:

Post a Comment

Subscribe this blog and get daily this blog articles to your email.

Subscribe us

Google+