Legg siste hånd på navigasjonsdesign med CSS3

Kraften til CSS3 gjør det mulig for oss å lage noen robuste navigasjons- og nedtrekksmenyer som er nyttige i de fleste nettlesere. I vårt forrige segment av denne opplæringen satte vi opp navigeringslinjen HTML, la til stiler for nav_menu-listen, en gradientbakgrunn med en kant og en kantradius, og satte deretter marginer, polstring og tekstjustering. Vi la sveveeffekter til menylisteelementene, oppdaterte fontstyling og sveveeffekter for skriftteksten og pakket sammen med å legge inn et pil ned for å indikere at det er mer innhold under overskriftene. Navigasjonsmenyen slik vi la den i forrige stykke ser slik ut nå, som vist i Chrome 16.0.912.63 m:

Figur A

Klikk for å forstørre.

Legge til rullegardinmenyene

De fleste rullegardinmenyer består av nestede, ikke-ordnede lister i en overordnet menyliste; Imidlertid vil vi i denne opplæringen tildele hver nedtrekksmeny en egen beholder ved hjelp av HTML5-elementet. HTML-navigasjonskonstruksjonen for rullegardinmenyene vises nedenfor.

  • Dette er et eksempel på innhold i en kolonne

  • Dette er et eksempel på innhold i den første kolonnen

    Dette er et eksempel på innhold i den andre kolonnen

  • Velkommen til bloggen!

    Av Jane Doe
    3. januar 2012

    Tekst til det siste blogginnlegget her for alle å glede seg over den nyeste prosaen din om alle ting som blogger!

  • Våre produkter!

    Velg fra kategoriene nedenfor

    Kjøkken

    • spise~~POS=TRUNC

      • leve

        • Bad

          • Legger til i rullegardinmenykolonnene

            Stylingen for rullegardinmenyene er:

            • angi for 1 til 5 kolonneoppsett med en absolutt posisjonering og en negativ venstre marg for å skjule dem til det trengs
            • en 1xx solid kant med unntak av toppen i samme bakgrunnsfarge som den beste navigasjonen
            • en lineær topp til bunn gradient som begynner med HEX # EDF1F5 og avslutter med HEX # 778899.
            • de samme avrundede hjørnene ved bruk av kantradius på 7px for høyre, bunn og venstre side
            • toppen sitter igjen uten radius, da den ser ut til å være sømløst festet til navigasjonsfanen på øverste nivå.
             .nav_drop_1_column, 
             .nav_drop_2_column, 
             .nav_drop_3_column, 
             .nav_drop_4_column, 
             .nav_drop_5_column { 
             margin: 4px auto; 
             stilling: absolutt; 
             venstre: -999em; 
             tekst-Justering: venstre; 
             polstring: 10px 5px 10px 5px; 
             kant: 1px solid # 3f4c6b; 
             border-top: none; 
             / * Gradient bakgrunn * / 
             bakgrunn: # EDF1F5; 
             bakgrunn: -moz-lineær gradient (topp, # EDF1F5, # 778899); 
             bakgrunn: -webkit-gradient (lineær, 0% 0%, 0% 100%, fra (# EDF1F5), til (# 778899)); 
             bakgrunn: -o-lineær gradient (topp, # EDF1F5, # 778899); 
             bakgrunn: -ms-lineær gradient (topp, # EDF1F5, # 778899); 
             bakgrunn: lineær gradient (topp, # EDF1F5, # 778899); 
             /* Avrundede hjørner */ 
             -moz-border-radius: 0px 7px 7px 7px; 
             -webkit-border-radius: 0px 7px 7px 7px; 
             -o-border-radius: 0px 7px 7px 7px; 
             -ms-border-radius: 0px 7px 7px 7px; 
             border-radius: 0px 7px 7px 7px; 
             } 

            Nå må vi stille inn bredden for hver nedtrekksbeholder, oppført individuelt med hver av kolonnens nedtrekksrør fra en til fem kolonner

            .nav_drop_1_column {bredde: 120px;}

            .nav_drop_2_column {bredde: 240px;}

            .nav_drop_3_column {bredde: 380px;}

            .nav_drop_4_column {bredde: 520px;}

            .nav_drop_5_column {bredde: 660px;}

            Nå, for å vise rullegardinmenyene på musen over, legger vi til sveve-stylingen:

             #nav_menu li: hover .nav_drop_1_kolonne, 
             #nav_menu li: hover .nav_drop_2_column, 
             #nav_menu li: hover .nav_drop_3_column, 
             #nav_menu li: hover .nav_drop_4_column, 
             #nav_menu li: hover .nav_drop_5_column { 
             venstre: -1px; 
             Topp: auto; 
             } 

            Den oppdaterte navigasjonen med rullegardinmenyen to kolonner vises i Chrome 16.0.912.63 m:

            Figur B

            Styling av kolonneinnhold

            Neste, vil vi legge til kolonnestyling for rullegardinmenyene, slik at det er separert innhold for hver kolonne i rullegardinmenyene.

             .one_column, 
             .two_column, 
             .three_column, 
             .four_column, 
             .five_column { 
             viser: inline; 
             flyte: venstre; 
             stilling: relativ; 
             margin-venstre: 5px; 
             margin-høyre: 5px; 
             } 
             .one_column {bredde: 110px;} 
             .two_kolonne {bredde: 230px;} 
             .three_column {bredde: 390px;} 
             .four_column {bredde: 510px;} 
             .five_column {bredde: 630px;} 

            Denne skjermbildet viser rullegardinmenyen med fire kolonner som er brukt som vist i Chrome 16.0.912.63 m:

            Figur C

            Nå må vi legge til endelig styling for avsnittene og overskriftene for å få innholdet vårt til å se pent og pent ut.

             #nav_menu p, #nav_menu h1, #nav_menu h2, #nav_menu h3, #nav_menu ul li { 
             font-family: 'Trebuchet MS', Helvetica, sans-serif; 
             linje-høyde: 21px; 
             font-size: 12 piksler; 
             tekst-Justering: venstre; 
             tekstskygge: 1px 1px 2px # 999999; 
             } 
             #nav_menu h1 { 
             font-size: 22 pikslene; 
             font-vekt: 500; 
             brev-avstand: -1px; 
             margin: 7px 0 14px 0; 
             } 
             #nav_menu h2 { 
             font-size: 20 piksler; 
             font-vekt: 400; 
             brev-avstand: -1px; 
             margin: 7px 0 14px 0; 
             padding-bottom: 14 piksler; 
             border-bottom: 1px solid # 999999; 
             } 
             #nav_menu h3 { 
             font-size: 14 piksler; 
             margin: 7px 0 14px 0; 
             padding-bottom: 7px; 
             border-bottom: 1px solid # 777777; 
             } 
             #nav_menu p { 
             linje-høyde: 18 piksler; 
             margin: 0 0 10px 0; 
             } 
             .strong { 
             font-vekt: bold; 
             } 
             .italic { 
             font-style: italic; 
             } 
             Så vil vi style nedtrekksmenyen listede lenker med en dyp lilla farge HEX # 500A91 og deretter med en lyseblå farge HEX # 001DFA på svevet. 
             #nav_menu li: hover nav a { 
             font-size: 18 piksler; 
             color: # 500A91; 
             } 
             #nav_menu li: hover nav a: hover { 
             color: # 001DFA; 
             } 

            Deretter må vi definere separate stiler for rullegardinmenylistene for å erstatte og overstyre stilene fra navigeringslinjen uordnede lister.

             #nav_menu li ul { 
             list-style: none; 
             padding: 0; 
             margin: 5px 5px 14px 5px; 
             } 
             #nav_menu li ul li { 
             linje-høyde: 26px; 
             stilling: i forhold; 
             tekstskygge: 1px 1px 2px # 999999; 
             padding: 0; 
             margin: 0 px; 
             float: none; 
             tekst-Justering: venstre; 
             bredde: 130px; 
             } 
             #nav_menu li ul li: hover { 
             bakgrunn: none; 
             border: none; 
             padding: 0; 
             margin: 0px 
             } 

            Neste, vil vi legge til litt styling for bilder som setter dem med skygge og venstre flot.

             .imgshadow { 
             bakgrunn: #CCCCCC; 
             polstring: 4px; 
             kant: 2px solid # 999999; 
             margin-top: 5 px; 
             -moz-box-skygge: 0px 0px 6px # A8A7AB; 
             -webkit-box-skygge: 0px 0px 6px # A8A7AB; 
             -o-boks-skygge: 0px 0px 6px # A8A7AB; 
             -ms-box-skygge: 0px 0px 6px # A8A7AB; 
             boks-skygge: 0px 0px 6px # A8A7AB; 
             } 
             .img_left { 
             bredde: auto; 
             flyte: venstre; 
             margin: 5px 5px 5px 5px; 
             } 

            La oss ta en titt på bloggfanen som bruker rullegardinmenyen med tre kolonner nå som vist i Chrome 16.0.912.63 m:

            Figur D

            Deretter kan vi legge til litt styling for uthevet innhold som vil skille seg ut i en egen bakgrunn med avrundede hjørner og en kant.

             #nav_menu li .shadow_box { 
             background-color: # 626262; 
             farge: #eeeeee; 
             tekstskygge: 1px 1px 2px # 000; 
             polstring: 4px 6px 4px 6px; 
             -moz-border-radius: 7px; 
             -webkit-border-radius: 7px; 
             -o-border-radius: 7px; 
             -ms-border-radius: 7px; 
             border-radius: 7px; 
             -webkit-box-skygge: innsatt 0 0 4px #CCCCCC; 
             -moz-box-skygge: innsatt 0 0 4px #CCCCCC; 
             -o-boks-skygge: innsatt 0 0 4px #CCCCCC; 
             -ms-box-shadow: innsats 0 0 4px #CCCCCC; 
             boksskygge: innsatt 0 0 4px #CCCCCC; 
             } 

            Og vi vil oppdatere HTML-en litt for å bruke denne stilen med følgende kode:

          • href = "#" class = "drop_down" > Om
          •  class = "nav_drop_2_column" > 
             class = "one_column" > 
             class = "shadow_box" > Dette er et eksempel på innhold i den første kolonnen med skyggekasseklassen inkludert en grå bakgrunn og kant!

             class = "one_column" > 

            Dette er et eksempel på innhold i den andre kolonnen

            Den resulterende koden for rullegardinmenyen to kolonner som vist i Chrome 16.0.912.63 m:

            Figur E

            Navigasjonsmenyen er testet og vist i Chrome, Safari og Firefox.

            Figur F

            Klikk for å forstørre.

            Den endelige HTML og CSS er tilgjengelig for nedlasting. Pakk ut filen og vis HTML i Google Chrome eller Firefox.

            © Copyright 2021 | pepebotifarra.com