---
title: "Vanlig drop meny från en vågrät meny"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/74748-vanlig-drop-meny-från-en-vågrät-meny"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "Yoda"
published: "2003-04-23T07:13:44.000Z"
updated: "2003-04-23T18:50:27.000Z"
replies: 4
views: 417
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/74748-vanlig-drop-meny-från-en-vågrät-meny"
---

# Vanlig drop meny från en vågrät meny

## #1 — Yoda, 2003-04-23T07:13Z

Jag har en meny på min sida som ligger längst upp på sidan, vågrät. Från den ska det sedan droppa ner undermenyer.

Jag vet inte riktigt hur jag löser detta i js, vet ni?

Här är min meny:

```
<div id = "menu">
	<table>
		<tr>
			<td width = "100"><a href = "menu_c.php" onClick = "menu()">Kurser</a></td>
			<td width = "110"><a href = "menu_s.php">Student</a></td>
			<td width = "130"><a href = "menu_u.php">Skolan</a></td>
			<td width = "150"><a href = "menu_w.php">Webbkameror</a></td>
			<td width = "100"><a href = "menu_k.php">Staden</a></td>
		</tr>
	</table>
</div>
```

När man klickar på länken i menyn ska det droppa ner en undermeny och då har jag satt onClick, det är väl rätt så långt?

De länkar som trillar ner under kurser har jag lagt i ett lager i css:en:

```
#menu_c
{
	z-index: 4;
	border: 1px solid black;
	background: #1f2170;
	color: white;
	font-weight: bold;
	position: absolute;
	top: 181px;
	left: 25px;
	width: 100px;
	padding: 10px;
}
```

Men vad ska funktionen menu() innehålla undrar jag. Jag är ingen höjdare på javascript så är det någon som har lite tips?

Tackar på förhand!

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

## #2 — Jesper T, 2003-04-23T10:57Z

Lite dom a lá jojoxx kanske:

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>Jojoxx.net DHTML</title>
	
<style type="text/css">
<!--
.menu_c
{
	z-index: 4;
	border: 1px solid black;
	background: #1f2170;
	color: white;
	font-weight: bold;
	top: 181px;
	left: 25px;
	width: 100px;
	padding: 10px;
}
-->
</style>
</head>
<body onLoad="initmenu();">
<br>
<div align="center">
<!-- Detta exempel inkluderar även eventet onLoad i body-taggen ovan -->
<script language="JavaScript">
var currentMenu=false;
var menues=new Array('sub1');
function sw(mnu,mode){
	if(mode){
		if(currentMenu){
			if(currentMenu==mnu){changeStyle(mnu,'display','none');currentMenu=false;}else{changeStyle(currentMenu,'display','none');changeStyle(mnu,'display','block');currentMenu=mnu;}
		} else {
			changeStyle(mnu,'display','block');currentMenu=mnu;
		}
	} else if (document.getElementById) {
		document.getElementById(mnu).style.display=(document.getElementById(mnu).style.display=='block')?'none':'block';
	}
}
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 initmenu(){
	for(var n=0;n<menues.length;n++){
		changeStyle(menues[n],'display','none');
	}
}
</script>
<div id = "menu">
	<table>
		<tr>
			<td width = "100" valign="top"><a href = "#" onClick = "sw('sub1')">Kurser</a><div id="sub1" class="menu_c"><a href="#">Val 1</a><br><a href="#">Val 2</a><br><a href="#">Val 3</a></div></td>
			<td width = "110" valign="top"><a href = "menu_s.php">Student</a></td>
			<td width = "130" valign="top"><a href = "menu_u.php">Skolan</a></td>
			<td width = "150" valign="top"><a href = "menu_w.php">Webbkameror</a></td>
			<td width = "100" valign="top"><a href = "menu_k.php">Staden</a></td>
		</tr>
	</table>
</div>

<!-- Här slutar exemplet -->

</div>
</body>
</html>
```

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

## #3 — silfver, 2003-04-23T17:52Z

> **Jesper T skrev:**
>
> Lite dom a lá jojoxx kanske:
>
> ```
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
> <html>
> <head>
> 	<title>Jojoxx.net DHTML</title>
> 	
> <style type="text/css">
> <!--
> .menu_c
> {
> 	z-index: 4;
> 	border: 1px solid black;
> 	background: #1f2170;
> 	color: white;
> 	font-weight: bold;
> 	top: 181px;
> 	left: 25px;
> 	width: 100px;
> 	padding: 10px;
> }
> -->
> </style>
> </head>
> <body onLoad="initmenu();">
> <br>
> <div align="center">
> <!-- Detta exempel inkluderar även eventet onLoad i body-taggen ovan -->
> <script language="JavaScript">
> var currentMenu=false;
> var menues=new Array('sub1');
> function sw(mnu,mode){
> 	if(mode){
> 		if(currentMenu){
> 			if(currentMenu==mnu){changeStyle(mnu,'display','none');currentMenu=false;}else{changeStyle(currentMenu,'display','none');changeStyle(mnu,'display','block');currentMenu=mnu;}
> 		} else {
> 			changeStyle(mnu,'display','block');currentMenu=mnu;
> 		}
> 	} else if (document.getElementById) {
> 		document.getElementById(mnu).style.display=(document.getElementById(mnu).style.display=='block')?'none':'block';
> 	}
> }
> 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 initmenu(){
> 	for(var n=0;n<menues.length;n++){
> 		changeStyle(menues[n],'display','none');
> 	}
> }
> </script>
> <div id = "menu">
> 	<table>
> 		<tr>
> 			<td width = "100" valign="top"><a href = "#" onClick = "sw('sub1')">Kurser</a><div id="sub1" class="menu_c"><a href="#">Val 1</a><br><a href="#">Val 2</a><br><a href="#">Val 3</a></div></td>
> 			<td width = "110" valign="top"><a href = "menu_s.php">Student</a></td>
> 			<td width = "130" valign="top"><a href = "menu_u.php">Skolan</a></td>
> 			<td width = "150" valign="top"><a href = "menu_w.php">Webbkameror</a></td>
> 			<td width = "100" valign="top"><a href = "menu_k.php">Staden</a></td>
> 		</tr>
> 	</table>
> </div>
> 
> <!-- Här slutar exemplet -->
> 
> 
> </div>
> </body>
> </html>
> ```

Hum, det där funkar inte för mig :(.

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

## #4 — Jesper T, 2003-04-23T18:42Z

Om något inte fungerar - Beskriv felet.
Ok, det hade blivit några ofrivilliga radbrytningar. Raderna i javascriptet som börjar .

```
if(currentMenu==mnu){
```

 skall vara sammansatt(på en rad)

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

## #5 — Jesper T, 2003-04-23T18:50Z

Eventuellt lite O.T. men jag har försökt att få in den raden i ett \[kod\]-block, men raden bryts ändå. Varför?

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

---

Tråden på webben: https://www.webforum.nu/amne/javascript/74748-vanlig-drop-meny-från-en-vågrät-meny
