Multi-level menubar for blogger with javascript

 100 % working - can't afford demo

In this article we are about to see how to install a java script based menu bar in your blogger template. This menu has three levels and designed along with css3.

Please follow the steps given below with at-most concentration..

Step 1: Save your Template before you try something, it will help you when something goes wrong with your editing.

Step 2:  step 2: goto >> dashboard >> Design>> Edit HTML >> search for ]]></b:Skin> and paste this code above it

ul.menunew {font-family:Verdana, Arial, Helvetica, sans-serif;list-style:none; margin:0; padding:0}
ul.menunew * {margin:0; padding:0}
ul.menunew a {display:block; color:#000; text-decoration:none}
ul.menunew li {position:relative; float:left; margin-right:2px}
ul.menunew ul {position:absolute; top:26px; left:0; background:#d1d1d1; display:none; opacity:0; list-style:none}
ul.menunew ul li {position:relative; border:1px solid #aaa; border-top:none; width:148px; margin:0}
ul.menunew ul li a {display:block; padding:3px 7px 5px; background-color:#d1d1d1}
ul.menunew ul li a:hover {background-color:#c5c5c5}
ul.menunew ul ul {left:148px; top:-1px}
ul.menunew .menulink {border:1px solid #aaa; padding:5px 7px 7px; font-weight:bold; background:url(>http://3.bp.blogspot.com/_4fVBL4fjrFI/SbezNy2ao1I/AAAAAAAACuU/JqDnhT2GDe4/s1600/header.gif); width:134px /*width:auto*/}
ul.menunew .menulink:hover, ul.menunew .menuhover {background:url(http://2.bp.blogspot.com/_4fVBL4fjrFI/SbezPOVoJ2I/AAAAAAAACuc/mplUEobDZlw/s1600/header_over.gif)}
ul.menunew .sub {background:#d1d1d1 url(http://1.bp.blogspot.com/_4fVBL4fjrFI/SbezNihl_uI/AAAAAAAACuM/cFp8PsqbyhQ/s1600/arrow.gif) 136px 8px no-repeat}
ul.menunew .topline {border-top:1px solid #aaa}

step 3: now search for</head> and paste this code above it

<script type="text/javascript" src="http://www.yourjavascript.com/02036191410/DDM_script.js"></script>

Step 4: After saving it , Goto >> dashboard >> Design >> Page Elements >> Add a Gadget >> Html/javascript >> and paste this code and save it.

<!--Multi Dropdown Edit by wierdwalker start-->   
<ul class="menunew" id="menu">    
<li><a href="#" class="menulink">Dropdown 1</a>    
      <ul>     
       <li><a href="#">Dropdown 1.1</a></li>      
       <li>      
       <a href="#" class="sub">Dropdown 1.2</a>    
             <ul>     
             <li class="topline"><a href="#">Dropdown 1.2.1</a></li>      
             <li><a href="#">Dropdown 1.2.2</a></li>      
             <li><a href="#">Dropdown 1.2.3</a></li>      
             <li><a href="#">Dropdown 1.2.4</a></li>      
             <li><a href="#">Dropdown 1.2.5</a></li>      
             </ul>      
              </li>    
         <li>     
         <a href="#" class="sub">Dropdown 1.3</a>    
             <ul>     
             <li class="topline"><a href="#">Dropdown 1.3.1</a></li>      
             <li><a href="#">Dropdown 1.3.2</a></li>      
             <li>      
             <a href="#" class="sub">Dropdown 1.3.3</a>    
                   <ul>     
                   <li class="topline"><a href="#">Dropdown 1.3.3.1</a></li>      
                   <li><a href="#">Dropdown 1.3.3.2</a></li>      
                    <li><a href="#">Dropdown 1.3.3.3</a></li>      
                    <li><a href="#">Dropdown 1.3.3.4</a></li>      
                    <li><a href="#">Dropdown 1.3.3.5</a></li>      
                    <li><a href="#">Dropdown 1.3.3.6</a></li>      
                    </ul>    
             </li>     
              <li><a href="#">Dropdown 1.3.4</a></li>      
             </ul>    
         </li>     
          <li><a href="#">Dropdown 1.4</a></li>      
          <li><a href="#">Dropdown 1.5</a></li>      
         </ul>    
</li> 



<li><a href="http://wierdwalker.com/" class="menulink">blogger tricks</a></li> 



<li>    
<a href="#" class="menulink">Dropdown 2</a>    
     <ul>     
      <li><a href="#">Dropdown 2.1</a></li>      
      <li>      
      <a href="#" class="sub">Dropdown 2.2</a>    
            <ul>     
            <li class="topline"><a href="#">Dropdown 2.2.1</a></li>      
            <li><a href="#">Dropdown 2.2.2</a></li>      
            <li><a href="#">Dropdown 2.2.3</a></li>      
            </ul>    
      </li>     
      </ul>    
</li>



<li>       
<a href="#" class="menulink">Dropdown 3</a>    
      <ul>     
      <li><a href="#">Dropdown 3.1</a></li>      
      <li><a href="#">Dropdown 3.2</a></li>      
      <li><a href="#">Dropdown 3.3</a></li>      
      <li><a href="#">Dropdown 3.4</a></li>      
      <li><a href="#">Dropdown 3.5</a></li>      
      <li>      
      <a href="#" class="sub">Dropdown 3.6</a>    
           <ul>     
           <li class="topline"><a href="#">Dropdown 3.6.1</a></li>      
           <li><a href="#">Dropdown 3.6.2</a></li>      
           </ul>    
      </li>    
      <li><a href="#">Dropdown 3.7</a></li>     
      <li><a href="#">Dropdown 3.8</a></li>      
      <li><a href="#">Dropdown 3.9</a></li>      
      <li><a href="#">Dropdown 3.10</a></li>      
      </ul>    
</li>


</ul>    
<script type="text/javascript">    
var menu=new menu.dd("menu");    
menu.init("menu","menuhover");    
</script> 
<!--Multi Dropdown stop-->

or

simply Goto >> design >> edit html >> and search

<div id = 'header-wrapper' >

.........
........

</div>

paste the code here

<div id = outer-wrapper' >

............
............

 </div>

Step 5: customize / edit the links and save it..

Thats it..