Ya Sudahlah!: Menu Drop Down

Jumat, Juni 11, 2010

Menu Drop Down

mau membuat tampilan menu seperti gambar di atas!. menu disamping adalah menus drop down yang merupakan style CSS guna mempercantik tampilan menu pada web kita !!. ciee haizz lebay!!. Langsung ja dah!!. ini mudah kok!.!tinggal copas aja!! alias copy paste ni script nya!! :P

<style type="text/css">
.sidebarmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: bold 13px Verdana;
width: 180px; /* Main Menu Item widths */
border-bottom: 1px solid #ccc;
}
 
.sidebarmenu ul li{
position: relative;
}

.sidebarmenu ul li a{
display: block;
overflow: auto;
color: white;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: #012D58; /*background of tabs (default state)*/
}

.sidebarmenu ul li a:visited{
color: white;
}

.sidebarmenu ul li a:hover{
background-color: black;
}

/*Sub level menu items */
.sidebarmenu ul li ul{
position: absolute;
width: 170px; /*Sub Menu Items width */
top: 0;
visibility: hidden;
}

.sidebarmenu a.subfolderstyle{
background: url(right.gif) no-repeat 97% 50%;
}

 
/* Holly Hack for IE \*/
* html .sidebarmenu ul li { float: left; height: 1%; }
* html .sidebarmenu ul li a { height: 1%; }
/* End */
</style>

<script type="text/javascript">
//Nested Side Bar Menu (Mar 20th, 09)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas

function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
  if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
   ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
  else //else if this is a sub level submenu (ul)
    ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
  for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
  ultags[t].style.visibility="visible"
  ultags[t].style.display="none"
  }
  }
}

if (window.addEventListener)
window.addEventListener("load", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)
</script></blockquote>

<div class="sidebarmenu">

<ul id="sidebarmenu1">
<li><a href="http://www.blogger.com/post-create.g?blogID=7618372848293321112#">Item 1</a></li>
<li><a href="http://www.blogger.com/post-create.g?blogID=7618372848293321112#">Item 2</a></li>
<li><a href="http://www.blogger.com/post-create.g?blogID=7618372848293321112#">Folder 1</a>
 

<ul> 
<li><a href="http://www.blogger.com/post-create.g?blogID=7618372848293321112#">Sub Item 1.1</a></li>
 
<li><a href="http://www.blogger.com/post-create.g?blogID=7618372848293321112#">Sub Item 1.2</a></li>
  </ul>
</li>
<li><a href="http://www.blogger.com/post-create.g?blogID=7618372848293321112#">Item 3</a></li>
<li><a href="http://www.blogger.com/post-create.g?blogID=7618372848293321112#">Folder 2</a>
 

<ul> 
<li><a href="http://www.blogger.com/post-create.g?blogID=7618372848293321112#">Sub Item 2.1</a></li>
 
<li><a href="http://www.blogger.com/post-create.g?blogID=7618372848293321112#">Folder 2.1</a>
   

<ul>   
<li><a href="http://www.blogger.com/post-create.g?blogID=7618372848293321112#">Sub Item 2.1.1</a></li>
   
<li><a href="http://www.blogger.com/post-create.g?blogID=7618372848293321112#">Sub Item 2.1.2</a></li>
   
<li><a href="http://www.blogger.com/post-create.g?blogID=7618372848293321112#">Sub Item 2.1.3</a></li>
   
<li><a href="http://www.blogger.com/post-create.g?blogID=7618372848293321112#">Sub Item 2.1.4</a></li>
    </ul>

  </li>
</ul>
</li>
<li><a href="http://www.blogger.com/post-create.g?blogID=7618372848293321112#">Item 4</a></li>
</ul>
</div>

hehe.. gampangkan