Rob TjotjMedlem sedan okt. 200591 inlägg
Hej har sökt men inte hittat riktigt vad jag söker efter.
Jag håller på med en meny som förenklat ser ut som så:
<html>
<head>
<script LANGUAGE="JavaScript">
function stang (myId){
thisId=document.all(myId);
thisId.style.display = "none";
}
function toggle ( myId ) {
thisId=document.all(myId);
if (thisId.style.display == "none") {
thisId.style.display = "";
} else {
thisId.style.display = "none";
}
}
//-->
</script>
</head>
<body>
<span onclick="toggle('Meny1');stang('Meny2')"><A HREF="#"><B>Meny 1</B></A></span>
<span onclick="toggle('Meny2');stang('Meny1')"><A HREF="#"><b>Meny 2</b></A></span>
<div id="Meny1" style="display: 'none';"><b>Menyalternativ 1:1 Menyalternativ 1:2</b></div>
<div id="Meny2" style="display: 'none';"><b>Menyalternativ 2:1 Menyalternativ 2:2</b></div>
</body>
</html>
Jag vill kunna lägga till fler "huvudmenyer" och att när en huvudmeny väljs så stängs de andra. Jag skulle också vilja veta att det fungerar i "alla" webbläsare.
Helst en funtion som både öppnar valt alternativ och stänger de andra eventuellt öppna alternativen. Jag skulle också i samma veva vilja byta class på huvudmenyn.
Tack på förhand.
Robert
Peter SMedlem sedan dec. 20025 484 inlägg
Enkelt exempel:
<style>
.submenues{
display: none;
}
#menu{
list-style: none;
margin: 0;
padding: 0;
}
#menu li {
display: inline;
}
.open{
background: #eee;
}
.closed{
background: #fff;
}
</style>
<script type="text/javascript">
function toggle(n){
if (!document.getElementById){ return true }
var i = 1,
elm = null;
while (true){
if (elm = document.getElementById("submenu" + i)){
var p = document.getElementById("menu" + i);
if (i == n){
p.className = p.className == "open" ? "closed" : "open";
elm.style.display = elm.style.display == "block" ? "none" : "block";
} else {
p.className = "closed";
elm.style.display = "none";
}
} else {
return false;
}
++i;
}
}
</script>
<ul id="menu">
<li id="menu1"><a href="meny1.html" onclick="return toggle(1)">Meny 1</a></li>
<li id="menu2"><a href="meny2.html" onclick="return toggle(2)">Meny 2</a></li>
</ul>
<div id="submenu1" class="submenues"><b>Menyalternativ 1:1 Menyalternativ 1:2</b></div>
<div id="submenu2" class="submenues"><b>Menyalternativ 2:1 Menyalternativ 2:2</b></div>
Skriptet fungerar inte i "alla" webbläsare, men är konstruerat på sådant sätt att man navigeras till den länk som finns i <a>-taggen om webbläsaren inte stödjer document.getElementById.
Märk att elementen är döpta efter ett visst mönster.
Rob TjotjMedlem sedan okt. 200591 inlägg
Mycken tack.
Det är otroligt vilken kunskap som finns att hämta.
Jag har lyckats modifiera det till att se ut som jag önskat.
Vet du eller någon vilka webbläsare som har problem med koden?
Peter SMedlem sedan dec. 20025 484 inlägg
En kompatibilitetslista återfinns här.
Glöm inte att använda funktionen acceptera som slutgiltigt svar. :)
