Вертикално меню добавяне код

Lenor · 23 Февруари 2012

Как трябва да се промени кога, за да може да стане ето така: http://devinrolsen.com/wp-content/uploads/2009/09/fig5.gif Ако е възможно само едно submenu, а не двете както е на снимката.

Код:

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
font-size: 80%;
font-weight: bold;
background: #FFF;
}

h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
padding: 0px 0px 0px 15px;
}

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

img {
border: none;
} 

#menu6 {
width: 155px;
}

#menu6 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu6 li a:link, #menu6 li a:visited {
color: #FFF;
display: block;
background: url(../images/web/menu.gif);
padding: 8px 0 0 10px;
}

#menu6 li a:hover {
color: #FFF;
background: url(../images/web/menu.gif) 0 -32px;
padding: 8px 0 0 10px;
}

Код:

<div id="menu6">
<ul>
<li><a href="#" title="Home" class="menu">Home</a></li></ul></div>

speedley · 25 Февруари 2012

HTML:

<html>
<head>
<style type="text/css"/>
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
font-size: 80%;
font-weight: bold;
background: #FFF;
}

h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
padding: 0px 0px 0px 15px;
}

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

img {
border: none;
}

#menu6 ul li{
position: relative;
}

#menu6 {
width: 100px;
}

#menu6 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu6 li a:link, #menu6 li a:visited {
color: #FFF;
display: block;
background: url(../images/web/menu.gif);
padding: 8px 0 0 10px;
}

#menu6 li a:hover {
color: #FFF;
background: url(../images/web/menu.gif) 0 -32px;
padding: 8px 0 0 10px;
}	

 #menu6 ul li ul{
position: absolute;
width: 170px; /*Sub Menu Items width */
top: 0;
visibility: hidden;
}

#menu6 a.subfolderstyle{
background: url(../images/web/menu.gif) no-repeat 97% 50%;
}

	</style>
<script type="text/javascript">

var menuids=["menu61"] 

function initmenu6(){
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])
   ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" 
  else 
    ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" 
    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--){ 
  ultags[t].style.visibility="visible"
  ultags[t].style.display="none"
  }
  }
}

if (window.addEventListener)
window.addEventListener("load", initmenu6, false)
else if (window.attachEvent)
window.attachEvent("onload", initmenu6)
</script>

</head>
<body>
<div id="menu6"/>
<ul id="menu61"/>
<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>
  </li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
</div>	
</body>
</html>

Ето ти го, само си намести ширината съвместно картинките

Вертикално меню добавяне код

Lenor

Registered

speedley

Registered