Neko

Függöleges menü 14.

• JavaScript Kit
• Free JavaScripts
• JavaScript Tutorials
• References
  • JavaScript Reference
  • DOM Reference
  • CSS Reference
• DHTML/ CSS Tutorials
• web Design Tutorials
• Helpful Resources
  • Dynamic HTML
  • Coding Forums
  • CSS Drive
  • CSS Library
  • Image Optimizer
  • Favicon Generator

Kód

html

<ul id="verticalmenu" class="glossymenu">
<li><a href="http://www.javascriptkit.com/">JavaScript Kit</a></li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >Free JavaScripts</a></li>
<li><a href="http://www.javascriptkit.com/">JavaScript Tutorials</a></li>
<li><a href="#">References</a>
    <ul>
    <li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
    <li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
    <li><a href="http://www.javascriptkit.com/dhtmltutors/cssreference.shtml">CSS Reference</a></li>
    </ul>
</li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >DHTML/ CSS Tutorials</a></li>
<li><a href="http://www.javascriptkit.com/howto/">web Design Tutorials</a></li>
<li><a href="#" >Helpful Resources</a>
    <ul>
    <li><a href="http://www.dynamicdrive.com">Dynamic HTML</a></li>
    <li><a href="http://www.codingforums.com">Coding Forums</a></li>
    <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
    <li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>
    <li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a></li>
    <li><a href="http://tools.dynamicdrive.com/favicon/">Favicon Generator</a></li>
    </ul>
</li>
</ul>

css

<style type="text/css">
.glossymenu, .glossymenu li ul{ /* a menü szélessége, kerete legyen-e, stb. */
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 150px;
    border: 0px solid black;
    font-family: Tahoma;
    font-size: 10px;
}

.glossymenu li a:hover{ /* a menü, ha ráviszed az egeret */
    color: #999999;
}

.glossymenu li{
position: relative;
}

.glossymenu li a{ /* a menü link színe, stílusa, stb */
    color: #000000;
    display: block;
    width: auto;
    padding: 2px 0;
    padding-left: 10px;
    text-decoration: none;
    font-family: Tahoma;
    font-size: 10px;
    font-weight: bold;
}

.glossymenu li ul{ /*SUB MENU STYLE*/
    position: absolute;
    width: 150px;
    left: 0;
    top: 0;
    display: none;
}

.glossymenu li ul li{
float: left;
}

.glossymenu li ul a{ /* az oldalsó menü link színe */
    width: 150px;
    color: #FF0000;
}

.glossymenu .arrowdiv{
    position: absolute;
    right: 2px;
    background-color: #999999;
}

.glossymenu li a:visited, .glossymenu li a:active{
    color: #999999;
}

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

javascript

<script type="text/javascript">

var menuids=new Array("verticalmenu") //Enter id(s) of UL menus, separated by commas
var submenuoffset=-2 //Offset of submenus from main menu. Default is -2 pixels.

function createcssmenu(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    var spanref=document.createElement("span")
        spanref.className="arrowdiv"
        spanref.innerHTML="&nbsp;&nbsp;"
        ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.left=this.parentNode.offsetWidth+submenuoffset+"px"
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
  }
}
if (window.addEventListener)
window.addEventListener("load", createcssmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", createcssmenu)

</script>

a kódokat egyszerű modulban kell beilleszteni forráskód nézetben.