"Accordion" meny med undervalg

minimax · 12. januar 2008

Jeg ønsker å bruke en "accordion" meny, som f.eks. denne (de knappene som går langs høyre side).

Men i tillegg vil jeg ha knapper med undermenyer. Har lett over alt på nettet, men ikke funnet noe.

Finnes det noe slikt, klart for bruk?

LostOblivion · 13. januar 2008

Her har du hvertfall en begynnelse.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Foo.</title>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
ul#nav {
width: 300px;
margin: 30px auto;
border-top: 1px solid #CCC;
border-left: 1px solid #CCC;
border-right: 1px solid #CCC;
}
ul#nav ul {
display: none;
}
ul#nav li a {
display: block;
padding: 3px 10px;
border-bottom: 1px solid #CCC;
background: #036;
color: #FFF;
font-family: Verdana, sans-serif;
text-decoration: none;
}
ul#nav li a:hover {
background: #999;
color: #333;
}
ul#nav li ul li a {
background: #039;
}
ul#nav li ul li a:hover {
background: #999;
}
ul#nav, ul#nav li ul {
padding: 0;
list-style: none;
}
</style>
<script type="text/javascript">
var nMenus = 3;
function toggle(menuNum)
{
var liIt = document.getElementById("nav" + menuNum);
liIt.style.display = "block";
}
</script>
</head>

<body>
<ul id="nav">
<li>
	<a href="java script: toggle(1);">Brus.</a>
	<ul id="nav1">
		<li><a href="#">Cola.</a></li>
		<li><a href="#">Solo.</a></li>
		<li><a href="#">Dr. Pepper.</a></li>
	</ul>
</li>
<li>
	<a href="java script: toggle(2);">Dyr.</a>
	<ul id="nav2">
		<li><a href="#">Hund.</a></li>
		<li><a href="#">Katt.</a></li>
		<li><a href="#">Godzilla.</a></li>
	</ul>
</li>
<li>
	<a href="java script: toggle(3);">Menneske.</a>
	<ul id="nav3">
		<li><a href="#">Hviting.</a></li>
		<li><a href="#">Svarting.</a></li>
		<li><a href="#">Guling.</a></li>
	</ul>
</li>
</ul>
</body>

</html>

minimax · 13. januar 2008

Takk, men den ser ikke ut til å fungere.

Riktignok kommer menyknappene opp, men om jeg klikker på en av dem går den ikke opp og viser undermenyvalgene.

Dessuten, hva er forskjellen på denne og de mange ferdigløsningene der ute (Scriptalicious, Mootools osv.)?

Kan din takle undermenyer?

Scriptalicious sin virker grei nok og jeg kommer nok til å ta en nærmere titt på den, men på den annen side nevner folk stadig vekk Mootools sin løsning. Nå har jeg tittet på dokumentasjonen til Mootools, men den er tydeligvis ikke beregnet på nybegynnere, og det er heller ingen "klar til bruk" løsninger å finne. Heller ikke brukerforumet deres er spesielt hyggelig for de som ikke har bra peiling på programmering.

Endret 13. januar 2008 av minimax

bonedawg · 17. januar 2008

http://extjs.com/deploy/dev/examples/desktop/desktop.html

ExtJS er et sinnsykt genialt rammeverk for javascripting med gui og mot backends.

Og det beste av alt:

"Ext is also licensed under the terms of the Open Source LGPL 3.0 license."

-bone

EDIT: jeg må nesten få legge til at jeg på ingen måte er forbundet med dette rammeverket annet enn av vi har lagt vår elsk på det i firmaet jeg jobber i. Forøvrig finner du et accordion-eksempel i den linken jeg pastet øverst.

Endret 17. januar 2008 av bonedawg

LostOblivion · 18. januar 2008

Takk, men den ser ikke ut til å fungere.
Riktignok kommer menyknappene opp, men om jeg klikker på en av dem går den ikke opp og viser undermenyvalgene.

Dessuten, hva er forskjellen på denne og de mange ferdigløsningene der ute (Scriptalicious, Mootools osv.)?

Kan din takle undermenyer?

Scriptalicious sin virker grei nok og jeg kommer nok til å ta en nærmere titt på den, men på den annen side nevner folk stadig vekk Mootools sin løsning. Nå har jeg tittet på dokumentasjonen til Mootools, men den er tydeligvis ikke beregnet på nybegynnere, og det er heller ingen "klar til bruk" løsninger å finne. Heller ikke brukerforumet deres er spesielt hyggelig for de som ikke har bra peiling på programmering.

Det var ment som en start på noe du selv kan jobbe videre med.

Det jeg skrev funker fint for det den skal gjøre.

Logg inn

"Accordion" meny med undervalg

Anbefalte innlegg

minimax

Videoannonse

LostOblivion

minimax

bonedawg

LostOblivion

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer