- vertical-menu

vertical-menu

Nested Side Bar Menu

Demo:

Css Kod:

<style type="text/css">  /*Credits: Dynamic Drive CSS Library */ /*URL: http://www.dynamicdrive.com/style/ */  .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; }  /* Top level menu links style */ .sidebarmenu ul li a{ display: block; overflow: auto; /*force hasLayout in IE7 */ 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>

Html Kod:

Panels Vertical Menu

Demo:

Css Kod:

<style type="text/css">  /*Credits: Dynamic Drive CSS Library */ /*URL: http://www.dynamicdrive.com/style/ */  .sexypanels{ list-style-type: none; margin: 0; padding: 0; width: 180px; /* width of menu */ }  .sexypanels li{ border-bottom: 1px solid white; /* white border beneath each menu item */ }  .sexypanels li a{ background: #333 url(http://www.dynamicdrive.com/cssexamples/media/sexypanelright.gif) no-repeat right top; /*color of menu by default*/ font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana; display: block; color: white; width: auto; padding: 5px 0; /* Vertical (top/bottom) padding for each menu link */ text-indent: 8px; text-decoration: none; border-bottom: 1px solid black; /*bottom border of menu link. Should be equal or darker to link's bgcolor*/ }  .sexypanels li a:visited, .sexypanels li a:active{ color: white; }  .sexypanels li a:hover{ background-color: black; /*color of menu onMouseover*/ color: white; border-bottom: 1px solid black; /*bottom border of menu link during hover. Should be equal or darker to link's hover's bgcolor*/ }   </style>        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)

Html Kod:

Arrow Bullet List Menu

Demo:

CSS Library

CSS Drive

Css Kod:

<style type="text/css">  /*Credits: Dynamic Drive CSS Library */ /*URL: http://www.dynamicdrive.com/style/ */  .arrowlistmenu{ width: 180px; /*width of menu*/ }  .arrowlistmenu .headerbar{ font: bold 14px Arial; color: white; background: black url(http://www.dynamicdrive.com/cssexamples/media/titlebar.png) repeat-x center left; margin-bottom: 10px; /*bottom spacing between header and rest of content*/ text-transform: uppercase; padding: 4px 0 4px 10px; /*header text is indented 10px*/ }  .arrowlistmenu ul{ list-style-type: none; margin: 0; padding: 0; margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/ }  .arrowlistmenu ul li{ padding-bottom: 2px; /*bottom spacing between menu items*/ }  .arrowlistmenu ul li a{ color: #A70303; background: url(http://www.dynamicdrive.com/cssexamples/media/arrowbullet.png) no-repeat center left; /*custom bullet list image*/ display: block; padding: 2px 0; padding-left: 19px; /*link text is indented 19px*/ text-decoration: none; font-weight: bold; border-bottom: 1px solid #dadada; font-size: 90%; }  .arrowlistmenu ul li a:visited{ color: #A70303; }  .arrowlistmenu ul li a:hover{ /*hover state CSS*/ color: #A70303; background-color: #F3F3F3; }  </style>

Html Kod:

<div class="arrowlistmenu">  <h3 class="headerbar">CSS Library</h3> <ul> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/all/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/all/">Browse All</a></li> </ul>  <h3 class="headerbar">CSS Drive</h3> <ul> <li><a href="http://www.cssdrive.com" _fcksavedurl="http://www.cssdrive.com">CSS Gallery</a></li> <li><a href="http://www.cssdrive.com/index.php/menudesigns/" _fcksavedurl="http://www.cssdrive.com/index.php/menudesigns/">Menu Gallery</a></li> <li><a href="http://www.cssdrive.com/index.php/news/" _fcksavedurl="http://www.cssdrive.com/index.php/news/">Web Design News</a></li> <li><a href="http://www.cssdrive.com/index.php/examples/" _fcksavedurl="http://www.cssdrive.com/index.php/examples/">CSS Examples</a></li> <li><a href="http://www.cssdrive.com/index.php/main/csscompressor/" _fcksavedurl="http://www.cssdrive.com/index.php/main/csscompressor/">CSS Compressor</a></li> <li><a href="http://www.dynamicdrive.com/forums/forumdisplay.php?f=6" _fcksavedurl="http://www.dynamicdrive.com/forums/forumdisplay.php?f=6">CSS Forums</a></li> </ul>  </div>

Glossy Vertical Menu

Demo:

Css Kod:

Html Kod:

28819 ziyaretçi (57034 klik) burdaydı

Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?

Ücretsiz kaydol