Hvordan lage en dropdown meny?

Anders Moen · 18. november 2006

Hvordan i all verden kan jeg lage en forholdsvis enkel dropdown meny?

Ville vært fint om noen visste hvordan jeg lager en meny som er vertikal og en som er vannrett. (Bare husk at når du tar musa over skal det komme f. eks. flere linker ned/til siden).

maZe-- · 18. november 2006

Det du spør om nå er faktisk jeg også veldig keen på å få vite

Drømmemannen · 18. november 2006

Dere kan sikkert finne noe her: http://www.google.com/search?q=css+drop+down+menus

Denne er visstnok populær: http://alistapart.com/articles/dropdowns/

Endret 18. november 2006 av balletryne

maZe-- · 18. november 2006

Denne er visstnok populær: http://alistapart.com/articles/dropdowns/

Den der var fin Skal prøve den på en side når jeg trenger det. Takk balletryne.

Anders Moen · 18. november 2006

Denne er visstnok populær: http://alistapart.com/articles/dropdowns/

Den der var fin Skal prøve den på en side når jeg trenger det. Takk balletryne.

7312735[/snapback]

Takk, takk.

Det skulle vært en enklere kode på alistapart.com, bare skrive HTML: også HTML koden, også CSS: og CSS koden. Hehe, orker ikke lese så mye som står der ^^

Endret 18. november 2006 av Andy-Pandy

maZe-- · 18. november 2006

Andy Pandy, det er bare å lese om du vil lære det. Kan du html og css fra før av? Det første du ser av kodene sier jo litt om hva det dreier seg om liksom. Om du ser logikken i det er det ikke så vanskelig

NettOpp · 20. november 2006

For dere som ikke gidder (orker) å sette dere inn i DHTML, CSS, Javascript eller alt annet for den del. så kan dere kjøpe/laste ned program som lager alt for dere, er WYSIWYG program som mekker hele skiten for dere.

http://deluxe-menu.com/ er en av dem, dere kan også bare søke på Dhtml css meny, så kommer de som perler på en snor via google.

NettOpp

- Det som ikke kan gjøres med PHP er ikke verd å gjøre.

**ilpostino** · 21. november 2006

Takk, takk.
Det skulle vært en enklere kode på alistapart.com, bare skrive HTML: også HTML koden, også CSS: og CSS koden. Hehe, orker ikke lese så mye som står der ^^

7312745[/snapback]

her er hele koden med noe tekst for å vise hvordan det ble.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<title>Suckerfish Dropdowns</title>

<style type="text/css">

body {
font-family: arial, helvetica, serif;
}

ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
}

li { /* all list items */
float: left;
position: relative;
width: 10em;
}

li ul { /* second-level lists */
display: none;
position: absolute;
top: 1em;
left: 0;
}

li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}

li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
}

#content {
clear: left;
}

</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
 navRoot = document.getElementById("nav");
 for (i=0; i<navRoot.childNodes.length; i++) {
 	node = navRoot.childNodes[i];
 	if (node.nodeName=="LI") {
   node.onmouseover=function() {
   	this.className+=" over";
   }
   node.onmouseout=function() {
   	this.className=this.className.replace(" over", "");
   }
 	}
 }
}
}
window.onload=startList;

//--><!]]></script>

</head>

<body>

<ul id="nav">

<li>Sunfishes
 <ul>
 	<li><a href="">Blackbanded sunfish</a></li>
 	<li><a href="">Shadow bass</a></li>
 	<li><a href="">Ozark bass</a></li>
 	<li><a href="">White crappie</a></li>
 </ul>
</li>

<li>Grunts
 <ul>
 	<li><a href="">Smallmouth grunt</a></li>
 	<li><a href="">Burrito</a></li>
 	<li><a href="">Pigfish</a></li>
 </ul>
</li>

<li>Remoras
 <ul>
 	<li><a href="">Whalesucker</a></li>
 	<li><a href="">Marlinsucker</a></li>
 	<li><a href="">Ceylonese remora</a></li>
 	<li><a href="">Spearfish remora</a></li>
 	<li><a href="">Slender suckerfish</a></li>
 </ul>
</li>

</ul>

<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus. Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et, volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus. Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan turpis at erat.</p>

<p>Suckerfish Dropdowns by <a href="http://www.orangeafro.com/ptg/">Patrick Griffiths</a> and <a href="http://www.danwebb.net">Dan Webb</a>.<br /><br /><a href="http://www.htmldog.com">HTML Dog</a> | <a href="http://www.alistapart.com">A List Apart</a></p>

</div>

</body>

</html>

Anders Moen · 29. november 2006

Takk, takk.
Det skulle vært en enklere kode på alistapart.com, bare skrive HTML: også HTML koden, også CSS: og CSS koden. Hehe, orker ikke lese så mye som står der ^^

7312745[/snapback]

her er hele koden med noe tekst for å vise hvordan det ble.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<title>Suckerfish Dropdowns</title>

<style type="text/css">

body {
font-family: arial, helvetica, serif;
}

ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
}

li { /* all list items */
float: left;
position: relative;
width: 10em;
}

li ul { /* second-level lists */
display: none;
position: absolute;
top: 1em;
left: 0;
}

li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}

li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
}

#content {
clear: left;
}

</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
 navRoot = document.getElementById("nav");
 for (i=0; i<navRoot.childNodes.length; i++) {
 	node = navRoot.childNodes[i];
 	if (node.nodeName=="LI") {
   node.onmouseover=function() {
   	this.className+=" over";
   }
   node.onmouseout=function() {
   	this.className=this.className.replace(" over", "");
   }
 	}
 }
}
}
window.onload=startList;

//--><!]]></script>

</head>

<body>

<ul id="nav">

<li>Sunfishes
 <ul>
 	<li><a href="">Blackbanded sunfish</a></li>
 	<li><a href="">Shadow bass</a></li>
 	<li><a href="">Ozark bass</a></li>
 	<li><a href="">White crappie</a></li>
 </ul>
</li>

<li>Grunts
 <ul>
 	<li><a href="">Smallmouth grunt</a></li>
 	<li><a href="">Burrito</a></li>
 	<li><a href="">Pigfish</a></li>
 </ul>
</li>

<li>Remoras
 <ul>
 	<li><a href="">Whalesucker</a></li>
 	<li><a href="">Marlinsucker</a></li>
 	<li><a href="">Ceylonese remora</a></li>
 	<li><a href="">Spearfish remora</a></li>
 	<li><a href="">Slender suckerfish</a></li>
 </ul>
</li>

</ul>

<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus. Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et, volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus. Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan turpis at erat.</p>

<p>Suckerfish Dropdowns by <a href="http://www.orangeafro.com/ptg/">Patrick Griffiths</a> and <a href="http://www.danwebb.net">Dan Webb</a>.<br /><br /><a href="http://www.htmldog.com">HTML Dog</a> | <a href="http://www.alistapart.com">A List Apart</a></p>

</div>

</body>

</html>

7328722[/snapback]

Takk, takk.

Logg inn

Hvordan lage en dropdown meny?

Anbefalte innlegg

Anders Moen

Videoannonse

maZe--

Drømmemannen

maZe--

Anders Moen

maZe--

NettOpp

ilpostino

Anders Moen

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer