Blogger Acilir Menu Eklentisi ( Drop Down )

Blogger Drop Down Acilir Menü Eklentisi

Bu eklentimizle , blogunuzda açılır bir menüye sahip olacaksınız , Blogunuzda hoş bir menü isterseniz bu eklenti işinize yarayabilir.

Resimden ön izlemesini yapabilir yada bu konunun altından Drop Down Acilir Menü Eklentisi'nin demosunu görebilirsiniz..

Aşağıdaki kodu blogunuza , yerleşim >> gadget ekle >> HTML/JavaScript olarak kaydedin , Bu gadgeti sayfanın üstüne ekleyin , yada en azından konu üstündeki gadget yerine..

<script src='http://yourjavascript.com/102231914611/dropdown.js' type='text/javascript'></script> 
<style> 
/* ######### Drop Down Menu by www.MyBloggerTricks.com ######### */


.ddsubmenustyle, .ddsubmenustyle div{ /*topmost and sub DIVs, respectively*/ 
font: normal 13px Verdana; 
margin: 0; 
padding: 0; 
position: absolute; 
left: 0; 
top: 0; 
list-style-type: none; 
background: white; 
border: 1px solid black; 
border-bottom-width: 0; 
visibility: hidden; 
z-index: 100; 
}

.ddsubmenustyle ul{ 
margin: 0; 
padding: 0; 
position: absolute; 
left: 0; 
top: 0; 
list-style-type: none; 
border: 0px none; 
}

.ddsubmenustyle li a{ 
display: block; 
width: 170px; /*width of menu (not including side paddings)*/ 
color: black; 
background-color: lightyellow; 
text-decoration: none; 
padding: 4px 5px; 
border-bottom: 1px solid black; 
}

* html .ddsubmenustyle li{ /*IE6 CSS hack*/ 
display: inline-block; 
width: 170px; /*width of menu (include side paddings of LI A*/ 
}

.ddsubmenustyle li a:hover{ 
background-color: black; 
color: white; 
}

.downarrowpointer{ /*CSS for "down" arrow image added to top menu items*/ 
padding-left: 4px; 
border: 0; 
}

.rightarrowpointer{ /*CSS for "right" arrow image added to drop down menu items*/ 
position: absolute; 
padding-top: 3px; 
left: 100px; 
border: 0; 
}

.ddiframeshim{ 
position: absolute; 
z-index: 500; 
background: transparent; 
border-width: 0; 
width: 0; 
height: 0; 
display: block; 
}


/* ######### Black Strip Main Menu Bar CSS ######### */

.mattblackmenu ul{ 
margin: 0; 
padding: 0; 
font: bold 12px Verdana; 
list-style-type: none; 
border-bottom: 1px solid gray; 
background: #414141; overflow: hidden; 
width: 100%; 
}

.mattblackmenu li{ 
display: inline; 
margin: 0; 
}

.mattblackmenu li a{ 
float: left; 
display: block; 
text-decoration: none; 
margin: 0; 
padding: 6px 8px; /*padding inside each tab*/ 
border-right: 1px solid white; /*right divider between tabs*/ 
color: white; 
background: #414141; 
}

.mattblackmenu li a:visited{ 
color: white; 
}

.mattblackmenu li a:hover{ 
background: black; /*background of tabs for hover state */ 
}

.mattblackmenu a.selected{ 
background: black; /*background of tab with "selected" class assigned to its LI */ 
}

</style>




<div id="ddtopmenubar" class="mattblackmenu"> 
<ul> 
<li><a href="#">LINK1</a></li> 
<li><a href="#" rel="ddsubmenu1">LINK2</a></li> 
<li><a href="#" rel="ddsubmenu2">LINK3</a></li> 
<li><a href="#">Link4</a></li> 
<li><a href="#" rel="ddsubmenu3">LINK5</a></li> 
</ul> 
</div>

<script type="text/javascript"> 
ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar") 
</script>


<ul class='ddsubmenustyle' id='ddsubmenu1'> 
<li><a href='#'>LINK2 ITEM 1</a></li> 
<li><a href='#'>LINK2 ITEM 2</a> 
  <ul> 
  <li><a href='#'>LINK2 ITEM 2.1</a></li> 
  <li><a href='#'>LINK2 ITEM 2.2</a></li> 
  </ul>

</li> 
<li><a href='#'>LINK2 ITEM 3</a> 
  <ul> 
  <li><a href='#'>LINK2 ITEM 3.1</a></li> 

    </ul>

</li> 

<li><a href='#'>LINK2 ITEM 4</a></li>

</ul>


<ul class='ddsubmenustyle' id='ddsubmenu2'> 
<li><a href='#'>LINK3 ITEM 1</a></li> 
<li><a href='#'>LINK3 ITEM 2</a></li> 
<li><a href='#'>LINK3 ITEM 3</a> 
  <ul> 
  <li><a href='#'>LINK3 ITEM 3.1</a></li>

<li><a href='#'>LINK3 ITEM 3.2</a></li> 
  <li><a href='#'>LINK3 ITEM 3.3</a></li> 
  <li><a href='#'>LINK3 ITEM 3.4</a></li> 
  </ul> 
</li> 
<li><a href='#'>LINK3 ITEM 4</a></li> 
<li><a href='#'>LINK3 ITEM 5</a> 
  <ul>

  <li><a href='#'>LINK3 ITEM 5.1</a></li> 
  <li><a href='#'>LINK3 ITEM 5.2</a> 
    <ul> 
    <li><a href='#'>LINK3 ITEM 5.2 1</a></li> 
    <li><a href='#'>LINK3 ITEM 5.2 2</a></li> 
    <li><a href='#'>LINK3 ITEM 5.2 3</a></li>

    </ul> 
  </li> 
    </ul> 
</li> 
<li><a href='#'>LINK3 ITEM 6</a></li> 
</ul>




<ul class='ddsubmenustyle' id='ddsubmenu3'> 
<li><a href='#'>LINK5 ITEM 1</a></li> 
<li><a href='#'>LINK5 ITEM 2</a></li>

<li><a href='#'>LINK5 ITEM 3</a></li> 
<li><a href='#'>LINK5 ITEM 4</a></li> 
<li><a href='#'>LINK5 ITEM 5</a></li> 
</ul>

Yukarıdaki renkli ve kalın olarak yazılmış yerleri, size uygun şekilde düzenleyerek özelleştirebilirsiniz..yada istemediğiniz yerkeri silerek kaldırabilirsiniz..Demosu için TIKLAYIN..