How to add fancy drop down menu to blogg(Video)

Unknown | 02:06 | | |

Pin It Now!
If you are not enjoying with your menu bar given by blogger then you are free to change it .here way2bloggerz giving you detail how you can add a fancy drop down menu to your blogg









PREVIEW


Steps

1. backup your templet before making any change to your css code
2. Now go to layout-->add a gadget -->chosse HTML/Javascript leave title blank now paste the below code in it


<div class="w2bz">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" id="current">TAB1</a>
<ul>
<li><a href="#">SUBTAB1.1</a></li>
<li><a href="#">SUBTAB1.2</a></li>
<li><a href="#">SUBTAB1.3</a></li>
<li><a href="#">SUBTAB1.4</a></li>
</ul>
</li>
<li><a href="#">TAB2</a>
<ul>
<li><a href="#">SUBTAB2.1</a></li>
<li><a href="#">SUBTAB2.2</a></li>
<li><a href="#">SUBTAB2.3</a></li>
<li><a href="#">SUBTAB2.4</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
NOTE::
Replace '#' with your link url

3. Now go to Templet -->Edit HTML
    and find the code  
    ]]></bskin>

   Now paste the code given below before ]]></bskin>



.w2bz
{border:none;
 border:0px;
 margin:0px;
 padding:0px;
 font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
 font-size:14px;
 font-weight:bold;
 }
.w2bz ul{
 background:#333333;
 height:35px;
 list-style:none;
 margin:0;
 padding:0;
 }
 .w2bz li{
  float:left;
  padding:0px;
  }
 .w2bz li a{
  background:#333333 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge1x1CUJkZTgm2A8pxaftXAudFxgT6Cd-T5Sepi4hAO7sTIOtuq_5dFX21h_Fnolhu9tZQSxcqk_at9QMARli_2nIIqCVcB6TOqmr-J_XAyiPL3F8MpsmlxCaLi0CPtvHBBXXITc57cY0/h120/seperator.gif") bottom right no-repeat;
  color:#cccccc;
  display:block;
  font-weight:normal;
  line-height:35px;
  margin:0px;
  padding:0px 25px;
  text-align:center;
  text-decoration:none;
  }
  .w2bz li a:hover, .w2bz ul li:hover a{
   background: #2580a2 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil-1AgYmxsw33q9pGmu36kwuGKa5h71nnrk5jaLla9YH2GYi6VUQXal9Vp4XI7FfaVwYC1ZJjzsDFMPy-WTasE0FSH8zXhHMK66kv6Frt_zCmw3Yqm0nhMk8_8_dIkQgdezqySNQyjvQI/h120/hover.gif") bottom center no-repeat;
   color:#FFFFFF;
   text-decoration:none;
   }
 .w2bz li ul{
  background:#333333;
  display:none;
  height:auto;
  padding:0px;
  margin:0px;
  border:0px;
  position:absolute;
  width:225px;
  z-index:200;
  /*top:1em;
  /*left:0;*/
  }
 .w2bz li:hover ul{
  display:block;
  
  }
 .w2bz li li {
  background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoGShJkRpQ7g_dmV3Tf8uT_CFr1jnNjtP5CYdijuAreFeqFF2WBTIz2GFUIkc5et_ijdun1ISE3D2gReyBXFV4UtHzgOkLYjfFfztrXbHCeSy6TDQi6MzYWmnpR8LzMAw4ESQ28Sr-EcY/h120/sub_sep.gif') bottom left no-repeat;
  display:block;
  float:none;
  margin:0px;
  padding:0px;
  width:225px;
  }
 .w2bz li:hover li a{
  background:none;
  
  }
 .w2bz li ul a{
  display:block;
  height:35px;
  font-size:12px;
  font-style:normal;
  margin:0px;
  padding:0px 10px 0px 15px;
  text-align:left;
  }
  .w2bz li ul a:hover, .w2bz li ul li:hover a{
   background:#2580a2 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFXN_q_4qNsHfGBbw9Rr_H1TlL_D2s-b6nK3sJjT_qOwMprYCZcDWrUYgfuCbRAl-dmNpXg_-jCghMV0ABRiiwVe8-MuiSR_yE1rB5OMhTxnUXP86quJFsev3OGRWg5_yzd-d5j_JZO3U/h120/hover_sub.gif') center left no-repeat;
   border:0px;
   color:#ffffff;
   text-decoration:none;
   }
 .w2bz p{
  clear:left;
  } 

  
4. now find /*tabs and delete the code below it


you are done now


                        V I D E O




Pin It Now!

2 comments:

  1. i tried to add it but it does not work the menu comes one after another, below each other and not horizontal plzz help!!

    ReplyDelete
  2. So now that you have these tabs how do you edit the content within the dropped down tabs?

    ReplyDelete