CSS Meny problem.

3 svar · 385 visningar · startad av UrMe 5 nov. 2004

UrMeMedlem sedan apr. 2001762 inlägg

Frågan5 nov. 2004 08:11#1

Hej,

Hittade nån meny som jag försöker modifiera nu.. är inte 100% säker på CSS taggarna etc ännu :)

Men varför blir det så stort mellanrum på undermenyerna i detta script? Och även om det är några andra fel som ni hittar så korrigera dem gärna :)

<html> 
<head> 

	<script type="text/javascript">
	var curLyr=false;
	function toggle(elm)
	{
		obj=document.getElementById(elm);
		if(curLyr){ curLyr.style.display='none'; curLyr=obj; }
		if (obj.style.display == 'block')
		{
			obj.style.display = 'none';
		}
		else
		{
			obj.style.display = 'block';
		}
	}
	</script>
	<style type="text/css">
	.sub { display: none; padding:0 0 6px 6px; }
	.cat { display: block; }

	ul#menu1 {
	list-style: none;
	width:10em;
	margin:0;
	padding:0;
	}

	ul#menu1 li.rot {
	padding:0;
	margin:0.5em;
	border-color:#000;
	border:1px solid;
	background-color:#00F;
	}

	ul#menu1 li.rot a {
	background-color:#00F;
	color:#FFF;
	display:block;
	text-decoration: none;
	margin:0;
	padding:0;
	}
	
	ul#menu1 li.rot a:hover {
	background-color:#0FF;
	}

	ol.menu_sub1 {
	list-style: none;
	margin:0;
	padding:0;
	}

	ol.menu_sub1 li.subm {
	list-style: none;
	padding:0;
	margin:0;
	}

	ol.menu_sub1 li.subm a {
	background-color:#00F;
	color:#FFF;
	display:block;
	text-decoration: none;
	margin:0;
	padding:0;
	}
	</style>
</head>
<body>

<ul id="menu1">

<li class="rot"><a href="javascript:void(toggle('sub1'));" class="cat">Meny 1</a></li>
<div id="sub1" class="sub">
<ol class="menu_sub1">
	<li class="subm"><a href="1.html">Sub 1-1</a></li>
	<li class="subm"><a href="1.html">Sub 1-2</a></li>
	<li class="subm"><a href="1.html">Sub 1-3</a></li>
</ol>
</div>

<li class="rot"><a href="javascript:void(toggle('sub2'));" class="cat">Meny 2</a></li>
<div id="sub2" class="sub">
<ol class="menu_sub1">
	<li class="subm"><a href="1.html">Sub 2-1</a></li>
	<li class="subm"><a href="1.html">Sub 2-2</a></li>
</ol>
</div>

<li class="rot"><a href="javascript:void(toggle('sub3'));" class="cat">Meny 3</a></li>
<div id="sub3" class="sub">
<ol class="menu_sub1">
	<li class="subm"><a href="1.html">Sub 3-1</a></li>
	<li class="subm"><a href="1.html">Sub 3-2</a></li>
	<li class="subm"><a href="1.html">Sub 3-3</a></li>
	<li class="subm"><a href="1.html">Sub 3-4</a></li>
</ol>
</div>

<li class="rot"><a href="javascript:void(toggle('sub4'));" class="cat">Meny 4</a></li>
<div id="sub4" class="sub">
<ol class="menu_sub1">
	<li class="subm"><a href="1.html">Sub 4-1</a></li>
	<li class="subm"><a href="1.html">Sub 4-2</a></li>
</ol>
</div>
</ul>
</body> 
</html>

CheguelinMedlem sedan juli 2003303 inlägg

5 nov. 2004 09:18#2

Jag gjorde om din meny ordentligt. Det fanns t.ex. ingen aledning att ha OL- och A-element. Ledsen att jag ersatte din css med en egen, men det ska vara lätt att se vad du ska ändra. Du kan även, om du vill ha flera lager av undermenyer.

menu.html

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Menu</title>
    <script src="menu.js" type="text/javascript"></script>
    <link href="menu.css" rel="stylesheet" type="text/css"/>
  </head>
  <body bgcolor="#C2C287" text="#000000" id="all" leftmargin="10" topmargin="10" marginwidth="10" marginheight="10" link="#660000" vlink="#660000" alink="#660000">
    <ul id="tree-menu">
      <li class="toggle"><div>Meny 1</div>
      <ul>
        <li><a href="">Sub 1-1</a></li>
        <li><a href="">Sub 1-2</a></li>
        <li><a href="">Sub 1-3</a></li>
      </ul>
      </li>

      <li class="toggle"><div>Meny 2</div>
      <ul>
        <li><a href="">Sub 2-1</a></li>
        <li><a href="">Sub 2-2</a></li>
      </ul>
      </li>

      <li class="toggle"><div>Meny 3</div>
      <ul>
        <li><a href="">Sub 3-1</a></li>
        <li><a href="">Sub 3-2</a></li>
        <li><a href="">Sub 3-3</a></li>
        <li><a href="">Sub 3-4</a></li>
      </ul>
      </li>

      <li class="toggle"><div>Meny 4</div>
      <ul>
        <li><a href="">Sub 4-1</a></li>
        <li><a href="">Sub 4-2</a></li>
      </ul>
      </li>
    </ul>
  </body>
</html>

menu.css

ul#tree-menu {
    list-style: none;
    padding: 0;
    width: 15em;
}

ul#tree-menu li.toggle div {
    background: #576;
    border-color: #798 #798 #354 #354;
    border-style: solid;
    border-width: 1px;
    color: white;
    font-size: small;
    font-weight: bold;
    padding: 6px 10px;
}

ul#tree-menu li.toggle div:hover {
    background: #687;
    border-color: #8a9 #8a9 #465 #465;
    border-style: solid;
    border-width: 1px;
}

ul#tree-menu li.toggle ul {
    background: #eee;
    border: 3px solid #354;
    border-top: none;
    display: none;
    list-style: none;
    padding: 6px 10px;
}

ul#tree-menu li.toggle ul a {
    color: #354;
    font-size: small;
    font-weight: bold;
    text-decoration: none;
}

menu.js

window.onload = function() {
    initiateTreeMenu("tree-menu");
}

function initiateTreeMenu(id) {
    var tree_root = document.getElementById(id);
    var li_elements = tree_root.getElementsByTagName("LI");

    for (var i in li_elements)
        if (li_elements[i].className == "toggle") {
            var activator = li_elements[i].firstChild;

            while (activator.nodeType != 1 && activator.tagName != "DIV")
                activator = activator.nextSibling;

            activator.onclick = toggleState;
        }
}

function toggleState(e) {
    var element = window.event ? window.event.srcElement : e.target;
    var target = element.nextSibling;

    while (target.nodeType != 1 && target.tagName != "DIV")
        target = target.nextSibling;

    with (target)
        style.display = style.display =="block" ? "none" : "block";
}

UrMeMedlem sedan apr. 2001762 inlägg

5 nov. 2004 10:09#3

Hehe, såg jäkligt mycket bättre ut :) får sätta mig in i koden bara :)

Men varför blev det så stort glapp på min "undermeny" mellan varje länk? Har nämligen haft det problem förut när jag bara gjort en vanlig < ul > < li > lista...

CheguelinMedlem sedan juli 2003303 inlägg

5 nov. 2004 11:04#4

P.g.a. margin:0.5em; i ul#menu1 li.rot. Varför du har satt dit det har jag ingen aning om :-)