Wordpress -Avansert dropdown meny
- Trådstarter Dseller
- Startdato
haha, hvordan?
Dag Frogner
Supermedlem
Denne vil nok klare jobben fint: SevenSpark Labs ? UberMenu - Responsive Mega Menu WP Plugin
Aller først: Lag menyen i ren html og css. Få det til å funke slik du vil ha det.
Steg 2 er å sette opp menyen i wordpress under appearance (utseende) -> menus (menyer) med strukturen du vil ha (du kan sette opp ting i en struktur der).
Så må du bruke littegrann tid med wordpress-dokumentasjonen. Ta en titt på custom walker functions - den kan hjelpe deg med å legge til den HTMLen du vil ha.
Neste steg på veien er å finne ut hvordan denne spesielle HTMLen skal populeres. Du KAN vel gjøre det gjennom walker-funksjonen, men det er kanskje ikke så bra for din situasjon. Javascript kan løse veldig mye.
Da burde du være i mål
Det finnes noen plugins også, blant annet MegaMenu pluginen. Sikkert mange også, men mer gadd jeg ikke lete på dine vegne ;-)
Håper dette får deg i gang.
Enig
Det aller beste og mest idielle ville være å lage menyen i HTML og CSS uten noen bruk av Plugins. Plugins må oppdateres, og kanskje den slutter bli vedlikeholdt, og så er det enda en ting for siden å laste.
Hvis du bruker litt tid på wordpress.org sine dokumentasjonsider så ligger det eksempler og informasjon om måter du kan gjøre dette på.
Det aller beste og mest idielle ville være å lage menyen i HTML og CSS uten noen bruk av Plugins. Plugins må oppdateres, og kanskje den slutter bli vedlikeholdt, og så er det enda en ting for siden å laste.
Hvis du bruker litt tid på wordpress.org sine dokumentasjonsider så ligger det eksempler og informasjon om måter du kan gjøre dette på.
Det aller beste og mest idielle ville være å lage menyen i HTML og CSS uten noen bruk av Plugins. Plugins må oppdateres, og kanskje den slutter bli vedlikeholdt, og så er det enda en ting for siden å laste.
Hvis du bruker litt tid på wordpress.org sine dokumentasjonsider så ligger det eksempler og informasjon om måter du kan gjøre dette på.
+1 til dette.
Du vil bruke en del tid på å lage din første walker og vil klø deg selv litt i hodet.
Men når du har dreisen på hooks, walkers, filter, m.m. og muligens må få laget regulære uttrykk, kan du gjøre det uten tredjepartsinnstikk.
Jo flere innstikk, jo flere sikkerhetshull, avhengighet av en tredjepart som du aldri vet om oppdateringen ødelegger siden din eller ei
En annen ting er at om du kjører f.eks. W3 Total cache og kjører en theme switch basert på user agent (feks en jquerymobile utgave), vil innstikkene dine være aktive for begge.Men om du lager det inn i functions-filen, vil du lage en egen functions for jquerymobile-utgaven og derfor slipper du for eksempel unødvendig bildezoom på mobilutgaven.
PS! I teamet ditt, bør du legge inn CSS og JS-filer via functions filen
(register script og register style). Du kan også via parameter gjøre slik at de sendes til foten av koden, for å omgå begrensningene til http1/1 protokollen.Ellers er en slik meny relativt enkel å lage via. JQuery Du kan endre klasser, du kan bruke transitions, animations, etc. veldig mye du kan gjøre.. Men husk å trigge både på hover og på click.. (nettbrett/mobil har jo ikke hover).
Samtidig vil gjerne de med mus forvente en slags forhåndsvisning.
Her er en av tusen måter å løse det på:
.animate() | jQuery API Documentation
For å få dette til, kan du bruke data- for å knytte sammen.
Du må jo få frem en div eller en section eller noe, med en gitt ID.
For å referere til denne, kan du for eksempel ha en data-undermeny_id=""
Så når du da trigger på menyen (klikk på menyen), leser du ut attributten data-undermeny_id og bruker denne referansen når du skal for eksempel animate() inn en undermeny. Samme gjør du da på hover og du bør vel kanskje vurdere hvordan dette skal virke med tastatur (kanskje focus?).
Du kan endre klasser, du kan bruke transitions, animations, etc. veldig mye du kan gjøre.. Men husk å trigge både på hover og på click.. (nettbrett/mobil har jo ikke hover).Samtidig vil gjerne de med mus forvente en slags forhåndsvisning.
Her er en av tusen måter å løse det på:
.animate() | jQuery API Documentation
For å få dette til, kan du bruke data- for å knytte sammen.
Du må jo få frem en div eller en section eller noe, med en gitt ID.
For å referere til denne, kan du for eksempel ha en data-undermeny_id=""
Så når du da trigger på menyen (klikk på menyen), leser du ut attributten data-undermeny_id og bruker denne referansen når du skal for eksempel animate() inn en undermeny. Samme gjør du da på hover og du bør vel kanskje vurdere hvordan dette skal virke med tastatur (kanskje focus?).
Jeg tok å lagde en JSFiddle til deg:
Edit fiddle - JSFiddle
Der har du konseptet bak en slik meny...
Om du koder videre på den der, slik at den blir sånn som du vil.
Deretter må du som nevnt ovenfor lage en egen walker.
Undermenyene er jo spørsmål om hvordan de skal bygges opp.
Det kan være du må lage skreddersydd kode for diverse ting, det spørs hvor dynamisk eller statisk det skal være. Men man kan ha hooks og filter på mye.
Edit fiddle - JSFiddle
Der har du konseptet bak en slik meny...
Om du koder videre på den der, slik at den blir sånn som du vil.
Deretter må du som nevnt ovenfor lage en egen walker.
Undermenyene er jo spørsmål om hvordan de skal bygges opp.
Det kan være du må lage skreddersydd kode for diverse ting, det spørs hvor dynamisk eller statisk det skal være. Men man kan ha hooks og filter på mye.
adeneo
Medlem
kjøpt og betalt.
Fin løsning du lagde i CSS
PS. ser jeg la ut feil revisjon tidligere, var denne jeg skulle legge ut:
Edit fiddle - JSFiddle
En ting man kan gjøre om man bruker JS-utgaven, er å kombinere det med JSON-kall for dynamisk lasting. Det er jo selvsagt mulig å gjøre i den CSS utgaven også
--- med minify på menyen
Edit fiddle - JSFiddle
Sist redigert: