Permalänk
Medlem

Hur göra meny som expanderar?

Jag håller på med ett litet hemsideprojekt och skulle vilja ha tips på hur man gör en meny som expanderar med undergrupper när man klickar på en rubrik.

Konceptet illustreras här. Tänk att menyn ser ut ungefär som följer:

Flygplan
Bilar
Båtar

Efter klick på "Bilar":

Flygplan
Bilar
- BMW
- Volvo
- Ford
Båtar

Tacksam för all sorts hjälp inklusive hemsidor som beskriver ett tillvägagångssätt.

Visa signatur

"Det sista kapitalisten säljer är det rep, i vilket vi skall hänga honom." - Fadern av det röda landet i öster

Permalänk
Medlem

dom är uppbygda med java-applets
här finns 3st från webdesignskolan:

meny 1
Ett menysystem passande för menyer med flera menynivåer, undermenyer.

meny 2
Ett menysystem med ljudeffekter passande för stora menysystem med flera menynivåer. Gratis för privatpersoner, mindre avgift för företag.

meny 3
Ett menysystem passande för stora menysystem med flera menynivåer, liknar Meny2 ovan men är helt gratis!

Permalänk
Medlem

Hmm. Verkar okej, men inte riktigt "on spot". Jag vill också att när man klickar på en ny meny stängs föregående. Mina menyer ska också bestå av enbart av bilder, dessutom med lite olika storlek som kanske komplicerar.

Visa signatur

"Det sista kapitalisten säljer är det rep, i vilket vi skall hänga honom." - Fadern av det röda landet i öster

Permalänk
Medlem

Använd aldrig applets om du inte måste. De mördar IE.

Om du bara vill visa undermenyerna är det enklare. Enklast är att göra en separat sida för varje. Annars kan du göra ett script som skriver om sidan när du klickar på en meny. Eller så kan du helt enkelt flytta bort de bilder du inte vill ha där dit där de inte är synliga.

Visa signatur

:€

Permalänk
Permalänk
Medlem

Görs enkelt med javascript.

Använder mig av ett kodexempel som ingår på den sidan jag jobbar på nu.

Denna del läggs in i headtaggen, som alltid med javascript.

<script type="text/javascript"> function ShowMenu(str) { obj=document.getElementById("group" + str); if(obj.style.display=='block') { obj.style.display='none'; if(document.images["bild" + str].src = "meny_minus.gif"){ document.images["bild" + str].src = "meny_plus.gif"; } } else { obj.style.display='block'; if(document.images["bild" + str].src = "meny_plus.gif"){ document.images["bild" + str].src = "meny_minus.gif"; } } } </script>

I detta exempel så klickar du på bilden av ett +, då öppnar sig undermenyn och pluset ändras till ett minus.

Själva menydelen ser ut på följande sätt:

 <img src="meny_plus.gif" style="cursor: hand;" name="bild1" onclick="ShowMenu('1')" /> <a href="#" class="meny">Bilar</a><br> <div style="display: none" id="group1">     <a href="#">Ford</a> <br />     <a href="#">Volvo</a> </div>

Ändra bara koden på det sätt du vill ha den utifrån detta exempel (byt ut textlänkar till bilder etc).

Visa signatur

Rullar med Yahognyklicken...

Permalänk
Medlem

Du kan ju göra det mycket enkelt med php.

print("<a href=\"?menyopt=1\"><img src=\"meny1.png\"></a><br>"); // huvudmeny if($menyopt == 1) { print(" - submeny<br>"); // undermeny } // sedan ökar du bara menyopt med 1 för varje huvudmenydel, och gör en ifsats för den.

Visa signatur
Permalänk

xml eller vad det heter är lätt snabbt går o göra snyggt me css

Visa signatur

Sojuz Sovetskich Sotsialistitjeskich Respublik

Permalänk
Medlem
Visa signatur

/ Assar

Permalänk
Medlem

Al Capone, Bamsefar: Jag är inte riktigt säker på att det blir särskilt dynamiskt med varken xml eller php.

Visa signatur

Schemer: "Buddha is small, clean, and serious."
Lispnik: "Buddha is big, has hairy armpits, and laughs."

Permalänk
Medlem
Citat:

Ursprungligen inskrivet av LordT
Al Capone, Bamsefar: Jag är inte riktigt säker på att det blir särskilt dynamiskt med varken xml eller php.

På vilket sett skulle php inte vara dynamiskt?

Visa signatur
Permalänk
Medlem

Dynamiskt är det ju men jag tror han syftar på att man måste ladda om sidan för att få någon effekt, vilket kanske inte är vad man vill ha.

Visa signatur

:€

Permalänk
Medlem
Citat:

Ursprungligen inskrivet av eighty
Dynamiskt är det ju men jag tror han syftar på att man måste ladda om sidan för att få någon effekt, vilket kanske inte är vad man vill ha.

Serverspråket har mycket lite med hur du bygger upp klientsidan att göra. PHP går alldeles utmärkt att bygga dynamisk html med.

EDIT
Ett litet tipps:
Tänk på att dynamisk html håller sig inom sin egen frame så att om du tänkt använda frames så måste du antingen dimensionera ramen efter största utväxten på menyn eller använda någon annan metod (Se på internetbutikerna).

Visa signatur

/ Assar

Permalänk
Medlem
Citat:

Ursprungligen inskrivet av Assar
Serverspråket har mycket lite med hur du bygger upp klientsidan att göra. PHP går alldeles utmärkt att bygga dynamisk html med.

Då är det ju DHTML och inte PHP som gör jobbet. Det går inte att göra en expanderande meny med bara HTML och PHP utan att vara tvungen att ladda om sidan.

Visa signatur

:€

Permalänk
Medlem

Right man!
Använd ex.vis PHP för att bestämma vad som ingår i menyn och bygg upp den i t.ex. DHTML så tror jag det blir optimalt.

Visa signatur

/ Assar

Permalänk
Medlem

Jag byggde lite såna menyer för ett par år sedan. De är uppdaterade så att de ska funka i alla webbläsare från v4 och uppåt.
De finns här.
Jag föreslår att du kollar på Script 2.

De är gjorda helt i JavaScript/dHTML och väldigt enkla att konfigurera (tycker jag ).

Visa signatur
Permalänk
Medlem
Citat:

Ursprungligen inskrivet av bamsefar
På vilket sett skulle php inte vara dynamiskt?

Dynamiskt som i DHTML dynamiskt menar jag.
Hur dynamiskt genererad sida man än gör i PHP blir ändå resultatet en statisk sida för användaren om man inte blandar in någon form av klientscripting.

Visa signatur

Schemer: "Buddha is small, clean, and serious."
Lispnik: "Buddha is big, has hairy armpits, and laughs."