Menüü li( ujuv:vasak; )

Kogu meie menüü on nüüd muutunud horisontaalseks.

Kui te ei saa aru, mis täpselt juhtus ja mida float omadus teeb, soovitan teil selle kinnisvara kohta teavet googeldada ja seda põhjalikult uurida, kuna
Ilma selleta ei saa hakkama ükski küljendusleht, seda võin teile kindlalt öelda. No okei, jätkame!

Menu li a( display:block;/* Muuda link plokielemendiks*/ padding:12px 20px;/* Määra täidis */ text-decoration: none; /* eemalda allajoon */ color:#fff;/* määra lingid valgeks */ background:#444;/* muuda taustavärvi tumedaks */ font:14px Verdana, sans-serif;/* määra fondi suurus ja nimi */ )

Üks tähtsamaid reegleid siin on display:block;. Fakt on see, et vaikimisi on lingid tekstisisesed elemendid ja taanded rakendatakse erinevates brauserites sisestele elementidele erinevalt, seega on soovitatav link teha plokkelemendiks ja alles seejärel rakendada sellele välise või sisemise taandega seotud atribuute. Nüüd ei taha ma teid koormata tarbetu teabega; aja jooksul saate tõeliste näidete abil aru, miks siin selline rõhk on pandud.

Vaatame, mis meil on, värskendage brauseri lehte ja ongi olemas!:

Nagu näete, ei näe see halb välja, võib öelda, et põhimõtteliselt on meie menüü valmis. Ainus, mis tuleb veel teha, on hõljumise ajal linkide valguse sättimine ja mulle tundub, et menüü näeb parem välja üksuste vahel olevate eraldajate abil.

Alustame eraldusmärkidega:

Menüü li( border-left:1px solid #666; ) .menu li:first-child( border-left:none; )

Mida me siin teinud oleme? Jah, kõik on väga lihtne, seadsime oma punktid (

Vaatame jälle, mis meil on:

Minu meelest on eraldusmärkidega palju parem.

Menüü li a:hover( background:#888; )

Jällegi spetsiaalse pseudoklassi abil, seekord hõljutage, määrame lingi värvi, kui hõljutage selle kohal, vaadake:

Ma arvan, et see on lahe :) Loodan, et saate sama menüü, mis minu oma.

Siinkohal ma selle õppetunni lõpetan, ma tõesti loodan, et see oli teile kasulik ja nüüd teate, kuidas lihtsat horisontaalset menüüd puhta html-i ja css-i abil üles seada. Loomulikult lõime ühetasandilise menüü, kahetasandilise menüüga (pesastatud loendiga) läheb see veidi keerulisemaks, kuid see on teise õppetunni teema, minu jaoks on see kõik. Tule uuesti, mul on hea meel!!!

Tere päevast kõigile, kes praegu seda väljaannet loevad. Täna tahan teile rääkida ühest veebisaidi loomise tööriistast, ilma milleta ükski veebiressurss hakkama ei saa. See on saidi menüü või nagu öeldakse saidi kaart. Tänapäeval on menüüde tüüpe ja alamtüüpe piiramatu arv.

Veebipoodide, ajaveebide, haridusteenuste ja muude ressursside arendajad katsetavad ning loovad järjest uusi ja ebatavalisi kaarte. Pärast artikli lugemist saate teada, millistesse põhirühmadesse igat tüüpi navigeerimispaneelid jagunevad, saate neid kõiki proovida ja õppida ka HTML-i veebisaidi menüükoodi kirjutamist. Nüüd asume asja kallale!

Märgistuskeeles menüü loomiseks on mitu võimalust. Nende põhikontseptsioon on nummerdamata loendi kasutamine. Seega kirjutavad arendajad meile tuttavas HTML 4-s lehele silte

Ja
• .

  Nagu eelmistes väljaannetes öeldud, on seotud element

  loob täpploendi ja
  • - üks loendi element. Selguse huvides kirjutame lihtsa menüü koodi:

    Navigeerimine

    Saidi navigeerimine

    • Kodu
    • Nädala uudised
    • Tehnoloogilised edusammud
    • Vestlus

    Platvormi tulekuga aga täiendati märgistuskeelt täiendavate siltidega. Seetõttu luuakse kaasaegsete veebisaitide menüü spetsiaalse sildi abil< menu>. Kasutamisel ei erine see element täpploenditest.

    Ühe asemel< ul>on ette nähtud< menu>. Olulised erinevused ilmnevad aga töö poole pealt hinnates. Niisiis, teine ​​näide kiirendab otsinguprogrammide ja robotite tööd aastal. Saidi struktuuri analüüsides saavad nad kohe aru, et see koodijupp vastutab saidikaardi eest.

    Seal on horisontaalsed, vertikaalsed ja rippmenüüd. Mõnikord on navigeerimisriba kujundatud pildina. Kuna tehnoloogiasegment on laienenud, muudetakse veebiteenuseid adaptiivseks, s.t. Lehekülje struktuur kohandub automaatselt seadme ekraani suurusega. Vaatame loetletud menüügruppe.

    Loome horisontaalse navigeerimismudeli

    Seda tüüpi navigeerimine on kõige populaarsem. Kui paneel on horisontaalselt kujundatud, asuvad kõik menüüelemendid lehe päises või "jaluses" (mõnikord on navigeerimiselemendid dubleeritud, ilmudes samaaegselt nii üla- kui ka allosas).

    Näitena loome horisontaalse paneeli, mille menüüelemendid kujundatakse kasutades CSS-i (kaskaadlaadilehti) või pigem teisendatakse. Seega asub iga üksik element kaldnurgas. Huvitatud?

    Teisenduseks kasutame css-i omadust nimega transform . Teisenduse täpsustamiseks kasutatakse sisseehitatud skewX funktsiooni, mis määrab kaldenurga kraadides.

    Kahjuks töötab iga brauser selle atribuudiga omal moel, hoolimata ettenähtud standarditest. Seetõttu loodi selle tähistamiseks spetsiaalsed eesliited:

    • -ms- (Internet Explorer)
    • -o- (ooper)
    • -veebikomplekt- (Chrome, Safari)
    • -moz- (Firefox)

    Nüüd rakendame omandatud teadmisi näite kirjutamisel.

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

    Horisontaalne paneel Kodu Ettevõtte kohta Tooted Kontaktid

    Horisontaalne paneel li (ekraan: inline-block; veeris paremal: 6 pikslit; taust: #FF8C00; teisendus: viltuX(-45°); -webkit-transform: skewX(-45deg); -o-transform: skewX(-45deg) ; -ms-transform: skewX(-45deg); -moz-transform: skewX(-45deg); ) a (ekraan: plokk; polster: 18px 35px; värv: #fff; teisendus: viltuX(40deg); -webkit- teisendus: viltuX(40°); -o-teisendus: viltuX(40°); -ms-teisendus: viltuX(40°); -moz-teisendus: viltuX(40°); ) li:hover (taust: #1C1C1C; )

  • Kodu
  • Ettevõtte kohta
  • Tooted
  • Kontaktid
  Ja nüüd vertikaalselt. Ma ütlesin vertikaalselt!

  Teise programmi puhul võtame aluseks eelmist koodi. Tahtsin, et mu vertikaalsetel menüüelementidel oleks pigem ümarad nurgad kui kaldus.
  

  Selleks kasutasin teist css-i omadust border-radius.

  Varasemates artiklites olen selle parameetriga juba töötanud, nii et ma arvan, et selle toimimise mõistmisel ei teki raskusi.

  Vertikaalne paneel li(ekraan: plokk; veeris: 13px; täidis: 13px; taust: #FF8C00; laius:20%; teksti joondus: keskel; fondi suurus: 20px; äärise raadius: 10px; ) a ( värv: # fff; ) li:hover ( taust: #1C1C1C; )

  • Kodu
  • Ettevõtte kohta
  • Tooted
  • Kontaktid

  Nagu olete juba märganud, on selle koodi peamiseks muudatuseks kuva puudumine: inline-block deklaratsioon, mis tegelikult vastutas navigeerimisüksuste horisontaalse paigutuse eest.

  Menüü alamelemendid: rippmenüü

  Oleme vaadanud navigeerimispaneelide põhirühmi, kuid neid on veel mitut sorti või veel parem, lisandmooduleid.

  

  Mõnikord tekivad olukorrad, kui mõned punktid täiendavad peamisi. Sel juhul ei saa te ilma rippmenüüdeta hakkama. Need luuakse teisenduste abil, kasutades css-i tööriistu.

  Allpool olen lisanud väikese programmi koodi, mis seda lähenemisviisi rakendab.

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

  Rippmenüü põhitekst ( polster vasak: 30%; fondi suurus: 18 pikslit; ) .m-menüü ( veeris: 0; täidis: 9 pikslit; laius: 50%; teksti joondus: keskel; ääris: 3 pikslit, ühtlane #000; taust : #FF8C00; ) .m-menu > li ( asend: suhteline; ekraan: inline-block; ) .m-menu a ( ekraan: plokk; veeris vasakul: -2px; polster: 13px; värv: #fff; ääris -vasakul: 3px pidev #fff; ) .m-menüü a:hover ( taust: #1C1C1C; ) .m-menu .s-menu ( vasak: 10px; asend: absoluutne; ekraan: puudub; laius: 155px; veeris: 0; täidis: 0; loendi stiil: puudub; taust: #FF8C00; ) .m-menu .s-menu a ( ääris: 1px solid #000; ) .m-menu > Kodu Tooted Kommid Koogid Küpsis Kontaktid

  Rippmenüü põhitekst ( polster vasak: 30%; fondi suurus: 18 pikslit; ) .m-menüü ( veeris: 0; täidis: 9 pikslit; laius: 50%; teksti joondus: keskel; ääris: 3 pikslit, ühtlane #000; taust : #FF8C00; ) .m-menu > li ( asend: suhteline; ekraan: inline-block; ) .m-menu a ( ekraan: plokk; veeris vasakul: -2px; polster: 13px; värv: #fff; ääris -vasakul: 3px pidev #fff; ) .m-menüü a:hover ( taust: #1C1C1C; ) .m-menu .s-menu ( vasak: 10px; asend: absoluutne; ekraan: puudub; laius: 155px; veeris: 0; polster: 0; loendi stiil: puudub; taust: #FF8C00; ) .m-menu .s-menu a ( ääris: 1px solid #000; ) .m-menu > li:hover .s-menu ( kuva : blokk;)

  • Kodu
  • Tooted
    • Kommid
    • Koogid
    • Küpsis
  • Kontaktid

  Enamik Interneti klassikalisi veebisaite kasutab peamise navigeerimiselemendina horisontaalset menüüd. Mõnikord võib see sisaldada mitmesuguseid lisafunktsioone - mitmetasandilisi struktuure, alamüksuste ikoone, otsinguplokki, keerulisi loendeid jne. Hiljuti oli blogis väike valik ja täna vaatame 4 praktilist näidet, kuidas CSS + HTML abil rippmenüüd teha. Teave on kasulik algajatele arendajatele ja neile, kes soovivad oma veebisaidil navigeerimist muuta.

  Esimene CSS3 rippmenüü õpetus on kollektsiooni uusim (aprillist 2016). Lahenduse plussid: selles saidi horisontaalses rippmenüüs sisaldavad alamüksused ikoone, teostust ja CSS-koodi ennast on üsna lihtne mõista ja rakendada.

  1. samm – HTML-i märgistus

  Esimene samm on luua HTML-is järjestamata loend koos selle elementide ankurlinkidega (#). Seal lisame ühte üksusesse teise pesastatud loendi, mis vastutab alammenüü eest.

  Minu armatuurlaud Meeldib Vaated Dokumendid Sõnumid Logi välja Üleslaadimised Videod Dokumendid

  • Minu armatuurlaud
  • Meeldib
  • Vaated
    • Dokumendid
    • Sõnumid
    • Logi välja
  • Üleslaadimised
  • Videod
  • Dokumendid

  2. samm – menüü kuvamine

  Eemaldame saidi horisontaalse rippmenüü elementide CSS-ist mittevajalikud taanded. Samal etapil määrame menüüelementidele fikseeritud laiuse ja kõrguse ning lisame ka ümarad nurgad.

  .menu, .menu ul, .menu li, .menu a ( veeris : 0 ; polster : 0 ; ääris : puudub ; piirjoon : puudub ; ) .menu ( kõrgus : 40 pikslit ; laius : 505 pikslit ; taust : #4c4e5a ; taust : -webkit-linear-gradient(top , #4c4e5a 0% , #2c2d33 100% ) ; taust : -moz-linear-gradient(top , #4c4e5a 0% , #2c2d33 100% ) ; taust : -o-linear-gradient (ülemine , #4c4e5a 0% , #2c2d33 100% ) ; taust : -ms-linear-gradient(top , #4c4e5a 0% , #2c2d33 100% ) ; taust : lineaarne gradient(ülemine , #4c4e5a 2c2d33 100% ) ; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; ) .menu li ( asukoht : suhteline ; loendi stiil : puudub ; float : vasak ; kuvamine : plokk; kõrgus: 40 pikslit;)

  Menüü, .menu ul, .menu li, .menu a ( veeris: 0; polster: 0; ääris: puudub; kontuur: puudub; ) .menu ( kõrgus: 40 pikslit; laius: 505 pikslit; taust: #4c4e5a; taust: - webkit-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%); taust: -moz-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%); taust: -o-linear-gradient( ülemine, #4c4e5a 0%, #2c2d33 100%); taust: -ms-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%); taust: lineaarne gradient(ülemine, #4c4e5a 0%,#2c2d33 100%); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; ) .menu li ( asukoht: suhteline; loendi stiil: puudub; hõljumine: vasakule; kuvamine: plokk ; kõrgus: 40 pikslit;)

  3. etapp – linkimine

  Lisaks stiilide põhifunktsioonidele (font, värv, kõrgus) kasutame ja loome hõljumisel teksti värvi sujuva ülemineku. Lisame menüüsse ka eraldajad, eemaldades vasakult esimeselt elemendilt ja paremalt viimaselt äärise.

  .menu li a ( ekraan : plokk ; polsterdus : 0 14 pikslit ; veeris : 6 pikslit 0 ; reakõrgus : 28 pikslit ; tekstidekoratsioon : puudub ; vasak ääris : 1 pikslit täis #393942 ; ääris parem : 1px solid #4f505 -perekond : Helvetica, Arial, sans-serif; fondi kaal: paksus kirjas; fondi suurus: 13 pikslit; värv: #f3f3f3; tekstivari: 1px 1px 1px rgba (0, 0, 0, .6)- ; -webkit üleminek: värv .2s kergendus sisse-välja -moz-üleminek: värv .2s kergendus sisse-välja -o-üleminek: värv .2s lihtne sisse-välja -ms-üleminek: värv .2s lihtne sisse -out; üleminek : värv .2s kergendus sisse-välja; ) .menu li: esimene laps a ( ääris-vasak : puudub ; ) .menu li: viimane laps a( ääris-parem : puudub ; ) .menu li : hõljutage > a ( värv : # 8fde62 ; )

  Menüü li a ( ekraan: plokk; polsterdus: 0 14 pikslit; veeris: 6 pikslit 0; rea kõrgus: 28 pikslit; tekstidekoratsioon: puudub; vasak ääris: 1 pikslit täis #393942; ääris parem: 1 pikslit #4f5058; font- perekond: Helvetica, Arial, sans-serif; fondi kaal: paks; fondi suurus: 13 pikslit; värv: #f3f3f3; teksti vari: 1px 1px 1px rgba(0,0,0,.6); -webkit-transition : värv .2s lihtne sisse-välja -moz-üleminek: värv .2s kergendus sisse-välja -o-üleminek: värv .2s lihtne sisse-välja -ms-üleminek: värv .2s lihtne sisse- välja; üleminek: värv .2s lihtne sisse-välja; ) .menu li:first-child a ( ääris-vasak: puudub; ) .menu li:last-child a( border-right: none; ) .menu li: hõljutage > a ( värv: #8fde62; )

  4. samm - alammenüü

  Kuna meil on CSS-i kasutav saidi rippmenüü, peaksime määrama ka pesastatud loendi kujunduse. Esmalt määrake veeris 40px üleval ja 0px vasakul + lisage ümarad nurgad. Alammenüü kuvamiseks/peitmiseks määrake algselt läbipaistmatuse atribuudiks null ja kursorit hõljutades üks. Kuvatava alammenüü efekti loomiseks määrake loendi kõrguse väärtuseks null ja kursoriga = 36 pikslit.

  .menu ul (positsioon: absoluutne; ülemine: 40px; vasakule: 0; läbipaistmatus: 0; taust: #1f2024; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px border 5px -raadius : 0 0 5 pikslit 5 pikslit ; -veebikomplekti üleminek: läbipaistmatus 0,25 s lihtsus 0,1 s; -moz-üleminek: läbipaistmatus 0,25 s lihtsus .1 s - o-üleminek: läbipaistmatus 0,25 s lihtsus .1 s; -ms-üleminek: läbipaistmatus .25s lihtsus .1s ; üleminek : läbipaistmatus .25s lihtsus .1s ; ) .menu li: hover > ul ( läbipaistmatus : 1 ; ) .menu ul li ( kõrgus : 0 ; ülevool : peidetud ; polsterdus : 0 ; -webkit-transition : kõrgus .25s kergus .1s -moz-üleminek: kõrgus 0,25s kergus .1s -o-üleminek: kõrgus 0,25s kergus .1s -ms-üleminek: kõrgus 0,25s kergus .1s üleminek: kõrgus 0,25s kergus .1s ; ) .menu li: hover > ul li (kõrgus: 36px; ülevool: nähtav; polsterdus: 0;)

  Menüü ul ( asukoht: absoluutne; ülemine: 40 pikslit; vasakul: 0; läbipaistmatus: 0; taust: #1f2024; -veebikomplekti piiride raadius: 0 0 5 pikslit 5 pikslit; -moz-border-radius: 0 0 5px 5px; ääris- raadius: 0 0 5 pikslit 5 pikslit; -veebikomplekti üleminek: läbipaistmatus 0,25 s lihtsus .1 s -moz-üleminek: läbipaistmatus 0,25 s kergendus .1 s -o-üleminek: läbipaistmatus 0,25 s kergus 0,1 s - ms-üleminek: läbipaistmatus . 25s lihtsus .1s; üleminek: läbipaistmatus .25s lihtsus .1s; ) .menu li:hover > ul ( läbipaistmatus: 1; ) .menu ul li (kõrgus: 0; ületäitumine: peidetud; polsterdus: 0; -veebikomplekti üleminek: kõrgus 0,25 s kergus 0,1 s -moz-üleminek: kõrgus 0,25 s lihtsus 0,1 s -o-üleminek: kõrgus 0,25 s lihtsus 0,1 s -ms-üleminek: kõrgus 0,25 s kergus 0,1 s üleminek: kõrgus 0,25 s kergus . 1s; ) .menu li:hover > ul li ( kõrgus: 36 pikslit; ülevool: nähtav; polsterdus: 0; )

  Seame linkide laiuseks = 100px, kõikide elementide alla, välja arvatud viimane, lisatakse ääris-alumine ääris. Samuti saate soovi korral alammenüü üksuste juurde pilte paigutada (tähelepanu! ärge unustage muuta koodis olevate piltide teed teie poolt kasutatavateks).

  .menu ul li a ( laius : 100 pikslit ; polster : 4 pikslit 0 4 pikslit 40 pikslit ; veeris : 0 ; ääris : puudub ; ääris-alumine : 1 pikslit täis #353539 ; ) .menu ul li : viimane laps a ( ääris : puudub .menu a.documents ( taust : url (../img/docs.png ) no-repeat 6px center ; ) .menu a.messages ( taust : url (../img/bubble.png ) no-repeat 6px center ; ) .menu a.signout ( taust : url (../img/arrow.png ) no-repeat 6px center ; )

  Menüü ul li a ( laius: 100 pikslit; polsterdus: 4 pikslit 0 4 pikslit 40 pikslit; veeris: 0; ääris: puudub; ääris-alumine: 1 pikslit täiskujuline #353539; ) .menüü ul li: last-child a ( ääris: puudub; ) . menüü a.documents ( taust: url(../img/docs.png) no-repeat 6px center; ) .menu a.messages ( taust: url(../img/bubble.png) no-repeat 6px center; ) .menu a.signout ( taust: url(../img/arrow.png) no-repeat 6px center; )

  Mulle isiklikult meeldib rakendamise lihtsus ja ikoonide kasutamine. Siin on Codepeni lõplik kood:

  

  Josh Riseri valik on visuaalselt sarnane eelmise HTML-i ja CSS-i rippmenüüga. Koodil ei ole alamvalijat ">" (kasulik mitmetasandilises kujunduses), kuid autor kasutab ilusama tulemuse saamiseks hästi CSS3 efekte (üleminek, kasti vari ja tekstivari). Allika link ei kirjelda horisontaalse rippmenüü loomise protsessi, seega annan kohe lõpliku koodi:

  

  Selles näites vaatame, kuidas teha CSS-i abil rippmenüüd, mis sisaldab lisaks üksustele ka otsinguplokki. Sarnast teostust võib sageli leida kaasaegses . Teostusaja ja keerukuse poolest on lahendus eelmistest pisut keerulisem. See avaldati 2013. aasta mais, nii et peate võib-olla mõnda asja muutma, kuigi see toimis meie testimisel hästi.

  HTML kood

  Navigeerimiseks, nagu alati, kasutatakse järjestamata loendit (koos navigeerimisklassiga). Tavalised menüüelemendid on loendielemendid (li) ja sisaldavad linke (a href) ilma klasside või ID-deta. Erandiks on selle horisontaalse rippmenüü kolm spetsiaalset elementi järgmiste ID-dega:

  • seaded — lingi pilt;
  • otsing — plokk otsingu ja vastava nupuga;
  • valikud – sisaldab alammenüüd (rakendatud läbi alamnav klassiga loendi).

  Samuti näete koodis prefiksivaba skripti CSS-i atribuutide kasutamiseks ilma eesliideteta. Rippmenüü lõplik HTML näeb välja järgmine:

  Rakendus juhatus Valikud Seaded Rakendus juhatus Valikud

  • 
  • Rakendus
  • juhatus
  • Valikud
    • Seaded
    • Rakendus
    • juhatus
    • Valikud

  Menüü CSS

  1. Põhilised stiilid ja menüüelemendid

  Esiteks määrame menüüelementide jaoks Montserrati fondi, tumehalli tausta ja fikseeritud kõrguse. Kõikidel elementidel on hõljuk: vasakjoondus ja suhteline positsioneerimine, et hiljem saaks lisada alammenüü asukohaga: absoluutne;

  @import url (http: //fonts.googleapis.com/css?family= Montserrat) ; * ( veeris : 0 ; polsterdus : 0 ; ) .nav ( taust : #232323 ; kõrgus : 60 pikslit ; kuva : inline-block ; ) .nav li ( float : left ; list-style-type : none ; position : suhteline ; )

  @import url(http://fonts.googleapis.com/css?family=Montserrat); * ( veeris: 0; polsterdus: 0; ) .nav ( taust: #232323; kõrgus: 60 pikslit; ekraan: inline-block; ) .nav li ( hõljumine: vasakule; loendi stiili tüüp: puudub; asukoht: suhteline; )

  2. Linkide vormindamine

  Menüüelemendid kasutavad põhikujundust + . Kõrgus on sama, mis nav klassis. Menüü alguses oleva pildilingi #settings puhul on joondus määratud.

  .nav li a ( fondi suurus : 16 pikslit ; värv : valge ; ekraan : plokk ; reakõrgus : 60 pikslit ; polster : 0 26 pikslit ; tekstidekoratsioon : puudub ; vasak ääris : 1 pikslit täis #2e2e2e ; fondiperekond : Montserrat , ilma serifita ; teksti vari : 0 0 1px rgba ( 255 , 255 , 255 , 0,5 ) ; ) .nav li a: hõljumine ( taustavärv : #2e2e2e ; ) #settings a ( polster : kõrgus : 18:px2 ; ; fondi suurus: 10 pikslit; rea kõrgus: 24 pikslit; )

  Nav li a ( fondi suurus: 16 pikslit; värv: valge; ekraan: plokk; rea kõrgus: 60 pikslit; polster: 0 26 pikslit; teksti kaunistus: puudub; vasakpoolne ääris: 1 pikslit, kindel #2e2e2e; fondiperekond: Montserrat, sans-serif; text-shadow: 0 0 1px rgba(255, 255, 255, 0,5); ) .nav li a:hover ( taustavärv: #2e2e2e; ) #settings a ( polster: 18px; kõrgus: 24px; fondi suurus: 10 pikslit; rea kõrgus: 24 pikslit; )

  3. Otsinguplokk

  Sellel elemendil on kindel laius ja see koosneb mitmest osast – rohelise taustaga sisestusväljast (#otsingu_tekst) ja otsingunupust (#search_button). Mõnes brauseris võib taustavärv olla hall.

  #otsing ( laius : 357 pikslit ; veeris : 4 pikslit ; ) # otsingu_tekst ( laius : 297 pikslit ; täidis : 15 pikslit 0 15 pikslit 20 pikslit ; fondi suurus : 16 pikslit ; fondiperekond : Montserrat , sans-serif 0 : no 5p ; ; veeris-parem : 0 ; värv : valge ; piirjoon : puudub ; taust : #1f7f5c ; hõljuk : vasak ; kasti suurus : ääriskast ; üleminek : kõik 0,15 s; ) :: -veebikomplekti sisend-kohahoidja ( /* WebKiti brauserid */ värv : valge; ) : -moz-placeholder ( /* Mozilla Firefox 4 kuni 18 */ värv : valge ; ) :: -moz-placeholder ( /* Mozilla Firefox 19+ */ värv : valge ; ) : -ms-input-placeholder ( /* Internet Explorer 10+ */ värv : valge ; ) #otsingu_tekst : fookus ( taust : rgb (64 , 151 , 119 ) ; ) #search_button ( ääris : 0 puudub ; taust : #1f7f5c url (search.png) keskel, ei kordu; laius: 60 pikslit; hõljumine: vasakule; polsterdus: 0; teksti joondamine: keskel; kõrgus: 52 pikslit; kursor: kursor;)

  #otsing ( laius: 357 pikslit; veeris: 4 pikslit; ) #otsingu_tekst( laius: 297 pikslit; täidis: 15 pikslit 0 15 pikslit 20 pikslit; fondi suurus: 16 pikslit; fondiperekond: Montserrat, sans-serif; ääris: 0 puudub; kõrgus: 52p ; veeris-parem: 0; värv: valge; piirjoon: puudub; taust: #1f7f5c; hõljumine: vasak; kasti suurus: ääris-kast; üleminek: kõik 0,15 s; ) ::-webkit-input-placeholder ( /* WebKiti brauserid */ värv: valge; ) :-moz-placeholder ( /* Mozilla Firefox 4 kuni 18 */ värvus: valge; ) ::-moz-placeholder ( /* Mozilla Firefox 19+ */ värv: valge; ): -ms-input-placeholder ( /* Internet Explorer 10+ */ värv: valge; ) #search_text:focus ( taust: rgb(64, 151, 119); ) #search_button ( ääris: 0 puudub; taust: #1f7f5c url (search.png) keskel, ei kordu; laius: 60 pikslit; hõljumine: vasakule; polsterdus: 0; teksti joondamine: keskel; kõrgus: 52 pikslit; kursor: kursor; )

  4. Rippmenüü

  Viimane puudutus võimaldab meil luua CSS-is rippmenüü, mis käivitub viimase #options üksuse jaoks.

  #options a( border-left : 0 none ; ) #options > a ( background-image : url (triangle.png ) ; background-position : 85% center ; background-repeat : no-repeat ; polster-right : 42px ; ) .subnav ( nähtavus : peidetud ; asukoht : absoluutne ; ülemine : 110 % ; parem : 0 ; laius : 200 pikslit ; kõrgus : automaatne ; läbipaistmatus : 0 ; üleminek : kõik 0,1 s ; taust : #232323 ; ) .atsubnav li : none ; ) .subnav li a (ääris-alumine : 1px solid #2e2e2e ; ) #valikud : hõljutage .subnav ( nähtavus : nähtav ; ülemine : 100% ; läbipaistmatus : 1 ; )

  #options a( border-left: 0 none; ) #options>a ( background-image: url(triangle.png); tausta-positsioon: 85% keskel; taustakordus: no-repeat; polster-parem: 42px; ) .subnav ( nähtavus: peidetud; asukoht: absoluutne; ülemine: 110%; parem: 0; laius: 200 pikslit; kõrgus: automaatne; läbipaistmatus: 0; üleminek: kõik 0,1 s; taust: #232323; ) .subnav li ( hõljumine : puudub; ) .subnav li a ( ääris-alumine: 1px solid #2e2e2e; ) #options:hover .subnav ( nähtavus: nähtav; ülemine: 100%; läbipaistmatus: 1; )

  Stiilides leiate alammenüü tähistamiseks kolmnurga taustapildi (triangle.png) sisestamise - ärge unustage näidata selle ja teiste näidete piltide õiget teed. Alammenüü välimus realiseeritakse läbipaistmatuse omaduse abil. Lõplik lahendus koodpenil:

  

  See valik kasutab peamiselt CSS2.1 tehnikaid, lahendus pluss või miinus on uus - märtsiks 2015. Kui teil on saidi horisontaalsest rippmenüüst puudu üks alamtase, siis selles näites on kolm korraga. Kasutades pseudoklass:ainult-laps, lisatakse üksustele sümbol “+”, mis näitab alammenüü olemasolu.

  Üldiselt hea ja lihtne näide. Rakendusprotsessi me üksikasjalikult ei kirjelda, sest... see sarnaneb eelmistele - kõigepealt loote HTML-i raamistiku ja seejärel lisate sellele järk-järgult stiile. Laadige alla lõplik kood, kasutades linki allikale; saate seda osaliselt Codepenis vaadata:

  Kokku

  Eespool vaatlesime 4 võimalust rippmenüü loomiseks CSS + HTML-i abil, kuigi Internetis on palju rohkem sarnaseid näiteid. jQueryga on lahendusi, kuid see on tõenäoliselt kasulik ainult mõne eriefekti ja mittestandardsete ülesannete rakendamiseks. Enamikul juhtudel piisab CSS + HTML kombinatsioonist, eriti kuna nüüd on menüü põhinõuded mugavus ja kiire laadimiskiirus.

  Lõpuks kaks märkust ülaltoodud koodide kohta. Mõned näited kasutavad rippmenüü jaoks CSS-i pilte, nii et peate pilditeed hoolikalt üle vaatama ja esitama oma saidi jaoks õiged väärtused. Teiseks on osa lahendusi 2-3 aastat vanad, seega tasuks veel kord täiendavalt kontrollida nende toimivust erinevates brauserites.

  Kui teate mõnda muud huvitavat kaasaegset horisontaalsete rippmenüüde rakendust veebisaidi jaoks, saatke lingid kommentaaridesse.

  Loome saidi jaoks lihtsa horisontaalse navigeerimismenüü. Selleks kasutame lihtsaid võtteid, mille tulemuseks on meie menüü õige kuvamine kõigis brauserites.

  Niisiis, alustame. Koostame nimekirja oma menüü nimedega. Kauba nimed olgu: “Avaleht”, “Uudised”, “Tooted”, “Teenused”, “Partnerid”, “Kontaktid”. Looge näiteks Dreamweaweri programmi või tavalise märkmiku abil uus fail nimega menu.html. Sellesse asetame kehasiltide vahele oma menüü. See on tavaline täpploend ul-ist koos li elementidega. Loomulikult teeme igast menüüelemendist lingi, kuhu URL-i asemel sisestame räsi #. Looge Photoshopi abil pilt, mille suurus on 3x30 px, gradienttäidisega, nagu on näidatud alloleval joonisel. Salvestame faili GIF-vormingus. Nimetagem seda bg.gif. See pilt toimib meie menüü taustapildina.

  Siin on faili menu.html sisu:

  Lihtne brauseriülene horisontaalne menüü

  • Kodu
  • Uudised
  • Tooted
  • Teenused
  • Partnerid
  • Kontaktid

  Nüüd loome eraldi stiilifaili nimega main.css. Selle loetelu on täielikult näidatud allpool.

  Ul ( margin:0; /*null polster*/ polster loendi tüüp ja sisu */ background-image: url(bg.gif); /*taustapildi määramine*/ background-repeat:repeat-x /*korda meie pilti horisontaalselt*/ list-style:none; /*eemaldage loendi markerid*/ background-color:#4778c3; /*seadke pildi taustavärv*/ font-size:13px; /*seadke fondi suurus*/ font-family:Arial, Helvetica, sans-serif ; /*fondi määramine*/ ul li ( float:left; /*joonda loendielemendid vasakule*/ ) ul a ( display:block; /*menüü linkide esitamine plokielementidena*/ laius:100px; /* määrake ploki suurus*/kõrgus:30px; /* ja ploki kõrgus*/ text-align:center; /*centered inscription*/ line-height: 2,1em; /*reavahe*/ text-decoration:none; /* eemalda linkidelt allakriipsutus*/ color:#fff; /*lingi teksti värv - valge*/ ääris-parem:#fff ühtlane 1px; /*ääris ploki paremal küljel (valge joon 1px)*/ ul a: hõljuta (värv:#ccc; /*link muudab kursorit hõljutades värvi*/ )

  Arvan, et faili main.css sisu kohta ei tohiks küsimusi tekkida, näpunäited kirjutasin kommentaaridesse piisavalt üksikasjalikult ja selgelt, nii et ma ei hakka ennast kordama. Ärge unustage seda ühendada meie menu.html lehele kasutades

  Tehke kokkuvõte. Selle tulemusena saime täiesti brauseriülese horisontaalse menüü, mis näeb sama välja mitte ainult kõigis kaasaegsetes brauserites, vaid ka sellistes haruldustes nagu IE 5.5 ja IE 6.0. Kõik menüüelemendid on esitatud plokkidena ja nende mõõtmed on 100 px laius ja 30 px kõrgus. Menüüüksuste eraldajana kasutatakse plokielemendi kujundust, kasutades valget parempoolset äärist, mille paksus on 1 pikslit. See on praktiliselt lihtsaim viis horisontaalse menüü rakendamiseks. Loomulikult saate seda soovi korral muuta, muuta see kaunimaks ja funktsionaalsemaks, kasutades kujutlusvõimet, CSS-i omadusi ja täiendavaid graafilisi elemente. Noh, meie horisontaalne menüü näeb välja umbes selline:

  Selle lahenduse plussid:
  Lihtne teha
  Lihtne kood
  Pole tabeleid ega javascripti
  Brauseritevaheline ühilduvus: menüü näeb kõigis brauserites ühesugune välja
  Kasutatakse ainult ühte joonist
  Minimaalne kood lehel menu.html
  Minimaalne kood stiilide juurutamiseks failis main.css

  Selles näites kasutatud faile saab arhiivist alla laadida