Tuesday, August 12, 2008

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!

Labels:

Vertical CSS Menus - Blue Blocks

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

Blue Blocks 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">

#blueblock{
width: 180px;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
font-size: 90%;
background-color: #90bade;
color: #333;
}

* html #blueblock{ /*IE 6 only */
w\idth: 147px; /*Box model bug: 180px minus all left and right paddings for #blueblock */
}

#blueblock ul{
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#blueblock li {
border-bottom: 1px solid #90bade;
margin: 0;
}

#blueblock li a{
display: block;
padding: 5px 5px 5px 8px;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}

html>body #blueblock li a{ /*Non IE6 width*/
width: auto;
}

#blueblock li a:hover{
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}


</style>


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

<div id="blueblock">

<div class="menutitle">Socheatk</div>
<ul>
<li><a href="http://www.socheatk.blogspot.com" title="Home">Home</a></li>
<li id="current"><a href="http://socheatk.blogspot.com/2008/06/free-css-navigation-menu-these-eleven_29.html#A1" title="Css">CSS Menu</a></li>
<li><a href="http://socheatk.blogspot.com/2008/06/01.html#A1" title="Literature">Literature</a></li>
<li><a href="http://socheatk.blogspot.com/search/label/Music#A1" title="Music">Music</a></li>
</ul>
<div class="menutitle">Socheatk</div>
<ul>
<li><a href="http://www.socheatk.blogspot.com" title="Home">Home</a></li>
<li id="current"><a href="http://socheatk.blogspot.com/2008/06/free-css-navigation-menu-these-eleven_29.html#A1" title="Css">CSS Menu</a></li>
<li><a href="http://socheatk.blogspot.com/2008/06/01.html#A1" title="Literature">Literature</a></li>
<li><a href="http://socheatk.blogspot.com/search/label/Music#A1" title="Music">Music</a></li>
</ul>
</div>
Done!

Labels:

Vertical CSS Menus - Beve Vertica

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

Beve Vertica 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">

.bevelmenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 180px;
}

.bevelmenu li a{
display: block;
width: 100%;
padding: 2px 4px;
text-decoration: none;
font-weight: bold;
background-color: #FFF2BF;
border: 2px solid #FFF2BF;
text-decoration:none;
}


.bevelmenu li a:hover{
color: black;
background-color: #FFE271;
border-style: outset;
}

html>body .bevelmenu li a:active{ /* Apply mousedown effect (non IE browsers only) */
border-style: inset;
}


</style>


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

<ul class="bevelmenu">

<div class="menutitle">Socheatk</div>
<ul>
<li><a href="http://www.socheatk.blogspot.com" title="Home">Home</a></li>
<li id="current"><a href="http://socheatk.blogspot.com/2008/06/free-css-navigation-menu-these-eleven_29.html#A1" title="Css">CSS Menu</a></li>
<li><a href="http://socheatk.blogspot.com/2008/06/01.html#A1" title="Literature">Literature</a></li>
<li><a href="http://socheatk.blogspot.com/search/label/Music#A1" title="Music">Music</a></li>
</ul>
<div class="menutitle">Socheatk</div>
<ul>
<li><a href="http://www.socheatk.blogspot.com" title="Home">Home</a></li>
<li id="current"><a href="http://socheatk.blogspot.com/2008/06/free-css-navigation-menu-these-eleven_29.html#A1" title="Css">CSS Menu</a></li>
<li><a href="http://socheatk.blogspot.com/2008/06/01.html#A1" title="Literature">Literature</a></li>
<li><a href="http://socheatk.blogspot.com/search/label/Music#A1" title="Music">Music</a></li>
</ul>
</div>
Done!

Labels: