E erc Medlem sedan juni 2002 32 inlägg Frågan 26 okt. 2004 14:42 #1 Hej alla!
Jag vill göra en lista med hjälp av CSS alternativt javascript. Antar att det är javascript jag ska använda.
meny1
Hur gör man detta med CSS eller javascript? Så när man klickar på meny2 öppnas / stängs menyn. Och såklart något liknande för meny1 och 2. Det snyggaste skulle ju vara att använda bara CSS. Men går det?
Tack för mig.
Jocke
B bossse Medlem sedan juni 2003 771 inlägg Kanske så här?
<html>
<head>
<style>
#1, #2 {font-size:16; color:red; text-decoration:underline}
#3, #4 {font-size:14; color:blue; text-decoration:none;}
a:hover {color:yellow; font-weight:bold;}
.link {width: 90px; cursor:hand; }
.meny {position:relative;left:60px; top:-3px;color:black;}
</style>
<script>
function clickEvent() {
var thistag, parenttag;
thistag = window.event.srcElement.tagName;
parenttag = window.event.srcElement.parentElement.id;
if (thistag == "B" && parenttag == "lankar") {
if (document.all("meny" + window.event.srcElement.id).style.display == "none") {
document.all("meny" + window.event.srcElement.id).style.display = "";
}
else {
document.all("meny" + window.event.srcElement.id).style.display = "none";
} } }
</script>
</head>
<body bgcolor=green>
<span class="link" id="lankar" onclick="clickEvent();">
<b id="1">Startsidan</b><br>
<span id="meny1" style="display:none;">
<a href="login.htm" class="meny" >Logga in</a><br>
<a href="läs.htm" class="meny">Läs/skriv</a>
</span>
<b id="2">Forum</b><br>
<span id="meny2" style="display:none;">
<a href="skriv.htm" class="meny">Skriv tråd</a><br>
<a href="ta_bort.htm" class="meny">Ta bort tråd</a><br>
<a href="ändra.htm" class="meny">Ändra tråd</a>
</span>
<br>
<b id="3">Sök</b><br>
<span id="meny3" style="display:none;">
<a href="" class="meny">Söklänk1</a><br>
<a href="" class="meny">Söklänk2</a>
</span>
<b id="4">Kontakt</b><br>
<span id="meny4" style="display:none;">
<a href="" class="meny">Kontakt 1</a><br>
<a href="" class="meny">Kontakt 2</a><br>
</span>
</span>
</body>
</html>
Palle Medlem sedan apr. 2000 3 174 inlägg Lek lite med det här: :)
[red]<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; }
</style>
</head>
<body>
<a href="javascript:void(toggle('sub1'));" class="cat">Meny 1</a>
<div id="sub1" class="sub">
Sub 1-1<br>
Sub 1-2<br>
Sub 1-3
</div>
<a href="javascript:void(toggle('sub2'));" class="cat">Meny 2</a>
<div id="sub2" class="sub">
Sub 2-1<br>
Sub 2-2
</div>
<a href="javascript:void(toggle('sub3'));" class="cat">Meny 3</a>
<div id="sub3" class="sub">
Sub 3-1<br>
Sub 3-2<br>
Sub 3-3<br>
Sub 3-4
</div>
<a href="javascript:void(toggle('sub4'));" class="cat">Meny 4</a>
<div id="sub4" class="sub">
Sub 4-1<br>
Sub 4-2
</div>
</body>
</html> [/red]
OBS! Glöm inte att skriva ihop java script !
E erc Medlem sedan juni 2002 32 inlägg Va schysst. Ska genast testas :)
edit: fungerar perfekt! tackar tackar!
