Вертикальное меню с подменю (CSS +Javascript)

1997

Библиотека JAVASCRIPT SE@RCHER

Библиотека javascript SE@RCHER ИЗБРАННЫЕ ПРИМЕРЫ 2013 г. АПРЕЛЬ >>>

HTML ↴

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Вертикальное меню с подменю (CSS +Javascript)</title>
<style type="text/css">
.glossymenu, .glossymenu li ul{list-style-type: none;margin: 0;padding: 0;width: 185px; }
.glossymenu li{position: relative;}
.glossymenu li ul{position: absolute;width: 190px; left: 0;top: 0;display: none;filter:alpha(opacity=100);-moz-opacity:1;}
.glossymenu li a{font: bold 12px Verdana, Helvetica, sans-serif;color: #000;display: block;width: auto;padding: 5px 0;padding-left: 10px;text-decoration: none;}
/*.glossymenu .arrowdiv{position: absolute;right: 2px;background: transparent url(arrow.gif) no-repeat center right;}*/
.glossymenu li a:visited, .glossymenu li a:active{color: #000;}
.glossymenu li a{color:#000;background :#F5F5F5;border: 1px solid gray; border-radius: 4px;margin-bottom:4px;}
.glossymenu li a:hover{color:#FF0000;background :#CCC;}
</style>
<script type="text/javascript">
var menuids=new Array("verticalmenu")
var submenuoffset=-2
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="  "
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>
</head>
<body>
<ul id="verticalmenu" class="glossymenu">
<li><a href="#">Линк 1</a></li>
<li><a href="#">Линк 2</a></li>
<li><a href="#">Линк 3</a></li>
<li><a href="#">Линк 4 ↦</a>
    <ul>
    <li><a href="#">Линк 4-1</a></li>
    <li><a href="#">Линк 4-2</a></li>
    <li><a href="#">Линк 4-3</a></li>
    </ul>
</li>
</ul>
 <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(53156500, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/53156500" style="position:absolute; left:-9999px;" alt="" /></div></noscript> </body>
</html>

HTML ↴

размер Kb

ПРИМЕР ↴

✔ пример в полном окне