April 26, 2013

How To add an awesome DROP DOWN MENU BAR

00:35 Posted by Durga swaroop Perla , , No comments
      Every body want to have their blog good looking. Drop down menu's are one of the very essential elements in this. These are very important because the first thing a user looks on your blog is the menu's. A Good and Beautiful Menu gives a good first impression for the viewer and makes him to come back to your blog again. So, here in this article we will show you how to add a beautiful and awesome looking drop down menu.Read the instructions carefully and add this Menu to your blog. Don't forget to share this article with your friends from the social tab on top.


Steps to Add Drop down menu to your blog!


1)Open Your Blogger Dash Board and click on the 'TEMPLATE' button







2)Now,Click on 'EDIT HTML' button beside 'Customize'



3)Now,Click on 'JUMP TO WIDGET' in the top
                         \
                           

4)Click on Header and find </header> and paste the following code above it.
<div id='DSP'>

<ul>

   <li><a href='#'><span>Home</span></a></li>

   <li class='has-sub '><a href='#'><span>Menu1</span></a>

      <ul>

         <li class='has-sub '><a href='#'><span>Sub Menu1</span></a>

            <ul>

                <li><a href='#'><span>Sub-Sub Menu1</span></a></li>

                <li><a href='#'><span>Sub-Sub Menu2</span></a></li>

            </ul>

        </li>

         <li><a href='#'><span>ub Menu2 </span></a></li>

       </ul>



        <li class='has-sub '><a href='#'><span>Menu3</span></a>

            <ul>

               <li><a href='#'><span>submenu1</span></a></li>

               <li><a href='#'><span>submenu2</span></a></li>

            </ul>

        </li>

         </ul>

</div>


5) If you want to another menu just copy and paste the Menu1 line and you will get a new menu. You can also add another Sub menu or a sub-sub menu using the above code. Replace the # with your links to which that menu should take you to.

6)Now search for the following piece of code in your html.

                      ]]></b:skin>
7)Now, just above this code, copy and paste the following code.


/*------SWAROOP THE GREAT Drop down menu------*/

#DSP ul,

#DSP li,

#DSP span,

#DSP a {

  margin: 0;

  padding: 0;

  position: relative;

}

#DSP {

  margin-left: 175px;

  width: 960px;

  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: -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;

}

#DSP:after,

>#DSP ul:after {

  content: '';

  display: block;

  clear: both;

}

#DSP a {

  background: #141414;

  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: Verdana,Helvetica, Arial, sans-serif;

  font-size: 15px;

  line-height: 49px;

  padding: 0 20px;

  text-decoration: none;

}

#DSP ul {

  list-style: none;

}

#DSP > ul {

  float: left;

}

#DSP > ul > li {

  float: left;

}

#DSP > 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;
}
#DSP > 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;
}
#DSP > 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;
}
#DSP > 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: -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%);
}
#DSP > ul > li:hover > a {
  background: #070707;
  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;
}
#DSP .has-sub {
  z-index: 1;
}
#DSP .has-sub:hover > ul {
  display: block;
}
#DSP .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#DSP .has-sub ul li {
  *margin-bottom: -1px;
}
#DSP .has-sub ul li a {
  background: #0fa1e0;
  border-bottom: 1px dotted #6fc7ec;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
}
#DSP .has-sub ul li:hover a {
  background: #0c7fb0;
}
#DSP .has-sub .has-sub:hover > ul {
  display: block;
}
#DSP .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#DSP .has-sub .has-sub ul li a {
  background: #0c7fb0;
  border-bottom: 1px dotted #6db2d0;
}
#DSP .has-sub .has-sub ul li a:hover {
  background: #095c80;
  }
/*------SWAROOP THE GREAT Drop down menu------*/
8) To make changes in code section highlighted in yellow to get desired properties.

  • Change the numbers after the #, eg.,#32323  and you can have new backgrounds to your menu bar    
9) Click 'Save template' and open your blog and hopefully you'll have a cool Menu bar in the top.


      Have a Nice day & Thanks for visiting our blog. If you are facing any problems please comment below and we'll help you as soon as possible.

If you found this article useful, recommend this blog to your friends and share about this on your social media, So, that we can serve a wider range of audience. :)


0 comments:

Post a Comment

Please Enter your comment here......