---
title: "Enkel länkmeny: Klick och undermeny öppnas"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/18850-enkel-länkmeny-klick-och-undermeny-öppnas"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "Pace"
published: "2002-01-17T20:12:00.000Z"
updated: "2002-02-03T19:13:00.000Z"
replies: 12
views: 407
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/18850-enkel-länkmeny-klick-och-undermeny-öppnas"
---

# Enkel länkmeny: Klick och undermeny öppnas

## #1 — Pace, 2002-01-17T20:12Z

Söker efter en meny som ser ut på detta viset, efter att man har klickat på "menylänken" så ska själva länkarna poppa ned och därefter försvinna igen när man trycker tillbaka den:

```
[b]Menylänk[/b]
- Gå till sida 1
- Gå till sida 2
- Gå till sida 3
```

Vet att detta har varit uppe förut, men jag söker efter ett som fungerar i NS, MSIE och Opera. Bratta.com har ett sådant [här](http://www.dhtmlcentral.com/script/script22_demo.html), men där är man tyvärr tvungen att ange positionen för länkarna. Inte bra.

Permalänk: https://www.webforum.nu/p/18850

## #2 — Simpa, 2002-01-17T21:49Z

Söker också en..

Permalänk: https://www.webforum.nu/p/336416

## #3 — Pace, 2002-01-20T15:13Z

Postar för att dra upp tråden igen.
Jag vet att någon sitter på en lösning!

Permalänk: https://www.webforum.nu/p/336417

## #4 — Jojoxx, 2002-01-20T16:34Z

```
<script language="JavaScript" type="text/javascript">
var isNetscape=(navigator.appName=="Netscape");
var lastLayer=false;
function moveHandler(evnt) {
	if(document.layers&#0124;&#0124;(isNetscape)){
		Xmouse = evnt.pageX-pageXOffset;
		Ymouse = evnt.pageY-pageYOffset;
	} else if(document.all) {
		Xmouse = window.event.x;
		Ymouse = window.event.y;
	}
}
if (document.layers){ document.captureEvents(Event.MOUSEMOVE); }
document.onmousemove = moveHandler;
function moveLayerAbs(Id,x,y){
	if (document.all){
		if (x) document.all[Id].style.left = x;
		if (y) document.all[Id].style.top = y;
	} else if (document.layers){
		if (x) document.layers[Id].left = x;
		if (y) document.layers[Id].top = y;
	} else if (document.getElementById){
		if (x) document.getElementById(Id).style.left = x+'px';
		if (y) document.getElementById(Id).style.top = y+'px';
	}
}
function showLayer(Id){
	if (document.all) {
		document.all[Id].style.visibility = "visible";
	} else if (document.layers){
		document.layers[Id].visibility = "show";
	} else if (document.getElementById){
		document.getElementById(Id).style.visibility = "visible";
	}
}
function hideLayer(Id){
	if (document.all) {
		document.all[Id].style.visibility = "hidden";
	} else if (document.layers){
		document.layers[Id].visibility = "hide";
	} else if (document.getElementById){
		document.getElementById(Id).style.visibility = "hidden";
	}
}
function clickMenu(mnu){
	if(mnu==lastLayer){
		hideLayer(mnu); lastLayer=false;
	} else {
		if(lastLayer){ hideLayer(lastLayer); }
		moveLayerAbs(mnu,Xmouse-20,Ymouse+5);
		showLayer(mnu);
		lastLayer=mnu;
	}
}
</script>
<div id="foo" style="position:absolute;visibility:hidden;"><a href="#">Länk 1</a><br><a href="#">Länk 2</a><br><a href="#">Länk 3</a></div>
<div id="bar" style="position:absolute;visibility:hidden;"><a href="#">Länk 1</a><br><a href="#">Länk 2</a><br><a href="#">Länk 3</a></div>
Lite text med <a href="#" onClick="clickMenu('foo'); return false;">menyer</a> i på <a href="#" onClick="clickMenu('bar'); return false;">flera</a> ställen.
```

Torde vara rättså självförklarande.

Permalänk: https://www.webforum.nu/p/336418

## #5 — Pace, 2002-01-20T18:13Z

Tack Jojoxx, men det var inte riktigt det jag letade efter (fungerade enbart i MSIE). :) 

Detta hittade jag, men det fungerar också bara i MSIE (i övriga så visas menyn "utvikt"). Finns det något sätt att få det att fungera i andra webbläsare också?

```
<script language="javascript">
<!--
var Open = ""
var Closed = ""

function showhide(what,what2){
if (what.style.display=='none'){
  what.style.display='';
  what2.src=Open.src
}
else{
  what.style.display='none'
  what2.src=Closed.src
}
}
// -->
</script>

<span id="menu1" onClick="showhide(menu1outline,menu1sign)" style="cursor:hand;">
<a id="menu1sign" href="#">Personer</a></span><br>
<span id="menu1outline" style="display:'none'">
    <a href="a.html">Adam</a><br>
    <a href="b.html">Bertil</a><br>
    <a href="c.html">Ceasar</a><br>
</span>
```

Permalänk: https://www.webforum.nu/p/336419

## #6 — Jojoxx, 2002-01-20T19:54Z

Ursäkta, jag tittade inte på [exemplet](http://www.dhtmlcentral.com/script/script22_demo.html) utan läste bara beskrivningen. Jag trodde att länkarna skulle in i en löpande text. Däremot fungerar det i såväl IE som Netscape 4.x och Mozilla. (Jag har testat Netscape 4.07, IE 5.01 och Mozilla 0.9.7 (det som finns installerat på min dator)).

Ditt exempel kommer inte att fungera i Netscape 4.x eftersom du där inte har stödet att rendera om sidan efter det att den laddats, däremot kan jag få det att fungera i Mozilla och kommande DOM-kompatibla läsare;

```
<script language="javascript">
var lastmenu=false;
function changeStyle(Id,Property,Value){
	if (document.all){
		eval('document.all[Id].style.'+Property+'="'+Value+'"');
	} else if (document.layers){
		eval('document.layers[Id].'+Property+'="'+Value+'"');
	} else if (document.getElementById){
		eval('document.getElementById(Id).style.'+Property+'="'+Value+'"');
	}
}
function clickMenu(mnu){
	if(mnu==lastmenu){
		changeStyle(mnu,'display','none'); lastmenu=false;
	} else {
		if(lastmenu){ changeStyle(lastmenu,'display','none'); }
		changeStyle(mnu,'display','inline');
		lastmenu=mnu;
	}
}

</script>
<a href="#" onClick="clickMenu('personer');return false;">Personer</a><br>
<span id="personer" style="display:none;">
 <a href="a.html">Adam</a><br>
 <a href="b.html">Bertil</a><br>
 <a href="c.html">Ceasar</a><br>
</span>
<a href="#" onClick="clickMenu('bilar');return false;">Bilar</a><br>
<span id="bilar" style="display:none;">
 <a href="d.html">Volvo</a><br>
 <a href="e.html">Saab</a><br>
 <a href="f.html">Ford</a><br>
</span>
```

Permalänk: https://www.webforum.nu/p/336420

## #7 — costodia, 2002-02-03T10:29Z

jag har haft väldig nytta av scriptet, men det är just dte att jag har väldiga problem efetrsom jag stänger ute alla besökare med NS 4.x
Så vad skulel du rekomdera mig om jag absolut vil latt dte ska funka i NS 4.x?

Sen tycker jag det skulle häftigt om menyerna kom upp utan att man behövde klicka på länkarna, och de istället öppnades så fort man drog muspekaren över dem, går det att ändra?

Permalänk: https://www.webforum.nu/p/336421

## #8 — Jojoxx, 2002-02-03T11:39Z

Denna typ av funktion är svår i Netscape 4 eftersom den till sin natur inte kan rendera om en del av sidan efter det att den laddats. Då får man hålla på och kladda med en massa lager och visa/dölja/flytta för att få en effekt som är likadan. Därför skulle jag förenkla det genom att ladda om sidan helt och hållet. Har du ex. tillgång att köra ASP kan du lägga allt detta i en och samma fil som du anropar med olika query-strings beroende på vilken undermeny du vill visa. Detta finns det säkert exempel på i ASP-forumet.

Permalänk: https://www.webforum.nu/p/336422

## #9 — Erik Juhlin, 2002-02-03T13:06Z

Här är en grej jag slängde ihop nyss. Koden är kanske inte världens smidigaste, men man kanske kan bygga vidare på den...

```
<%
Option Explicit

Dim sOpenDiv

sOpenDiv = Request.QueryString("sOpenDiv")

Function SetDisplay(div)
	If div = sOpenDiv Then
		SetDisplay = " style=""display: block"""
	Else
		SetDisplay = " style=""display: none"""
	End If
End Function
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script type="text/javascript">
var g_Divs = 4; //Antalet divar som finns...
function changeDiv(divId) {
	if (document.all &#0124;&#0124; document.getElementById) {
		var bOpen = (getDisplay(divId) == "block");
		for (var i = 0; i < g_Divs; i++) {
			changeDisplay("div" + i, "none");
		}
		changeDisplay(divId, bOpen ? "none" : "block");
	} else {
		if (divId == "<%=sOpenDiv%>") {
			location.href = "menu.asp";
		} else {
			location.href = "menu.asp?sOpenDiv=" + divId;
		}
	}
}

function changeDisplay(divId, sValue) {
	if (document.all) {
		document.all[divId].style.display = sValue;
	} else if (document.getElementById) {
		document.getElementById(divId).style.display = sValue;
	}
}

function getDisplay(divId) {
	if (document.all) {
		return document.all[divId].style.display;
	} else if (document.getElementById) {
		return document.getElementById(divId).style.display;
	}
}
</script>
<style type="text/css">
div {display: none}
</style>
</head>
<body>

<a href="javascript:changeDiv('div0');">Öppna</a><br>
<div id="div0"<%=SetDisplay("div0")%>>En massa tjaffs...</div>
<a href="javascript:changeDiv('div1');">Öppna</a><br>
<div id="div1"<%=SetDisplay("div1")%>>En massa tjaffs...</div>
<a href="javascript:changeDiv('div2');">Öppna</a><br>
<div id="div2"<%=SetDisplay("div2")%>>En massa tjaffs...</div>
<a href="javascript:changeDiv('div3');">Öppna</a><br>
<div id="div3"<%=SetDisplay("div3")%>>En massa tjaffs...</div>

</body>
</html>
```

Permalänk: https://www.webforum.nu/p/336423

## #10 — costodia, 2002-02-03T15:47Z

Jag la in den koden på <http://www.ebid.se/innovation/new_page_30.htm>  men den funkar inte. 

Sådant script som jag vill ha finns på [www.fotosidan.se](http://www.fotosidan.se)  och jag har försökt ladda hem det (funderade samtidigt om det var moraliskt riktigt att göra så, men så tänkte jag eftersom jag inte kommer använda scriptet på någon komersiell sajt så borde det väl vara (lite) moraliskt försvarbart ialla fall?), men jag fick inte det att funka offline med modifieringar i designgen, så därför vänder jag mig åter til mitt favoritforum och frågar denna fråga.

Permalänk: https://www.webforum.nu/p/336424

## #11 — costodia, 2002-02-03T15:47Z

q

\[Redigerat av costodia den 03 feb 2002\]

Permalänk: https://www.webforum.nu/p/336425

## #12 — Erik Juhlin, 2002-02-03T17:19Z

Det är ASP-kod och därför så måste filen heta .asp. Och i det här fallet ska filen heta menu.asp.

Permalänk: https://www.webforum.nu/p/336426

## #13 — costodia, 2002-02-03T19:13Z

jag kom på att jag inte gillade asp-lösningen så mycket så om det går så skulle jag gärna vilja ha hjälp att göra en sådan meny som som finns på fotosidans.e, kankse som ett wf-script?

Permalänk: https://www.webforum.nu/p/336427

---

Tråden på webben: https://www.webforum.nu/amne/javascript/18850-enkel-länkmeny-klick-och-undermeny-öppnas