Hvordan lage krympe / vokse og skyve navigasjonsmenyer med jQuery, CSS3 og HTML5 Word

I den første delen av denne opplæringen om å lage navigasjonsmenyer med jQuery, CSS3 og HTML5, demonstrerte jeg hvordan jeg kan lage trekkspillmenyeffekten og den falmende menyeffekten. I denne siste delen vil jeg vise hvordan du kan skape vokse / krympe menyeffekten og skyve menyeffekten. Alle filer som brukes i disse demonstrasjonene er tilgjengelige som nedlasting.

For denne opplæringen trenger du en grunnleggende kunnskap om HTML, CSS og JavaScript-funksjonalitet. Disse to siste eksemplernavigeringene bruker følgende funksjoner:

  • Grow and Shrink: jQuery toggleClass-funksjonen
  • Skyvemeny: jQuery slide toggle-funksjon

CSS3-koden i stilene.css- filen vår (inkludert i nedlastingen) vises her 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

Eksemplet menyklasse for anker utvidede og kollapset stiler kaller hver et bakgrunn 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 de utvidede og kollapsede menyklassene har også en grensradius 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ørne 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.

Grow / Shrink-menyen

Vekst og krymp-menyen bruker flere andre jQuery-funksjoner som jeg har gjennomgått i tidligere jQuery-segmenter, inkludert showfunksjonen. Show (), skjulfunksjonen. Skjul (), og vekslingsklasse, .toggleClass (), legg til klasse .addClass (), foreldrefunksjon .foreldre (), og fjern klassen. Fjern Class ().

JQuery-koden som er inkludert i dokumentklare-funksjonen i filen index.html for menyeneffekten vokse og krympe:

 $ ('# growShrinkMenu> li> a. expanded + ul'). vis ('normal'); 
 $ ('# growShrinkMenu> li> a'). klikk (funksjon () { 
 $ (Dette) .toggleClass ( 'utvidet') toggleClass ( 'kollapset') foreldre () finn ( '> ul') motholdet ( 'normale')....; 
 }); 
 $ ('# eksempel3 .expand_all'). klikk (funksjon () { 
 $ ( '# GrowShrinkMenu> li> a.collapsed') addClass ( 'utvidet') removeClass ( 'kollapset') foreldre () finne ( '> ul') viser ( 'normal').....; 
 }); 
 $ ('# eksempel3. collapse_all'). klikk (funksjon () { 
 . $ ( '# GrowShrinkMenu> li> a.expanded') addClass ( 'kollapset') removeClass ( 'utvidet') foreldre () finne ( '> ul') skjul ( 'normal')....; 
 }); 

HTML-koden i index.html-filen for vekst og krymping av menyeffekten:

Grow / Shrink

  • Grow / Shrink Menu
      • Vekst- og krympemenyen trappet, som vist i Chrome 18.0.1:

        Figur B

        Skyv-menyen

        Lysbildemenyen bruker lignende effekter brukt av trekkspillmenyeffekten. JQuery som brukes i denne effekten inkluderer lysbilde-veksling .slideToggle (), veksleklasse .toggleClass (), .parent (), legg til klasse .addClass (), fjern klasse. RemoveClass (), og skyv opp .slideUp (), og skyv ned .slideDown () -funksjonene. Koden slik den vises i filen index.html:

         $ ('# slideMenu> li> a. expanded + ul'). slideToggle ('medium'); 
         $ ('# slideMenu> li> a'). klikk (funksjon () { 
         ... $ (Dette) .toggleClass ( 'utvidet') toggleClass ( 'kollapset') foreldre () finn ( '> ul') slideToggle ( 'medium').; 
         }); 
         $ ('# slideMenu .expand_all'). klikk (funksjon () { 
         . $ ( '# SlideMenu> li> a.collapsed') addClass ( 'utvidet') removeClass ( 'kollapset') foreldre () finn ( '> ul') slideDown ( 'medium')....; 
         }); 
         $ ('# slideMenu .collapse_all'). klikk (funksjon () { 
         . $ ( '# SlideMenu> li> a.expanded') addClass ( 'kollapset') removeClass ( 'utvidet') foreldre () finn ( '> ul') slideUp ( 'medium')....; 
         }); 
         HTML-koden slik den vises for lysbildemenyen i filen index.html: 

        Lysbilde

        • Skyvmeny
            • Og menyen som vises i aksjon:

              Figur C

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

              © Copyright 2021 | pepebotifarra.com