Vertical CSS Menus - SuckerTree

Like the last two sets of menus these can be used for commercial or private use. Have fun with all the menus.

SuckerTree Menu

How to install:

1. Login to your Blogger account of course.
សូមចូលក្នុង account របស់អ្នក

2. Go to your HTML Editor on your blogger dashboard.
បន្ទាប់មកចូលក្នុង HTML Editor

3. Tick the Expand Widget Template
ចូរចុចធិចយក ត្រង់ Expand Widget Template
4-Coppy this code into HTML that end of }: like:
លោកអ្នកអាច​ចម្លងកូដនេះ​ទៅដាក់ក្នុង HTML ដែលបញ្ចប់ដោយនិមិត្ត​សញ្ញាបែបនេះ ឧ.

}
past code below here


*CODE*

<style type="text/css"> .suckerdiv ul{ margin: 0; padding: 0; list-style-type: none; width: 160px; /* Width of Menu Items */ border-bottom: 1px solid #ccc; } .suckerdiv ul li{ position: relative; } /*Sub level menu items */ .suckerdiv ul li ul{ position: absolute; width: 170px; /*sub menu width*/ top: 0; visibility: hidden; } /* Sub level menu links style */ .suckerdiv ul li a{ display: block; overflow: auto; /*force hasLayout in IE7 */ color: black; text-decoration: none; background: #fff; padding: 1px 5px; border: 1px solid #ccc; border-bottom: 0; } .suckerdiv ul li a:visited{ color: black; } .suckerdiv ul li a:hover{ background-color: yellow; } .suckerdiv .subfolderstyle{ background: url(http://www.dynamicdrive.com/cssexamples/media/arrow-list.gif) no-repeat center right; } /* Holly Hack for IE \*/ * html .suckerdiv ul li { float: left; height: 1%; } * html .suckerdiv ul li a { height: 1%; } /* End */ </style> <script type="text/javascript"> //SuckerTree Vertical Menu 1.1 (Nov 8th, 06) //By Dynamic Drive: http://www.dynamicdrive.com/style/ var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas function buildsubmenus(){ 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", buildsubmenus, false) else if (window.attachEvent) window.attachEvent("onload", buildsubmenus) </script>

and then Add a Getgat of the sidebar to write in your sidebar widget with Java script like this:
ហើយបន្ទាប់មកចូលទៅសរសេរនៅក្នុង sidebar widget ដោយយកប្រភេទ Java script ហើយចម្លងកូដនេះទៅដាក់៖

<div class="suckerdiv"> <ul id="suckertree1"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Folder 1</a> <ul> <li><a href="#">Sub Item 1.1</a></li> <li><a href="#">Sub Item 1.2</a></li> </ul> </li> <li><a href="#">Item 3</a></li> <li><a href="#">Folder 2</a> <ul> <li><a href="#">Sub Item 2.1</a></li> <li><a href="#">Folder 2.1</a> <ul> <li><a href="#">Sub Item 2.1.1</a></li> <li><a href="#">Sub Item 2.1.2</a></li> <li><a href="#">Sub Item 2.1.3</a></li> <li><a href="#">Sub Item 2.1.4</a></li> </ul> </li> </ul> </li> <li><a href="#">Item 4</a></li> </ul> </div>

Done!

Related Posts by Categories

U want get it? click here | Yul Jet