---
title: "Meny design"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/118308-meny-design"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Thistel"
published: "2004-12-18T23:20:41.000Z"
updated: "2005-02-13T16:21:40.000Z"
replies: 3
views: 512
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/html-css/118308-meny-design"
---

# Meny design

## #1 — Thistel, 2004-12-18T23:20Z

Jag behöver hjälp med att skapa en meny.
Menyn inehåller ett antal huvudkategorier. När man klickar på dem skall det på en rad under huvudkategorierna visas underkategorier.

Kat1  Kat2  Kat3
sub1.1 sub1.2 sub1.3

Tacksam för tips och kod.

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

## #2 — Peter S, 2004-12-19T13:53Z

```
<style type="text/css">

#menu, #subMenus {
    background-color: #cc7c2d;
    border: 2px solid #802d1c;
    padding: 5px;
}

#menu ul, #subMenus ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#menu ul {
    font: normal 14px tahoma;
}

#menu ul li, #subMenus ul li {
    display: inline;
    margin-right: 10px;
}

#menu ul li a, #subMenus ul li a {
    color: #333;
    text-decoration: none;
}

#menu ul li a:hover, #subMenus ul li a:hover {
    color: #000;
}

#subMenus {
    border-top: 0;
}

#subMenus ul {
    font: normal 12px tahoma;
}

#subCat1 {
    visibility: hidden;
}

#subCat2, #subCat3 {
    display: none;
}

</style>

<script type="text/javascript">

var pairs = [
    ["cat1", "subCat1"],
    ["cat2", "subCat2"],
    ["cat3", "subCat3"]
];

var Menu = {
    pairs: [],
    dim1 : 0,

    init: function(){
	dim1 = pairs.length;

	for (var i = 0; i < dim1; ++i){

	    this.pairs[i] = [];
	    for (var j = 0; j < 2; ++j)
		this.pairs[i][j] = document.getElementById(pairs[i][j]);
	
	}

	this.initOnclick();
    },

    initOnclick: function(){
	for (var i = 0; i < dim1; ++i)
	    this.pairs[i][0].onclick = function(e){
		for (var j = 0; j < dim1; ++j){

		    Menu.pairs[j][1].style.visibility = "visible";

		    if (this == Menu.pairs[j][0])
			Menu.pairs[j][1].style.display = "block";
		    else
			Menu.pairs[j][1].style.display = "none";

		}

		if (window.event)
		    window.event.returnValue = false;

		else if (e)
		    e.preventDefault();
	    }
    }
};

window.onload = function(){
    Menu.init();
}

</script>

<div id="menu">
    <ul
	><li><a id="cat1" href="cat1.html">Cat1</a></li
	><li><a id="cat2" href="cat2.html">Cat2</a></li
	><li><a id="cat3" href="cat3.html">Cat3</a></li
    ></ul>
</div>
<div id="subMenus">
    <ul id="subCat1"
	><li><a href="subcat11.html">SubCat1.1</a></li
	><li><a href="subcat12.html">SubCat1.2</a></li
    ></ul>
    <ul id="subCat2"
	><li><a href="subcat21.html">SubCat2.1</a></li
	><li><a href="subcat22.html">SubCat2.2</a></li
    ></ul>
    <ul id="subCat3"
	><li><a href="subcat31.html">SubCat3.1</a></li
	><li><a href="subcat32.html">SubCat3.2</a></li
    ></ul>
</div>
```

 :)

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

## #3 — Thistel, 2004-12-19T16:45Z

Thnx! Fungerar ju exakt som jag ville ha det  :bire

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

## #4 — Thistel, 2005-02-13T16:21Z

Hur får jag en subkat till subkatten?

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/118308-meny-design