Izbornik li( float:left; )

Cijeli naš jelovnik sada je vodoravan.

Ako ne razumijete što se točno dogodilo i što svojstvo float radi, preporučam da guglate informacije o ovom svojstvu i temeljito ih proučite, jer
Niti jedna stranica prijeloma ne može bez toga, to vam sa sigurnošću mogu reći. Pa dobro, nastavimo!

Izbornik li a( display:block;/* Učinite vezu blok elementom*/ padding:12px 20px;/* Postavite padding */ text-decoration: none; /* uklonite podcrtavanje */ color:#fff;/* postavite veze u boji bijele */ background:#444;/* učinite boju pozadine tamnom */ font:14px Verdana, sans-serif;/* postavite veličinu fonta i naziv */ )

Jedno od najvažnijih pravila ovdje je display:block;. Činjenica je da su veze prema zadanim postavkama umetnuti elementi, a uvlake se različito primjenjuju na umetnute elemente u različitim preglednicima, stoga je preporučljivo učiniti vezu blok elementom i tek onda na nju primijeniti svojstva povezana s vanjskim ili unutarnjim uvlakama. Sada vas ne želim opterećivati ​​nepotrebnim informacijama; s vremenom ćete na stvarnim primjerima i sami shvatiti zašto je ovdje stavljen takav naglasak.

Da vidimo što imamo, osvježite stranicu preglednika i eto ga!:

Kao što vidite, ne izgleda loše, možemo reći da je, u principu, naš jelovnik spreman. Jedino što još treba napraviti je namjestiti svjetlo linkova pri lebdenju, a čini mi se da će izbornik bolje izgledati sa separatorima između stavki.

Počnimo s graničnicima:

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

Što smo napravili ovdje? Da, sve je vrlo jednostavno, postavili smo svoje bodove (

Da vidimo što smo opet dobili:

Po mom mišljenju, puno je bolje s razdjelnicima.

Izbornik li a:hover( background:#888; )

Opet koristeći posebnu pseudo-klasu, ovaj put hover, postavljamo boju linka kada lebdimo preko njega, pogledajte:

Mislim da je cool :) Nadam se da ćete na kraju imati isti jelovnik kao moj.

Ovo je mjesto gdje ću završiti ovu lekciju, stvarno se nadam da vam je bila korisna i sada znate kako rasporediti jednostavan horizontalni izbornik koristeći čisti html i css. Naravno, napravili smo jednorazinski izbornik; bit će malo kompliciranije s dvorazinskim izbornikom (s ugniježđenom listom), ali to je tema za drugu lekciju, to je sve za mene. Dođite opet, bit će mi drago!!!

Dobar dan svima koji sada čitaju ovu publikaciju. Danas vam želim reći o jednom od alata za izradu web stranica bez kojih nijedan web resurs ne može. Ovo je izbornik stranice ili kako se još kaže mapa stranice. Danas postoji neograničen broj vrsta i podvrsta jelovnika.

Programeri internetskih trgovina, blogova, obrazovnih usluga i drugih resursa eksperimentiraju i stvaraju sve više novih i neobičnih karata. Nakon čitanja članka saznat ćete na koje su glavne skupine podijeljene sve vrste navigacijskih ploča, moći ćete isprobati svaku od njih, a također ćete naučiti kako napisati kod izbornika za html web stranicu. Sada prijeđimo na posao!

Postoji nekoliko načina za stvaranje izbornika u označnom jeziku. Njihov osnovni koncept je korištenje nenumeriranog popisa. Dakle, u html 4 koji nam je poznat, programeri pišu oznake na stranici

I
• .

  Kao što je navedeno u prethodnim publikacijama, upareni element

  stvara popis s grafičkim oznakama i
  • - jedan element liste. Radi jasnoće, napišimo kôd za jednostavan izbornik:

    Navigacija

    Navigacija web stranice

    • Dom
    • Vijest tjedna
    • Tehnološki napredak
    • razgovor

    Međutim, s pojavom platforme, označni jezik je nadopunjen dodatnim oznakama. Zbog toga je izbornik modernih web stranica kreiran pomoću posebne oznake< menu>. U upotrebi se ovaj element ne razlikuje od popisa s grafičkim oznakama.

    Umjesto jednog< ul>je propisano< menu>. Međutim, značajne razlike se pojavljuju kada se sudi sa strane rada. Dakle, drugi primjer ubrzava rad pretraživačkih programa i robota u . Kada analiziraju strukturu stranice, oni odmah razumiju da je ovaj dio koda odgovoran za mapu stranice.

    Postoje vodoravni, okomiti i padajući izbornici. Ponekad je navigacijska traka dizajnirana kao slika. Budući da se segment tehnologije proširio, web usluge se prilagođavaju, tj. Struktura stranice automatski se prilagođava veličini zaslona uređaja. Pogledajmo navedene grupe izbornika.

    Kreirajmo horizontalni navigacijski model

    Ova vrsta navigacije je najpopularnija. Kada je ploča dizajnirana vodoravno, sve stavke izbornika nalaze se u zaglavlju stranice ili u "podnožju" (ponekad se elementi navigacije dupliciraju, pojavljujući se istovremeno i na vrhu i na dnu).

    Kao primjer, izradit ćemo horizontalnu ploču čije će stavke izbornika biti dizajnirane pomoću CSS-a (cascading style sheets), odnosno transformirane. Dakle, svaki pojedinačni element nalazit će se u zakošenom pravokutniku. Zaintrigirani?

    Za transformaciju koristimo css svojstvo pod nazivom transform. Za određivanje transformacije koristi se ugrađena funkcija skewX koja zadaje kut nagiba u stupnjevima.

    Nažalost, svaki preglednik radi s ovim svojstvom na svoj način, unatoč propisanim standardima. Stoga su stvoreni posebni prefiksi koji to označavaju:

    • -ms- (Internet Explorer)
    • -o- (Opera)
    • -webkit- (Chrome, Safari)
    • -moz- (Firefox)

    Sada primijenimo stečeno znanje na pisanje primjera.

    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

    Horizontalna ploča Dom O tvrtki Proizvodi Kontakti

    Horizontalna ploča li (prikaz: inline-block; margin-desno: 6px; pozadina: #FF8C00; transformacija: skewX(-45deg); -webkit-transform: skewX(-45deg); -o-transform: skewX(-45deg) ; -ms-transformacija: skewX(-45deg); -moz-transformacija: skewX(40deg); li: lebdjeti ( pozadina: #1C1C1C; )

  • Dom
  • O tvrtki
  • Proizvodi
  • Kontakti
  A sada okomito. Rekao sam okomito!

  Za drugi program koristimo prethodni kod kao osnovu. Htio sam da moje okomite stavke izbornika imaju zaobljene kutove, a ne skošene.
  

  Da bih to učinio, upotrijebio sam još jedno css svojstvo border-radius.

  U prethodnim člancima već sam radio s ovim parametrom, tako da mislim da neće biti poteškoća u razumijevanju njegovog funkcioniranja.

  Okomita ploča li( display: block; margin: 13px; padding: 13px; background: #FF8C00; width:20%; text-align:center; font-size:20px; border-radius:10px; ) a (boja: # fff; ) li: lebdjeti ( pozadina: #1C1C1C; )

  • Dom
  • O tvrtki
  • Proizvodi
  • Kontakti

  Kao što ste već primijetili, glavna promjena u ovom kodu je nepostojanje display: inline-block deklaracije, koja je zapravo bila odgovorna za horizontalni raspored navigacijskih stavki.

  Podstavke izbornika: padajući popis

  Pogledali smo glavne skupine navigacijskih ploča, ali postoji još nekoliko varijanti, ili još bolje, dodataka.

  

  Ponekad se pojave situacije kada neke točke nadopunjuju glavne. U ovom slučaju ne možete bez padajućih popisa. Stvoreni su transformacijama pomoću css alata.

  U nastavku sam priložio kod malog programa koji implementira ovaj pristup.

  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

  Tijelo padajućeg popisa (padding-left: 30%; font-size: 18px; ) .m-menu (margina: 0; padding: 9px; width:50%; text-align:center; border: 3px solid #000; background : #FF8C00; ) .m-izbornik > li ( položaj: relativan; prikaz: inline-block; ) .m-izbornik a ( prikaz: blok; margina-lijevo: -2px; padding: 13px; boja: #fff; granica -left: 3px solid #fff; ) .m-menu a:hover ( background: #1C1C1C; ) .m-menu .s-menu ( left: 10px; position: absolute; display: none; width: 155px; margin: 0; padding: 0; list-style: none; pozadina: #FF8C00; .m-menu .s-menu a ( border: 1px solid #000; ) .m-menu Dom Proizvodi Bomboni Kolači Kolačić Kontakti

  Tijelo padajućeg popisa (padding-left: 30%; font-size: 18px; ) .m-menu (margina: 0; padding: 9px; width:50%; text-align:center; border: 3px solid #000; background : #FF8C00; ) .m-izbornik > li ( položaj: relativan; prikaz: inline-block; ) .m-izbornik a ( prikaz: blok; margina-lijevo: -2px; padding: 13px; boja: #fff; granica -left: 3px solid #fff; ) .m-menu a:hover ( background: #1C1C1C; ) .m-menu .s-menu ( left: 10px; position: absolute; display: none; width: 155px; margin: 0; padding: none; background: #FF8C00; .m-menu .s-menu a ( border: 1px solid #000; ) li:hover .s-menu :block)

  • Dom
  • Proizvodi
    • Bomboni
    • Kolači
    • Kolačić
  • Kontakti

  Većina klasičnih web stranica na internetu koristi horizontalni izbornik kao glavni navigacijski element. Ponekad može sadržavati razne dodatne značajke - strukture na više razina, ikone za podstavke, blok pretraživanja, složene popise itd. Nedavno je na blogu bio mali izbor, a danas ćemo pogledati 4 praktična primjera kako napraviti padajući izbornik koristeći CSS + HTML. Informacije će biti korisne programerima početnicima i onima koji žele promijeniti navigaciju na svojoj web stranici.

  Prvi vodič za CSS3 padajući izbornik je najnoviji u kolekciji (iz travnja 2016.). Prednosti rješenja: u ovom vodoravnom padajućem izborniku za web mjesto, podstavke sadrže ikone, implementacija i sam CSS kod prilično su jednostavni za razumijevanje i implementaciju.

  Korak 1 - HTML označavanje

  Prvi korak je stvaranje neuređenog popisa u HTML-u s vezama sidra (#) za njegove elemente. Tamo, u jednu od stavki, dodamo još jedan ugniježđeni popis, koji će biti odgovoran za podizbornik.

  Moja Nadzorna ploča sviđanja Pogledi Dokumenti Poruke Odjavi se Učitavanja Video zapisi Dokumenti

  • Moja Nadzorna ploča
  • sviđanja
  • Pogledi
    • Dokumenti
    • Poruke
    • Odjavi se
  • Učitavanja
  • Video zapisi
  • Dokumenti

  Korak 2 - Prikažite izbornik

  Uklanjamo nepotrebne uvlake u CSS-u za elemente horizontalnog padajućeg izbornika stranice. U istoj fazi postavit ćemo fiksnu širinu i visinu stavki izbornika, a također ćemo dodati zaobljene kutove.

  .menu, .menu ul, .menu li, .menu a (margina: 0; ispuna: 0; obrub: ništa; obris: ništa;) .menu (visina: 40px; širina: 505px; pozadina: #4c4e5a; pozadina: -webkit-linear-gradient(top, #4c4e5a 0% , #2c2d33 100%) : -moz-linear-gradient(top, #4c4e5a 0% , #2c2d33 100% ) (top, #4c4e5a 0% ); #2c2d33 100% ; pozadina : -ms-linear-gradient(top , #4c4e5a 0% , #2c2d33 100% ) ; pozadina : linear-gradient(top , #4c2d33 100% ) ; border-radius: 5px; border-radius: .menu li (position: relative; list-style: none; display: block; height: 40px;

  Izbornik, .menu ul, .menu li, .menu a ( margina: 0; padding: 0; obrub: ništa; obris: ništa; ) .menu ( visina: 40px; širina: 505px; pozadina: #4c4e5a; pozadina: - webkit-linearni gradijent(vrh, #4c4e5a 0%,#2c2d33 100%); -moz-linearni gradijent(gornji, #4c4e5a 0%,#2c2d33 100%); 100%); pozadina: -ms-linear-gradient(top, #4c2d33 100%); pozadina: linear-gradient(top, #2c2d33 100%); radius: 5px; border-radius: 5px;

  Korak 3 - dizajn veze

  Uz osnovne značajke u stilovima (font, boja, visina), koristimo i stvaramo glatki prijelaz boje teksta prilikom lebdenja. Izborniku također dodajemo separatore, uklanjajući obrub s prvog elementa s lijeve strane i s posljednjeg s desne strane.

  .menu li a ( display : block ; padding : 0 14px ; margin : 6px 0 ; line-height : 28px ; text-decoration : none ; border-left : 1px solid #393942 ; border-right : 1px solid #4f5058 ; font -familija: sans-serif; težina slova: #f3f3f3; sjena teksta: 1px 1px rgba (0, 0, 0, .6) prijelaz u boji .2s - moz-transition: color .2s ease-in-out; o-transition: color .2s ease-in-out; ( border-left : none ; ) .menu li: last-child a( border-right : none ; ) .menu li : hover > a ( color : #8fde62 ; )

  Izbornik li a ( display: block; padding: 0 14px; margin: 6px 0; line-height: 28px; text-decoration: none; border-left: 1px solid #393942; border-right: 1px solid #4f5058; font- obitelj: sans-serif; veličina fonta: 13px 1px rgba(0,0,0,6); prijelaz: boja .2s olakšanje; -o-prijelaz: boja .2s olakšanje; lijevo: ništa;) .menu li:zadnje dijete a(border-desno: ništa;) .menu li: lebdite > a (boja: #8fde62;)

  Korak 4 - podizbornik

  Budući da imamo padajući izbornik stranice koji koristi CSS, trebali bismo postaviti i dizajn za ugniježđeni popis. Prvo postavite marginu od 40px na vrhu i 0px na lijevoj strani + dodajte zaobljene kutove. Da biste prikazali/sakrili podizbornik, prvo postavite svojstvo neprozirnosti na nulu, a kada lebdite mišem na njemu na jedan. Da biste stvorili efekt pojavljivanja podizbornika, postavite vrijednost visine popisa na nulu i uz lebdenje = 36px.

  .menu ul (position: absolute; top: 40px; left: 0; neprozirnost: 0; background: #1f2024; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border -radius : 0 5px ; webkit-transition .25s ease .1s ; -o-transition: neprozirnost .25s ease .1s ; prijelaz: neprozirnost .25s lakoća ;) .menu li: lebdjeti > ul (prozirnost: 1;) .menu ul li (visina: 0; preljev: skriveno; padding: 0; -webkit-transition: visina .25s lakoća). 1s ; visina .25s .1s ; -ms-transition .25s .1s ; ;)

  Izbornik ul ( položaj: apsolutni; vrh: 40px; lijevo: 0; neprozirnost: 0; pozadina: #1f2024; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border- radijus: 0 5px; prijelaz neprozirnosti .25s; lakoća prijelaza 25s; neprozirnost .25s ease .1s;) .menu li:hover > ul (opacity: 1; ) .menu ul li (height: 0; overflow: hidden; padding: 0; -webkit-transition: height .25s ease .1s; -moz-prijelaz: visina .25s lakoća .1s; -ms-transition: visina .25s lakoća .1s;

  Postavljamo širinu poveznica = 100px, granično-donji rub se dodaje na dnu svih elemenata osim zadnjeg. Također, ako želite, možete postaviti slike za stavke podizbornika (pažnja! ne zaboravite promijeniti putanje do slika u kodu na one koje koristite).

  .menu ul li a (width: 100px; padding: 4px 0 4px 40px; margin: 0; border: none; border-bottom: 1px solid #353539;) .menu ul li: last-child a (bound: none;) .menu a.documents ( pozadina : url (../img/docs.png ) no-repeat 6px centar ;) .menu a.messages ( pozadina : url (../img/bubble.png ) no-repeat 6px centar ; ) .menu a.signout ( background : url (../img/arrow.png ) no-repeat 6px center ;)

  Izbornik ul li a ( širina: 100px; padding: 4px 0 4px 40px; margina: 0; border: none; border-bottom: 1px solid #353539; ) .menu ul li:last-child a ( border: none; ) . izbornik a.dokumenti ( pozadina: url(../img/docs.png) bez ponavljanja 6px centar; ) .izbornik a.poruke ( pozadina: url(../img/bubble.png) bez ponavljanja 6px centar; ) .menu a.signout ( background: url(../img/arrow.png) no-repeat 6px center; )

  Osobno mi se sviđa jednostavnost implementacije i korištenja ikona. Evo konačnog koda iz codepena:

  

  Opcija Josha Risera vizualno je slična prethodnom padajućem izborniku HTML i CSS. Kod nema selektor djeteta ">" (korisno u dizajnu s više razina), ali autor dobro koristi CSS3 efekte (prijelaz, sjena okvira i sjena teksta) za ljepši rezultat. Veza u izvoru ne opisuje proces stvaranja vodoravnog padajućeg izbornika, pa ću odmah dati konačni kod:

  

  U ovom primjeru ćemo pogledati kako pomoću CSS-a napraviti padajući izbornik koji će osim stavki sadržavati i blok pretraživanja. Slična implementacija često se može naći u modernim . Što se tiče vremena implementacije i složenosti, rješenje je malo kompliciranije od prethodnih. Objavljen je u svibnju 2013. pa ćete možda trebati doraditi neke stvari, iako je u našem testiranju radio dobro.

  HTML kôd

  Za navigaciju se, kao i uvijek, koristi nesređena lista (s klasom nav). Uobičajene stavke izbornika su stavke popisa (li) i sadrže veze (a href) bez ikakvih klasa ili ID-ova. Izuzetak su 3 specijalizirana elementa ovog horizontalnog padajućeg izbornika sa sljedećim ID-ovima:

  • postavke — slika veze;
  • pretraživanje — blok s pretraživanjem i odgovarajućim gumbom;
  • opcije - sadrži podizbornik (implementiran kroz popis s klasom subnav).

  Također ćete u kodu vidjeti skriptu bez prefiksa za korištenje CSS svojstava bez prefiksa. Konačni HTML za padajući izbornik izgleda ovako:

  Primjena Odbor Mogućnosti postavke Primjena Odbor Mogućnosti

  • 
  • Primjena
  • Odbor
  • Mogućnosti
    • postavke
    • Primjena
    • Odbor
    • Mogućnosti

  Izbornik CSS

  1. Osnovni stilovi i elementi izbornika

  Prvo odredimo Montserrat font, tamno sivu pozadinu i fiksnu visinu za stavke izbornika. Svi elementi imaju float: lijevo poravnanje i relativno pozicioniranje tako da kasnije možete dodati podizbornik sa position: absolute;

  @import url (http: //fonts.googleapis.com/css?family= Montserrat) ; * ( margina : 0 ; padding : 0 ; ) .nav ( background : #232323 ; height : 60px ; display : inline-block ; ) .nav li ( float : left ; list-style-type : none ; position : relative ; )

  @import url(http://fonts.googleapis.com/css?family=Montserrat); * ( margina: 0; padding: 0; ) .nav ( background: #232323; height: 60px; display: inline-block; ) .nav li ( float: lijevo; list-style-type: none; position: relative; )

  2. Formatiranje veza

  Stavke izbornika koriste osnovni dizajn + . Visina je ista kao u nav klasi. Za #settings link slike na početku izbornika, postavljeno je poravnanje.

  .nav li a (veličina fonta: 16px; boja: bijela; prikaz: blok; visina linije: 60px; padding: 0 26px; tekstualni ukras: ništa; rub-lijevo: 1px solid #2e2e2e; obitelj-fontova: Montserrat , sans-serif ; text-shadow : 0 0 1px rgba ( 255 , 255 , 255 , 0.5 ) .nav li a: hover (boja pozadine : #2e2e2e ;) #settings a (padding : 18px ; height : 24px ; font-size: 10px ; line-height: 24px ;

  Nav li a (veličina fonta: 16px; boja: bijela; prikaz: blok; visina linije: 60px; padding: 0 26px; ukras teksta: ništa; rub-lijevo: 1px solid #2e2e2e; obitelj fonta: Montserrat, sans-serif; sjena teksta: 0 0 1px rgba(255, 255, 255, 0.5); -veličina: 10px; visina linije: 24px)

  3. Blok pretraživanja

  Ovaj element ima fiksnu širinu i sastoji se od nekoliko dijelova - polja za unos (#search_text) sa zelenom pozadinom i gumba za pretraživanje (#search_button). U nekim preglednicima boja pozadine može biti siva.

  #search (width: 357px; margin: 4px;) #search_text (width: 297px; padding: 15px 0 15px 20px; font-size: 16px; font-family: Montserrat, sans-serif; border: 0 none; height: 52px ; margin-desno ; color : white ; float : border-box : all ) :: -webkit-input-placeholder ( /* WebKit browsers */ color : white ; ) : -moz- držač mjesta ( /* Mozilla Firefox 4 do 18 */ boja : bijela ; ) :: -moz-placeholder ( /* Mozilla Firefox 19+ */ boja : bijela ; ) : -ms-input-placeholder ( /* Internet Explorer 10+ */ boja: bijela;) #search_text: fokus (pozadina: rgb (64, 151, 119) ;) #search_button (obrub: 0 ​​ništa; pozadina: #1f7f5c url (search.png) center no-repeat; float: lijevo ; poravnanje teksta: kursor: pokazivač;

  #search ( width: 357px; margin: 4px; ) #search_text( width: 297px; padding: 15px 0 15px 20px; font-size: 16px; font-family: Montserrat, sans-serif; border: 0 none; height: 52px ; margin-right: none; float: border-box: all ) ::-webkit-input-placeholder ( /* WebKit preglednici */ color: white; ) :-moz-placeholder ( /* Mozilla Firefox 4 do 18 */ boja: bijela; ) ::-moz-placeholder ( /* Mozilla Firefox 19+ */ boja: bijela; ) : -ms-input-placeholder ( /* Internet Explorer 10+ */ boja: bijela ; ) #search_text:focus ( background: rgb(64, 151, 119); ) #search_button ( border: 0 none; background: #1f7f5c url (search.png) center no-repeat; float: left; text-align: 52px;

  4. Padajući podizbornik

  Posljednji detalj će nam omogućiti da napravimo padajući izbornik u CSS-u koji se aktivira za posljednju stavku #options.

  #options a( border-left: 0 none;) #options > a (background-image: url (trokut.png); background-position: 85% center; background-repeat: no-repeat; padding-desno: 42px; ) .subnav (vidljivost: skriveno; pozicija: apsolutna; vrh: 110%; desno: 0; širina: 200px; visina: auto; neprozirnost: 0; prijelaz: sve 0,1 s; pozadina: #232323;) .subnav li (float : nijedan ;) .subnav li a ( border-bottom : 1px solid #2e2e2e ; ) #options : hover .subnav ( visibility : visible ; top : 100% ; neprozirnost : 1 ; )

  #options a( border-left: 0 none; ) #options>a (background-image: url(triangle.png); background-position: 85% center; background-repeat: no-repeat; padding-desno: 42px; ) .subnav ( vidljivost: skriveno; pozicija: apsolutna; vrh: 110%; desno: 0; širina: 200px; visina: automatski; neprozirnost: 0; prijelaz: sve 0,1 s; pozadina: #232323; ) .subnav li ( float : ništa;) .subnav li a ( border-bottom: 1px solid #2e2e2e; ) #options:hover .subnav ( visibility: visible; top: 100%; neprozirnost: 1; )

  U stilovima ćete pronaći umetanje pozadinske slike trokuta (triangle.png) za označavanje podizbornika - ne zaboravite naznačiti točan put za ovu i druge slike u primjeru. Izgled podizbornika implementiran je pomoću svojstva neprozirnosti. Konačno rješenje na codepenu:

  

  Ova opcija uglavnom koristi CSS2.1 tehnike, rješenje plus ili minus je novo - za ožujak 2015. Ako vam nedostaje jedna podrazina u horizontalnom padajućem izborniku za web mjesto, onda ovaj primjer sadrži tri odjednom. Koristeći pseudo-class:only-child, simbol “+” se dodaje stavkama da označi prisutnost podizbornika.

  Sve u svemu, dobar i jednostavan primjer. Nećemo detaljno opisivati ​​proces implementacije jer... sličan je prethodnima - prvo izradite HTML okvir, a zatim mu postupno dodajete stilove. Preuzmite konačni kod pomoću poveznice na izvor; djelomično ga možete pogledati u Codepenu:

  Ukupno

  Gore smo pogledali 4 opcije kako napraviti padajući izbornik koristeći CSS + HTML za, iako postoji mnogo više sličnih primjera na Internetu. Postoje rješenja s jQueryjem, ali to je najvjerojatnije korisno samo za implementaciju nekih posebnih efekata i nestandardnih zadataka. U većini slučajeva bit će dovoljna kombinacija CSS + HTML, pogotovo jer su sada glavni zahtjevi za izbornik praktičnost i brza brzina učitavanja.

  Na kraju, dvije napomene o gornjim kodovima. Neki primjeri koriste slike u CSS-u za padajući izbornik, pa ćete morati pažljivo pregledati putanje slika i unijeti točne vrijednosti za svoju web-lokaciju. Drugo, neka su rješenja stara 2-3 godine, pa biste trebali još jednom dodatno provjeriti njihovu izvedbu u različitim preglednicima.

  Ako znate bilo koju drugu zanimljivu modernu implementaciju vodoravnih padajućih izbornika za web stranicu, pošaljite poveznice u komentarima.

  Kreirajmo jednostavan horizontalni navigacijski izbornik za web mjesto. Da bismo to učinili, koristit ćemo jednostavne tehnike koje će rezultirati ispravnim prikazom našeg izbornika u svim preglednicima.

  Dakle, počnimo. Napravimo popis s imenima našeg jelovnika. Nazivi stavki neka budu: “Početna”, “Novosti”, “Proizvodi”, “Usluge”, “Partneri”, “Kontakti”. Napravite novu datoteku pod nazivom menu.html, na primjer, koristeći program Dreamweawer ili koristeći običnu bilježnicu. U njega, između oznaka tijela, postavljamo naš jelovnik. Ovo je uobičajeni popis ul s grafičkim oznakama s li elementima. Naravno, svaku stavku izbornika činimo poveznicom, gdje umjesto URL-a ubacujemo hash #. Koristeći Photoshop, izradite sliku veličine 3x30 px, s gradijentnom ispunom kao što je prikazano na slici ispod. Datoteku ćemo spremiti u GIF formatu. Nazovimo to bg.gif. Ova slika služit će kao pozadinska slika našeg jelovnika.

  Evo sadržaja datoteke menu.html:

  Jednostavan horizontalni izbornik za više preglednika

  • Dom
  • Vijesti
  • Proizvodi
  • Usluge
  • Partneri
  • Kontakti

  Sada zasebno kreirajmo datoteku stila pod nazivom main.css. Njegov popis prikazan je u cijelosti u nastavku.

  Ul ( margin:0; /*zero padding*/ padding:0; /*zero padding*/ float:left; /*poravnajte popis ulijevo*/ width:auto;/*postavite širinu auto na temelju tip i sadržaj popisa */ pozadinska slika: url(bg.gif); /*ukloni oznake s popisa*/ background-color:#4778c3; /*postavi boju pozadine za sliku*/ font-size:13px; /*postavi veličinu fonta*/ font-family:Arial, Helvetica, sans-serif ; /*postavite font*/ ) ul li ( float:left; /*poravnajte elemente popisa ulijevo*/ ) ul a ( display:block; /*predstavite veze izbornika kao elemente bloka*/ width:100px; /* postavite veličinu bloka*/ visinu*/ text-align:center; /*line-height*/ text-decoration:none; uklonite podcrtavanje s poveznica*/ color:#fff; /*boja teksta veze - bijela*/ border-right:#fff solid 1px /*obrub na desnoj strani bloka (1px bijela linija)*/ ) ul a: lebdi (boja:#ccc; /*veza mijenja boju kada prijeđe pokazivačem*/ )

  Mislim da ne bi trebalo biti pitanja o sadržaju datoteke main.css, savjete sam napisao dovoljno detaljno i jasno, pa se neću ponavljati. Ne zaboravite ga povezati s našom stranicom menu.html pomoću

  Rezimirati. Kao rezultat toga, dobili smo horizontalni izbornik u potpunosti za više preglednika koji izgleda isto ne samo u svim modernim preglednicima, već iu takvim rijetkostima kao što su IE 5.5 i IE 6.0. Svi elementi izbornika predstavljeni su kao blok elementi i imaju iste dimenzije od 100 px širine i 30 px visine. Kao separator za stavke izbornika koristi se dizajn blok elementa koji koristi bijeli desni rub debljine 1px. Ovo je praktički najjednostavniji način implementacije horizontalnog izbornika. Naravno, po želji ga možete modificirati, učiniti ga ljepšim i funkcionalnijim koristeći maštu, CSS svojstva i dodatne grafičke elemente. Pa, naš horizontalni izbornik izgleda otprilike ovako:

  Prednosti ovog rješenja:
  Lako za napraviti
  Jednostavan kod
  Bez tablica ili javascripta
  Kompatibilnost s više preglednika: izbornik izgleda jednako u svim preglednicima
  Koristi se samo jedan crtež
  Minimalni kôd na stranici menu.html
  Minimalni kôd za implementaciju stilova u main.css

  Datoteke korištene u ovom primjeru mogu se preuzeti u arhivi