Moro med menyer: Navigering ved hjelp av jQuery, CSS3 og HTML5

Menynavigering kommer i mange stiler, farger, smaker og funksjonalitet, og det er et av de viktigste elementene i webdesign, ettersom det gir besøkende en tydelig sti til å krysse nettstedet. Siden de fleste besøkende ikke kjenner den logiske katalogstrukturen på nettstedet ditt, er det opp til innholdseierne og webutviklerne å tilby intuitive og konvensjonelle løsninger for menynavigering.

Alle filene som er brukt i eksemplene for denne opplæringen er tilgjengelige for nedlasting, slik at du kan følge med.

For denne opplæringen vil det hjelpe å ha en grunnleggende kunnskap om HTML-, CSS- og JavaScript-funksjonalitet. Denne opplæringen vil inkludere innovative løsninger for å lage en sammenleggbar navigasjonsmeny ved hjelp av jQuery, CSS3 og HTML5 med fire eksempler på navigasjoner. I dagens innlegg vil jeg vise deg hvordan du lager en trekkspillmeny og en falmende meny.

  • Trekkspillmeny har bl.a-funksjonen jQuery-lysbilde blant andre.
  • Fading Menu bruker blant annet jQuery fade-in og fade-out funksjoner.
CSS3-koden i stilarkfilen styles.css er listet nedenfor og brukes for alle navigasjonsmenyeffekter:
 @charset "utf-8"; 
 / * CSS-dokument * / 
 kropp { 
 font: "Trebuchet MS", Arial, Helvetica, sans-serif; 
 } 
 en { 
 tekstdekorasjon: ingen; 
 } 
 #slideMenu, #navFade, #navGrowShrink, #navAccordion { 
 flyte: venstre; 
 } 
 .expand_all, .collapse_all { 
 markør: peker; 
 } 
 .eksempelMeny { 
 skriftstørrelse: 90%; 
 listestil: ingen; 
 margin: 0; 
 polstring: 0; 
 vertikal justering: topp; 
 bredde: 180px; 
 } 
 .eksempelMeny ul { 
 skjerm: ingen; 
 listestil: ingen; 
 margin: 0; 
 polstring: 0; 
 } 
 #slideMenu, #fadeMenu, #growShrinkMenu, #accordionMenu { 
 margin: 0; 
 } 
 #slideMenu li, #fadeMenu li, #growShrinkMenu li, #accordionMenu li, .eksempelMenu li { 
 bakgrunnsbilde: ingen; 
 margin: 0; 
 polstring: 0; 
 } 
 .eksempelMeny ul ul { 
 skjerm: blokkering; 
 } 
 .eksempelMeny ul ul li a { 
 polstring-venstre: 20px; 
 bredde: 154px; 
 } 
 .eksempelMeny a { 
 farge: # 000; 
 markør: peker; 
 skjerm: blokkering; 
 font-vekt: fet; 
 margin-venstre: 0; 
 polstring: 9px 2px 2px 22px; 
 bredde: 152px; 
 } 
 .eksempelMeny a.utvidet { 
 bakgrunn: # 00d4d5 url ('bilder / minus_25.png') ingen gjentagelse -2px 50%; 
 -moz-border-radius: 7px 7px 1px 1px; 
 border-radius: 7px 7px 1px 1px; 
 } 
 .eksempelMeny a.klappet { 
 bakgrunn: # 00adaf url ('bilder / pluss_25.png') ingen gjenta -2px 50%; 
 -moz-border-radius: 7px 7px 1px 1px; 
 border-radius: 7px 7px 1px 1px; 
 } 
 .eksempelMeny a: hover { 
 tekstdekorasjon: ingen; 
 } 
 .eksempelMeny ul a { 
 bakgrunn: # 6db2ab; 
 border-top: 1px solid # 657c7c; 
 farge: # 000; 
 skjerm: blokkering; 
 font-vekt: normal; 
 polstring: 2px 2px 2px 10px; 
 bredde: 164px; 
 } 
 .eksempelMeny ul a: lenke { 
 font-vekt: normal; 
 } 
 .eksempelMeny ul a: hover { 
 bakgrunn: # c1ebec; 
 tekstdekorasjon: understreking; 
 } 
 .eksempelMeny li.active a { 
 bakgrunn: #fff; 
 } 
 .eksempelMeny li.active li a { 
 bakgrunn: # e8e8e8; 
 } 
 #slideMenu li.footer, #fadeMenu li.footer, #growShrinkMenu li.footer, #accordionMenu li.footer, .eksempelMenu .footer { 
 border-top: 2px solid # 657c7c; 
 bakgrunn: # 657c7c; 
 høyde: 9px; 
 linjehøyde: 17px; 
 margin: 0px 0 10px 0; 
 -moz-border-radius: 0px 0px 7px 0px; 
 border-radius: 0px 0px 7px 0px; 
 kant: solid 2px # 657c7c; 
 bredde: 172px; 
 } 
 .exampleMenu .footer span { 
 skjerm: ingen; 
 } 

Flere notater om CSS og CSS3 styling

Eksempelet menyklasse for anker utvidede og kollapsede stiler kaller hver et bakgrunns-URL-bilde, for den utvidede stilen er det henting av minus-ikonet (minus_25.png) og for den kollapsede stilen er det henting av plussikonet (pluss_25.png), begge vises nedenfor og er inkludert i nedlastingen.

Figur A

Både den utvidede og kollapsede menyklassen utformer også en grense-radius som bruker CSS3 til å lage 7px avrundede hjørner øverst til venstre og øvre høyre hjørne, med et lett utjevnet hjørne av nederste høyre og nedre venstre hjørner med 1px hver.

Bunntekststyling for hver menyseksjon bruker også grensradiusen som legger til i et 7px avrundet høyre hjørne. Dette gir en jevn faneeffekt for hvert valg av navigasjonsmeny.

De fleste av jQuery-funksjonene som brukes i demonstrasjonsnavigeringsmenyen i dette blogginnlegget, er allerede gjennomgått i tidligere opplæringsprogrammer; denne gangen blir de brukt og brukt til mer praktiske formål og i forbindelse med CSS3-styling og HTML5-teknologi, spesielt elementet.

Trekkspillmeny

Trekkspilleffekten har eksistert i noen tid og er ganske populær, spesielt med spørsmål og svar (spørsmål og svar) og ofte stilte spørsmål (FAQ) sider; den har imidlertid også et sted som et alternativ i menynavigering. Kjernen jQuery brukt for trekkspilleffekten inkluderer vekslingsklassen .toggleClass () og lysbilde .slideToggle () -funksjoner for både utvidede og kollapsede menyer; Brukes også er overfunksjonen .parent () og klikkfunksjon. klikk (funksjon (). Hastigheten til lysbildebrillen kan også justeres avhengig av preferansene dine, inkludert 'langsom', 'medium' eller 'rask'.

Trekkspillmenyen er godt egnet for bruk som sidefeltmeny og har også muligheter for å gjøre spesifikke seksjoner utvidet som standard ved sideinnlasting ved å indikere seksjonsklassen som 'utvidet' eller 'kollapset'.

JQuery-koden nedenfor for trekkspilleffekten er inkludert i dokumentklare-funksjonen i filen index.html (inkludert i nedlastingen):

 $ ('# trekkspillMeny> li> a.utvidet + ul'). slideToggle ('medium'); 
 $ ('# trekkspillMeny> li> a'). klikk (funksjon () { 
 $ ('# trekkspillMeny> li a.utvidet'). ikke (dette) .toggleClass ('utvidet'). toggleClass ('kollapset'). overordnet (). finne ('> ul'). slideToggle ('medium') ; 
 ... $ (Dette) .toggleClass ( 'utvidet') toggleClass ( 'kollapset') foreldre () finn ( '> ul') slideToggle ( 'medium').; 
 }); 

Og her er HTML-koden, som også er i index.html- filen vår for trekkspilleffekten:

Trekkspill

  • Trekkspill seksjon 1
      • Trekkspill seksjon 2
            • Trekkspill seksjon 3
              • Her er standardvisningen av trekkspillmenyen som vist i Chrome 18.0.1:

                Figur B

                Endre klassen for "trekkspill seksjon 1" -anker til "utvidet", og standardvisningen ved sidebelastning utvider den første seksjonen som vist i Chrome 18.0.1. Legg merke til listeelementet "Trekkspill seksjon 1" er nå aktivt og bakgrunnsfargen er endret for å indikere handlingen:

                Figur C

                Nå klikker du hvor som helst i listen "Trekkspill seksjon 2" og den første delen kollapser mens den andre delen blir aktiv og utvides. dette er trekkspilleffekten i aksjon under overgangen:

                Figur D

                Og med trekkspillovergangen fullstendig fullført:

                Figur E

                Hvis du vil leke med hastighetsinnstillingene i jQuery-koden der du ser "medium" indikert for innstillingene for lysbildefremvisning, endrer du disse til enten "sakte" eller "raskt", og oppdater deretter nettleseren og test seksjonene på nytt. Klikk på en hvilken som helst sammenstøpt seksjon og legg merke til hvordan en tidligere utvidet seksjon vil lukke. Hvis du ønsket å få alle seksjoner utvidet etter dokumentbelastning, må du endre alle klassene til "utvidet".

                Fading meny

                Fading-menyen bruker flere flere jQuery-funksjoner, inkludert fade i. FadeIn (), fade out. FadeOut (), veksle klasse .toggleClass (), legge til klasse .addClass (), og fjerne klasse. RemoveClass (), og bruker en hvis, ellers funksjon for fade in og fade out effekt, avhengig av om staten er kollapset eller utvidet.

                JQuery-koden som er inne i dokumentklare-funksjonen i index.html-filen for fading-menyeffekten vises nedenfor:

                 $ ('# fadeMenu> li> a. expanded + ul'). fadeIn (); 
                 $ ('# fadeMenu> li> a'). klikk (funksjon () { 
                 var el = $ (dette) .parent (). finne ('> ul'); 
                 if ($ (dette) .hasClass ( 'kollapset')) 
                 $ (El) .fadeIn (); 
                 ellers 
                 $ (El) .fadeOut (); 
                 $ (Dette) .toggleClass ( 'utvidet') toggleClass ( 'kollapset.'); 
                 }); 
                 $ ('# eksempel2 .expand_all'). klikk (funksjon () { 
                 . $ ( '# FadeMenu> li> a.collapsed') addClass ( 'utvidet') removeClass ( 'kollapset') foreldre () finne ( '> ul') fadeIn ()....; 
                 }); 
                 $ ('# eksempel2. collapse_all'). klikk (funksjon () { 
                 . $ ( '# FadeMenu> li> a.expanded') addClass ( 'kollapset') removeClass ( 'utvidet') foreldre () finne ( '> ul') fadeout ()....; 
                 }); 

                Her er HTML inkludert i index.html-filen for falming-menyeffekten:

                Falme

                • Fade Menu
                    • Fade-menyen i aksjon, gikk gjennom som vist i Chrome 18.0.1; i utgangspunktet er menyen kollapset:

                      Figur F

                      Hvert av de sammenleggbare menyalternativene kan endres for å passe til ditt eget fargeskjema og dimensjoner ved å endre stilene.css. Lek med koden og se hvilke nye varianter du kan komme med på egen hånd.

                      I vårt neste segment vil vi gå gjennom vekst- og krympemenyen og lysbildemenyen ved å bruke flere jQuery-funksjoner. I den andre delen vil jeg også lede deg gjennom opprettelsen av en navigasjonsmeny som vokser og krymper og en som har en glidende effekt.

                      © Copyright 2020 | mobilegn.com