---
title: "Drop down meny utan java script"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/189729-drop-down-meny-utan-java-script"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "Vixnor"
published: "2012-05-06T12:23:39.000Z"
updated: "2012-05-22T18:29:03.000Z"
replies: 10
views: 2444
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/189729-drop-down-meny-utan-java-script"
---

# Drop down meny utan java script

## #1 — Vixnor, 2012-05-06T12:23Z

Jag har installerat <http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm> till min sida och undrar om det går att fixa så den fungerar utan java script. 
Jag använder den som ligger till vänster, Item 1, Folder 0, osv. Grejen som dyker upp när man håller musen över Folder 0 funkar inte när java script inte är aktiverat och jag har fått andra drop down meny att fungera utan java scrip, men då utan "animation".

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

## #2 — Gildebrand, 2012-05-06T14:21Z

Självklart går det :) Jag gör alltid DD-menyer enbart i CSS.
Grundprincipen är ganska enkel.
Tänk dig att du har ett DOM-träd som följer

```
UL //"Hållare" för hela menyn
 LI //Objekt 1 i menyn
  UL //Undermeny
   LI //Objekt 1 i undermenyn
   LI //Objekt 2 i undermenyn
 LI //Objekt 2 i menyn
  UL //Undermeny
   LI //Objekt 1 i undermenyn
```

Då säger du bara att UL UL ska ha display:none, men när du hovrar över LI så ska UL få visas. Sån är grundprincipen.

Ett utdrag ur en dropdown-meny jag skapat, den är inte så "trimmad" men den funkar iallafall :)

```
div.menu ul{ list-style-type: none; display: block;}
div.menu ul>li ul{ visibility: hidden; position: absolute; z-index: 100; width: 170px; padding-left: 0;}
div.menu>ul ul ul{ margin-left: 170px; margin-top:-25px; }
div.menu li:hover > ul.children{ visibility: visible; }
div.menu>ul>li{ float: left; }
div.menu li{ height: 25px; display: list-item; }
div.menu ul a{display: block; height: 14px; line-height: 14px; }
```

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

## #3 — kluringen, 2012-05-06T14:21Z

Min meny är gjord utan javascript. [Så här ser den ut live](http://www.lavetten11.se/forsta.php) Inte riktigt lik den som du hänvisar till då den expanderar neråt och inte åt sidan. Den duger kanske ändå?

```

<div class="menybox">

<div class="vittext">MENY</div>

<div class="menytext">för alla</div>

<div class="loggcontainer">
<ul class="loggmeny">
<li> <a href="dold.php">Stäng Meny</a></li>

</ul>
</div>

<div id="vmeny">
<ul>
<li><a href="husfakta.php">Fakta om huset</a></li>
<li><a href="huset.php">Om föreningen »</a>

   <ul>
   <li class="undermeny"><a href="kanon.php">&nbsp;&nbsp;föreningslokal</a></li>
   <li class="undermeny"><a href="gard.php">&nbsp;&nbsp;gårdsförvandling</a></li>
   <li class="undermeny"><a href="bygget.php">&nbsp;&nbsp;byggprocess gård</a></li>
   <li class="undermeny"><a href="blommor.php">&nbsp;&nbsp;gårdsskötsel</a></li>
   <li class="undermeny"><a href="tvatt.php">&nbsp;&nbsp;tvättstuga</a></li>
   <li class="undermeny"><a href="trappa.php">&nbsp;&nbsp;ny gårdsentré</a></li>
   <li class="undermeny"><a href="trappa2.php">&nbsp;&nbsp;nygammal trappa</a></li>
   <li class="undermeny"><a href="arsbok.php">&nbsp;&nbsp;75-årsbok</a></li>  
   </ul>
   </li>

<li><a href="stadgar.php">Stadgar</a></li>
<li><a href="felanm.php">Felanmälan</a></li>
<li><a href="dokument.php">Dokument</a></li>
<li><a href="lankar.php">Externa länkar</a></li>
<li><a href="hemsidan.php">Om hemsidan</a></li>
<li><a href="maklare.php">För mäklare</a></li>
<li><a href="forsta.php">Startsidan</a></li>

</ul>
</div>

<div class="menytext">&nbsp;</div>
<div class="menytext">för medlemmar</div>

<div class="loggcontainer" >

<ul class="loggmeny"  >
<li><a href="inloggning.php">Logga in</a></li>

</ul>
</div>
</div>
```

CSS

```
/* VERTIKAL RULLMENY, EXPANDERAR 1 NIVÅ*/

/* box för rullmenyn */
	.menybox {padding: 10px; height: 90%; width: 150px;border: 
  1px solid #C8D6B2; overflow: auto; background: /*#C8D6B2;*/ #569AAA; position:fixed;}     /*ÄNDRAT FÄRGEN HÄR*/

/* loggmeny, vill bara ha ett annat utseende och text som inte markeras som länk bara */

.menytext{font-size: 90%; color: #800000;}
.undermeny{font-size: 90%;}
.vittext {color: #FFFFFF;}

.loggcontainer{left; width: 148px; font-size: 110%;
border-top: 1px solid #C8D6B2; border-left: 1px solid #C8D6B2; 
border-right: 1px solid #C8D6B2;}

.loggmeny{margin: 0; padding: 0; list-style-type: none;}
.loggmeny a{display: block; margin: 0; text-decoration: none; 
padding-bottom: 0.5em; padding-left: 5px ; color: #800000;
background: #E6E3DA; border-bottom: 1px solid /*#C8D6B2;*/ #568Bac;}		/*ÄNDRAT FÄRGEN HÄR*/

.loggmeny a:hover{background: #DCDFE4;}

/* Resten */

#vmeny ul {list-style-type: none; 
font-size: 14px;
margin: 0px;
padding: 0px;} 

#vmeny > ul > li {
border-top: 1px solid /*#C8D6B2;*/ #568BAC;			/*ÄNDRAT FÄRGEN HÄR*/
border-bottom: 2px solid /*#C8D6B2;*/ #568BAC;
} 	/*ÄNDRAT FÄRGEN HÄR*/

#vmeny li {
background-color: #E9EFFB;
position: relative; }

#vmeny > ul > li > ul {background: #E6E3DA;}

#vmeny li:hover {
background-color: #DCDFE4;}

#vmeny a { text-decoration: none;
display: block;
padding-left: 8px;
padding-right: 8px; 
padding-top: 2px;
padding-bottom: 2px;}

#vmeny a:link { color: black;}
#vmeny a:visited { color: black;}
#vmeny a:hover { color: blue;}
#vmeny a:active { color: black;}
#vmeny ul li a#current {backgrond: #000000;}

#vmeny > ul ul {
width: 130px;
display: none;}

#vmeny li:hover > a + ul {
display: block;}
```

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

## #4 — Danne V, 2012-05-06T15:32Z

Välj och vraka:
<http://css.maxdesign.com.au/listamatic/>

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

## #5 — Vixnor, 2012-05-06T22:13Z

Ok, jag skulle vilja ha en som ser ut [såhär](http://css.flepstudio.org/en/css-menu/vertical-css-dropdown-menu-on-3-levels-free-css-menu-12.html) och fungerar även när java script inte är aktiverat +är java script aktiverat vill jag att det ska bli en animation när man använder menyn.

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

## #6 — voigtann1, 2012-05-07T05:32Z

Det heter javascript inte java script, kolla in allas exempel som dom telat med sig de flesta har liknande funktioner du är ute efter och animeringen kan du göra i efterhand du kan läsa steg för steg att bygga en meny + lägga in effekter med jquery: <http://net.tutsplus.com/tutorials/design-tutorials/how-to-build-and-enhance-a-3-level-navigation-menu/>

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

## #7 — Vixnor, 2012-05-22T12:11Z

javascript, ok (blir iofs understryket med röd färg om man stavar så)

> **[voigtann1 skrev:](https://www.webforum.nu/p/1550390)**
>
> **Det heter javascript inte java script**, kolla in allas exempel som dom telat med sig de flesta har liknande funktioner du är ute efter och animeringen kan du göra i efterhand du kan läsa steg för steg att bygga en meny + lägga in effekter med jquery: <http://net.tutsplus.com/tutorials/design-tutorials/how-to-build-and-enhance-a-3-level-navigation-menu/>

Jaha, kan man lägga javascript på en drop down meny gjord endast med css? T.ex. den [här](http://www.lavetten11.se/forsta.php)

Jag letar efter en svart meny, med responsive webbdesign, **horizontal**.
Jag vill att de ska se ut ungefär såhär: <http://themify.me/demo/themes/minshop/blog/blog-4-columns/>
Och när man förminskar webbläsarfönstret till iPhone storlek vill jag att menyn ska se ungefär likadan ut som i exemplet, men att man endast ska se undermenyerna när man behöver det.

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

## #8 — Gildebrand, 2012-05-22T12:29Z

Varför måste det vara JavaScript? Börja med att göra en enbart i CSS och förstå hur det funkar. Sen kan du använda dig av CSS3 animationer för att få till eventuella effekter för att ta fram menyn

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

## #9 — Vixnor, 2012-05-22T12:57Z

> **[Gildebrand skrev:](https://www.webforum.nu/p/1550896)**
>
> Varför måste det vara JavaScript? Börja med att göra en enbart i CSS och förstå hur det funkar. Sen kan du använda dig av CSS3 animationer för att få till eventuella effekter för att ta fram menyn

Tänkte att det är enklare att kopiera en färdig, och sedan ändra CSS.

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

## #10 — Gildebrand, 2012-05-22T14:47Z

Kopiera inte. Skriv själv.
Ska det vara responsivt så behöver du inte heller JavaScript. Responsiv design kan väl sammanfattas med =\> Float, Min/Max-values, Mediaquerys. Inget behov av JavaScript

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

## #11 — Vixnor, 2012-05-22T18:29Z

Jag tror jag behåller en meny jag redan gjort.
Jag använder: 

```
@media screen and (max-width: 500px) {
```

i min CSS-kod

men behöver en ny "knapp" till en iPhone-meny.
Den knappen ska ta fram en lämplig meny för iPhone (som jag inte har gjort än)
Eller kan man göra en app om man är nybörjare eller tar det lång tid att lära?

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

---

Tråden på webben: https://www.webforum.nu/amne/javascript/189729-drop-down-meny-utan-java-script