Lave en "tab" menu

Tags:    html css

Er der nogle der kan forklare mig, i meget kalre vendinger hvordan man laver en menu som eksempelvis den der er vist på www.dotninjas.dk, altså hvor man kan klikke på forskellige "Tabs" og så ser det ud til at man skifter side. Gerne med et medfølgende css

(¯`·._.·[Brian Hvarregaard]·._.·´¯)



9 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 5 karma
Sorter efter stemmer Sorter efter dato
Hay
Det kan laves med css og evt. brug af lidt JavaScript, men uden brug af billeder. Jeg har selv lavet et munu system vhj. css og uden brug af billeder. Når jeg finder det skal jeg nok ligge det her på forumet... Det er lidt simplere end denne version af det.

Janus S. Andersen
* Life is a dream in a programmers heaven *



Er der nogle der kan forklare mig, i meget kalre vendinger hvordan man laver en menu som eksempelvis den der er vist på www.dotninjas.dk, altså hvor man kan klikke på forskellige "Tabs" og så ser det ud til at man skifter side. Gerne med et medfølgende css

(¯`·._.·[Brian Hvarregaard]·._.·´¯)

Det laves med grafik. Tabs'ne på siden, er i hvert fald billeder!

MVH.
Armen L.A.



Det er meget nemt at lave, men du skal bruge enten PHP, ASP eller måske JavaScript.

mvh gustav olsen



Hvis man laver det ved hjælp af et stylesheet med klasser, hvordan skifter jeg så klassedefinitionen i min kode. Eksempelvis så er det "Home" tabben der initielt er valgt, den har en class=selectedtab, mens alle andre tabs har class=tab, når jeg så vælger en anden tab skal den så ændre sin class fra tab til selected tab. Er der en smart måde at gøre dette på ?

Kan det eventuelt laves ved hjælp af XSLT på en smart måde

(¯`·._.·[Brian Hvarregaard]·._.·´¯)



Hay Brian Hvarregaard !!!!
Jeg skal nok ligge det rigtige ud når jeg finder det, men fandt noget der måske kan bruges...
Se http://www.eit.ihk-edu.dk/8717/test.php
Det er lidt grimt, men knapperne er der uden brug af grafik. De skifter ikke når man trykker, men jeg skal nok finde den anden version og ligge den ud....

Best Regaards
Janus S. Andersen

P.s Håber du kan bruge det...

* Life is a dream in a programmers heaven *



Min erfaring med Tab lignende menuer, er at det hurtigste, pæneste, og mest stabile (crossbrowser) er at lave det med billeder/grafik.

Du laver din menu i eks. Photoshop, og laver et 'billede pr tab, og derefter slicer du billedet op.

så lidt gammeldags MouseOver Javascript, og via en metode i PHP eller ASP vises de forskellige tab-positioner

I en godt lavet tab har du 3 stadier af din tab, Valgt, hoover, og ikke valgt.
Hoover-delen er let, der benytter du JavaScript metoden. (forudsat at du benytter billeder ellers CSS)

her er et eksempel på en tab-menu som er lavet fuldt ud med grafik
http://proxy2003.nimg.dk/info/ (gaaab den var ikke sjov)

hvis det er en tab menu af denne type, kan jeg forklare nærmer hvorles den er lavet, du kan også

man kan også nørde rundt med Layers, men det er en lidt tricky affære...

Ej... jeg tror det er forholdsvist sort, det jeg har skrevet.. hvis det ikke er forståeligt, så sig lige til, så omskriver jeg det, når jeg ikke er i søvnmangel...



Findes der eventuelt en tutorial eller lignende på nettet, der beskriver det på en måde så en almindelig dødelig som mig kan forstå det? Gerne med de Javascript eksempler du beskriver.

(¯`·._.·[Brian Hvarregaard]·._.·´¯)



Ja, nu har jeg fået sovet, og efter at have læst mit indlæg, kan jeg se at det ikke var den bedste formulerede sætning jeg har præsteret... ;)

Jeg kan,når jeg kommer hjem, sende dig nogle eksempler, på JavaScriptet, og hvis du er interesseret kan jeg sende dig PSD'en jeg brugte til den tab jeg henviste til.
Dog skal det siges at den psd, er temmelig kompleks, og muligtvis er mere forvirrende end oplysende. Men det afhænger i høj grad af dit overblik mht. photoshop. Det må du selv vudere.



Jeg siger Ja Tak du må gerne sende mig de eksempler du har, jeg vil gerne se det du beskriver. De eksempler jeg har set på Internettet laver alle en række billeder hvor der er en tab der er malet mørkere (symboliserer at den er valgt) end de andre, når man så klikker på billedet bliver der loadet et helt andet billede hvor der er en anden tab der er malet mørkere. Dette virker som om man vælger en anden tab, men der er ingen dynamik i den overhovedet!

(¯`·._.·[Brian Hvarregaard]·._.·´¯)



t