Kako napraviti vodoravni izbornik u html-u. Sjajan pregled prekrasnih višerazinskih izbornika s codepen-om

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 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 učinili ovdje? Da, sve je vrlo jednostavno, postavili smo svoje bodove (

Da vidimo što opet imamo:

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 iznad njega, pogledajte:

Mislim da je super :) 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žđenim popisom), ali ovo je tema za drugu lekciju, to je sve za mene. Dođite opet, bit će mi drago!!!

Habr, pozdrav!

Na Codepenu se pojavljuje puno dobrih rješenja od različitih stručnjaka i vjerujem da bi najbolje od njih trebalo sakupiti na jednom mjestu. Stoga sam prije 2 godine počeo spremati zanimljive skripte na razne teme na svoje računalo.

Objavljivao sam ih u mr cloud IDE grupi proizvoda. Gefest, to su bili sklopovi od 5-8 rješenja. Ali sada sam počeo skupljati 15-30 skripti u različitim temama (gumbi, izbornici, opisi alata i tako dalje).

Takve velike setove treba pokazati većem broju stručnjaka. Zato ih objavljujem na Habru. Nadam se da će vam biti od koristi.

U ovoj recenziji ćemo se osvrnuti na višerazinske izbornike.

Ravna vodoravna navigacija

Prekrasna navigacijska traka s glatkim podizbornicima. Kod je dobro strukturiran i koristi js. Sudeći po korištenim značajkama, radi u ie8+.
http://codepen.io/andytran/pen/kmAEy

Navigacijsko zaglavlje materijala s poravnatim padajućim izbornicima

Prilagodljiva traka poveznica s podizbornikom u dva stupca. Sve je urađeno u css i html. Korišteni css3 selektori koji nisu podržani u ie8.
http://codepen.io/colewaldrip/pen/KpRwgQ

Padajući izbornik Smooth Accordion

Moderan okomiti izbornik s elementima koji se glatko otvaraju. Koristi se Transition, transform js kod.
http://codepen.io/fainder/pen/AydHJ

Čisti CSS tamni inline navigacijski izbornik

Tamna okomita navigacijska traka s ikonama iz ionicons. Koristi se JavaScript. U ie8 će najvjerojatnije raditi bez animacije.
http://codepen.io/3lv3n_snip3r/pen/XbddOO

Čisti CSS3 mega padajući izbornik s animacijom

Moderan izbornik s dva izlazna formata: vodoravnim i okomitim. Koriste se ikone i CSS3 animacija. Definitivno će izgledati grozno u ie8, ali u drugim preglednicima sve je cool.
Okomita veza: http://codepen.io/rizky_k_r/full/sqcAn/
Link na horizontalu: http://codepen.io/rizky_k_r/pen/xFjqs

CSS3 padajući izbornik

Horizontalni izbornik s velikim elementima i padajućim popisom veza. Čist i minimalistički kod bez js-a.
http://codepen.io/ojbravo/pen/tIacg

Jednostavan Pure CSS padajući izbornik

Jednostavan, ali moderan horizontalni izbornik. Koristi font-awesome. Sve radi na css i html, bez js. Radit će u ie8.
http://codepen.io/Responsive/pen/raNrEW

Bootstrap 3 mega-padajući izbornik

Izvrsno rješenje za online trgovine. Prikazuje nekoliko razina kategorija i velikih slika (na primjer, proizvod na akciji). Temelji se na boostrap 3.
http://codepen.io/organizedchaos/full/rwlhd/

Ravna navigacija

Elegantna navigacijska traka s glatkim podizbornikom. U starijim preglednicima prikazat će probleme.
http://codepen.io/andytran/pen/YPvQQN

3D ugniježđena navigacija

Horizontalni izbornik s jako cool animacijom bez js-a!
http://codepen.io/devilishalchemist/pen/wBGVor

Responzivni mega izbornik - navigacija

Horizontalni responzivni izbornik. Izgleda dobro, ali mobilna verzija je malo jadna. Koriste se CSS, html i js.
http://codepen.io/samiralley/pen/xvFdc

Čisti Css3 izbornik

Originalni jelovnik. S jednostavnim i čistim kodom bez js-a. Koristite za "vau" efekte.
http://codepen.io/Sonick/pen/xJagi

Potpuni CSS3 padajući izbornik

Šareni padajući izbornik s jednom razinom ugniježđivanja. Koriste se ikone iz font-awesome, html i css.
http://codepen.io/daniesy/pen/pfxFi

Padajući izbornik samo za Css3

Prilično dobar vodoravni izbornik s tri razine ugniježđivanja. Radi bez js.
http://codepen.io/riogrande/pen/ahBrb

Padajući izbornici

Minimalistički izbornik s originalnim efektom izgleda ugniježđene liste elemenata. Drago mi je da je i ovo rješenje bez javascripta.
http://codepen.io/kkrueger/pen/qfoLa

Čisti CSS padajući izbornik

Primitivno, ali učinkovito rješenje. Samo css i html.
http://codepen.io/andornagy/pen/xhiJH

Pull Menu - Koncept interakcije izbornika

Zanimljiv koncept izbornika za mobilni telefon. Nikad prije nisam vidio ovako nešto. Koristi html, css i javascript.
http://codepen.io/fbrz/pen/bNdMwZ

Napravite jednostavan padajući izbornik

Čist i jednostavan kod, bez js-a. Sigurno će raditi u ie8.
http://codepen.io/nyekrip/pen/pJoYgb

Čisti CSS padajući izbornik

Rješenje nije loše, ali koristi previše klasa. Drago mi je da nema js.
http://codepen.io/jonathlee/pen/mJMzgR

Padajući izbornik

Lijep okomiti izbornik s minimalnim javascript kodom. JQuery se ne koristi!
http://codepen.io/MeredithU/pen/GAinq

CSS 3 padajući izbornik

Horizontalni izbornik s dodatnim natpisima može dobro ukrasiti vašu web stranicu. Kod je jednostavan i jasan. Javascript se ne koristi.
http://codepen.io/ibeeback/pen/qdEZjR

Prekrasno rješenje s puno koda (html, css i js). Stvorena su 3 formata podizbornika. Rješenje je prikladno za online trgovine.
http://codepen.io/martinridgway/pen/KVdKQJ

CSS3 padajući izbornik (posebno rješenje)!

Tamni horizontalni izbornik s trinaest (13) opcija animacije! Svakako vam savjetujem da ga pročitate, bit će koristan u svakodnevnom životu.
http://codepen.io/cmcg/pen/ofFiz

p.s.
Nadam se da vam se svidjela zbirka od 23 rješenja. Ako ih želite nastaviti čitati, ispunite anketu u nastavku.
Uživajte svi u svom radu.

Zadatak centriranja horizontalnog izbornika može biti nezgodan, posebno za one koji se tek upoznaju s CSS-om. Potraga za rješenjima dovodi do vrlo ograničenog popisa metoda, od kojih se većina oslanja na CSS trikove, JavaScript ili korištenje nestandardnih pravila koja ne podržavaju svi preglednici. U ovom vodiču proći ćemo kroz metodu za centriranje horizontalnog izbornika koja koristi samo standardna CSS pravila i radi u svim preglednicima.

Ispod je horizontalni izbornik u središtu ovog stupca, u kojem je aktivirana druga kartica. Možete pokušati promijeniti veličinu prozora preglednika ili stranice kako biste bili sigurni da izbornik uvijek ostaje centriran i funkcionalan.

Na demo stranici možete vidjeti nekoliko opcija dizajna za vodoravno središte izbornika. Bilo koji od njih može se koristiti u vašim projektima.

Svi izbornici prikazani u ovom vodiču imaju jednostavnu strukturu. Ovo je običan neuređeni popis veza smještenih u element div.

• Prva oznaka
• Druga knjižna oznaka
• Treća kartica
• Četvrti tab

Ispod je kompletan CSS kod koji se koristi za centriranje izbornika. Objašnjenje principa rada dano je kasnije u lekciji.

#centeredmenu ( float:left; width:100%; background:#fff; border-bottom:4px solid #000; overflow:hidden; position:relative; ) #centeredmenu ul ( clear:left; float:left; list-style :none; margin:0; padding:0; position:relative; left:50%; text-align:center; ) #centeredmenu ul li ( display:block; float:left; list-style:none; margin:0; padding:0; position:relative; right:50%; ) #centeredmenu ul li a ( display:block; margin:0 0 0 1px; padding:3px 10px; background:#ddd; color:#000; text-decoration: none; line-height:1.3em; ) #centeredmenu ul li a:hover ( background:#369; color:#fff; ) #centeredmenu ul li a.active, #centeredmenu ul li a.active:hover (boja:# fff; background:#000; font-weight:bold; )

Djelovanje metode temelji se na relativnom pozicioniranju elemenata plutajućeg bloka jednog unutar drugog. Prvo, pogledajmo kako se veličina elemenata mijenja s pomakom.

Element div(blok) bez pomaka rasteže se na cijelu širinu koja mu je dostupna.

Ali ako div pomaknemo ulijevo, automatski će se smanjiti kako bi odgovarao njegovom sadržaju. Kompresija je ključna za implementaciju ove metode centriranja izbornika. Pomaže vam da pomaknete izbornik na ispravan položaj.

Uzmimo standardni lijevo poravnati izbornik i prepravimo ga korak po korak. Radi jasnoće, predmeti su obojeni različitim bojama, tako da je odmah jasno što kamo ide.

Imajte na umu sljedeće točke:

• Element centrirani izbornik div(plavi pravokutnik) pomaknut je ulijevo, ali ima širinu od 100%, tako da ostaje rastegnut preko cijele stranice.
• Element ul(ružičasti pravokutnik) je unutar elementa središnji izbornik div i pomiče se ulijevo. To znači da će biti komprimiran na širinu svog sadržaja, odnosno na ukupnu širinu svih knjižnih oznaka.
• Svi li elementi (zeleni pravokutnici) su unutar elementa ul i pomaknite se ulijevo. Dakle, oni su sabijeni na veličinu karika u njima i poredani u jednu horizontalnu liniju.
• Unutar svake veze (narančasti pravokutnici) prikazuje se tekst knjižne oznake: Knjižna oznaka 1, Knjižna oznaka 2 i tako dalje.

Zatim kompenziramo element ul udesno za 50% koristeći položaj:relativni; . Kada je element pomaknut za postotak pod ovim uvjetima, važno je zapamtiti da ukupna širina elemenata koje sadrži nije njegova širina. U našem slučaju, pomak se događa za polovicu prozora preglednika (ili prostora dostupnog za prikaz). Kao rezultat toga, naš izbornik počinje u sredini prozora i djelomično se proteže izvan njegovih granica. I prijeđimo na sljedeći korak.

Ostaje samo pomaknuti sve elemente li lijevo za 50%. To je 50% širine našeg ul elementa (spremnika koji sadrži izbornik). Dakle, oznake su pomaknute točno u sredinu prozora.

Kada koristite ovu metodu centriranja, morate zapamtiti nekoliko važnih točaka:

• Budući da element ul djelomično se proteže izvan prozora, to rezultira prikazom traka za pomicanje. Stoga morate koristiti pravilo overflow:hidden;. za element centrirani izbornik div. Dakle, izbočeni dio elementa div bit će odsječen.
• Budući da element ul nije usklađen s oznakama, ne možete koristiti nikakve vizualne stilove za njega. Element ul ostavite bez pozadinske boje i bez obruba kako bi postao potpuno nevidljiv. A stilovi za oznake trebali bi se koristiti samo za elemente li.
• Ako trebate postaviti posebne stilove za prve i zadnje knjižne oznake, trebate dodati klasu za prve i zadnje elemente li, tako da ih možete zasebno stilizirati.

Predloženo rješenje kompatibilno je sa svim preglednicima, ne koristi JavaScript i podržava tekst promjenjive veličine.

Izvrstan stil elementa sučelja u obliku padajućeg popisa.

Kada prijeđete mišem iznad gumba, na vrhu se pojavljuje ploča.

Animirani javascript izbornik s efektom sjaja.

Svjež, lijep izbornik koji koristi jQuery.

Implementacija jelovnika s velikim brojem stavki. Pomiče se kada kursor miša pomaknete gore ili dolje.

Glatko pomicanje do željenog odjeljka na stranici. jQuery dodatak za navigaciju na jednoj stranici.

Novi jQuery dodatak. Izvrsna implementacija animirane navigacije web stranice. Prilikom prolaska kroz stavke izbornika pojavljuje se blok s opisom i mogućim poveznicama, a ovisno o odabranoj stavci mijenja se pozadina stranice koja se proteže na cijeli zaslon bez obzira na veličinu prozora preglednika. Obavezno pogledajte demo stranicu.

Animirani izbornik sa skočnim stavkama.

Kada se pomičete prema dolje po stranici, izbornik ostaje fiksiran na vrhu zaslona.

Implementacija okomitog izbornika s velikim brojem stavki. Pomicanje kroz stavke vrši se pomoću kotačića miša ili pomoću poveznica “Prethodno” i “Sljedeće”.

Novi jelovnik u Apple stilu. Izgleda tamnije nego prije, ali ništa manje slatko.

Padajući izbornik s efektom pozadine. Podstavke izbornika šire se prema gore. Kada prijeđete pokazivačem iznad stavke izbornika, pozadinska slika se mijenja.

Animirani izbornik. Stavke izbornika prikazane su u obliku ikona i opisa. Nekoliko sjajnih efekata kada mišem prelazite preko stavke izbornika. Postoji 8 efekata, da biste ih vidjeli sve - slijedite veze Primjer1-Primjer8 na demo stranici.

Vertikalni i vodoravni pomični izbornik. Dobro rješenje ako se na jelovniku nalazi veliki broj stavki.

Izbornik se pojavljuje kada desnom tipkom miša kliknete određeno područje.

Kada odaberete stavku izbornika, stavke podizbornika prikazuju se s desne strane.

Izvorni jQuery CSS3 izbornik dolazi u 7 različitih stilova. Kada mišem prijeđete preko jedne od stavki izbornika, ostale se zamagljuju.

10 kreativnih animiranih izbornika. Horizontalni i okomiti CSS3 izbornici s raznim efektima i prijelazima.

Arhiva također uključuje originalnu PSD datoteku jelovnika.

Pozadina ili podcrtavanje stavke izbornika prati miš s malim kašnjenjem, dok pozadina glatko mijenja svoju boju dok se pomiče od stavke do stavke. Vrlo lijep učinak, izgleda neobično. Pažnja: efekt ne radi u operi

Izvrstan učinak kada prijeđete mišem preko jedne od slika. Učinak donekle podsjeća na gore opisani jQDock.

Vodoravni, okomiti izbornik. Zanimljivi efekti.

Vrlo zanimljiv učinak. Savršeno za dizajniranje portfelja web stranica.

Zanimljiv učinak sličica koje iskaču pri lebdenju.

Lijep efekt prijelaza između stavki.

Stavke izbornika prikazane su u obliku sličica.

Navigacijska traka s okvirom za pretraživanje koji postaje proziran dok se pomičete prema dolje po stranici.

Izvrstan okomiti izbornik. Kada zadržite kursor, pojavljuje se stavka izbornika.

Zanimljiv efekt kada kursor pređete preko stavke izbornika.

Kada prijeđete mišem preko izbornika, pojavit će se njegove stavke. Stavke koje se pojavljuju prikazane su u obliku luka, čiji radijus možete postaviti prilikom konfiguracije dodatka. U nekim preglednicima nećete vidjeti lučni prikaz, izbornik će biti prikazan ravno, ali to ipak neće pokvariti opći dojam ove implementacije jQuery izbornika.

Zanimljiv efekt kada mišem prijeđete preko stavke izbornika.

Svježi animirani izbornik u sivim tonovima.

Zanimljivo rješenje za navigaciju, koje je predstavljeno u obliku okomitih pruga. Kada prijeđete mišem preko ovih traka, pojavit će se slika za stavku i popis podizbornika. Kada kliknete na stavku podizbornika, pojavljuje se stranica s opisom. Ova implementacija savršena je za promotivne stranice ili prezentacije. Obavezno pogledajte demonstraciju dodatka.

Navigacija web stranice predstavljena je u obliku 4 slike, kada prijeđete iznad njih primijetit ćete zanimljiv animirani efekt.

Navigacijska ploča. Klikom na strelicu pomiče se stranica. Navigacija se pomiče zajedno sa sadržajem stranice.

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, dodajemo 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

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.

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(gore, #4c4e5a 0%,#2c2d33 100%); pozadina: -moz-linearni-gradijent(gore, #4c4e5a 0%,#2c2d33 100%); pozadina: -o-linearni-gradijent( gore, #4c4e5a 0%,#2c2d33 100%); pozadina: -ms-linearni-gradijent(gore, #4c4e5a 0%,#2c2d33 100%); pozadina: linearni gradijent(gore, #4c4e5a 0%,#2c2d33 100%); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; ) .menu li (position: relative; list-style: none; float: left; display: block ; visina: 40px; )

Korak 3 - povezivanje

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.

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: Helvetica, Arial, sans-serif; težina fonta: podebljano; veličina fonta: 13px; boja: #f3f3f3; sjena teksta: 1px 1px 1px rgba(0,0,0,.6); -webkit-transition : boja .2s ease-in-out; -moz-transition: boja .2s ease-in-out; -o-transition: boja .2s ease-in-out; -ms-transition: boja .2s ease-in- out; prijelaz: boja .2s ease-in-out; ) .menu li:first-child a ( border-left: none; ) .menu li:last-child a( border-right: none; ) .menu li: lebdite > a ( boja: #8fde62; )

Korak 4 - podizbornik

Budući da imamo padajući izbornik web stranice pomoću CSS-a, 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 na njemu na jedan. Da biste stvorili efekt pojavljivanja podizbornika, postavite vrijednost visine popisa na nulu i s lebdenjem = 36px.

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 0 5px 5px; -webkit-transition: neprozirnost .25s lakoća .1s; -moz-transition: neprozirnost .25s lakoća .1s; -o-transition: neprozirnost .25s lakoća .1s; -ms-transition: neprozirnost . 25s ease .1s; prijelaz: neprozirnost .25s ease .1s; ) .menu li:hover > ul ( neprozirnost: 1; ) .menu ul li ( visina: 0; preljev: skriven; ispuna: 0; -webkit-prijelaz: visina .25s lakoća .1s; -moz-prijelaz: visina .25s lakoća .1s; -o-prijelaz: visina .25s lakoća .1s; -ms-prijelaz: visina .25s lakoća .1s; prijelaz: visina .25s lakoća . 1s; ) .menu li:hover > ul li ( visina: 36 px; preljev: vidljiv; ispuna: 0; )

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 ( 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

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: 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; ukras teksta: ništa; rub-lijevo: 1px solid #2e2e2e; obitelj fonta: 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; visina: 24px; veličina fonta: 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: 0; boja: bijela; obris: ništa; pozadina: #1f7f5c; float: lijevo; veličina okvira: border-box; prijelaz: sve 0,15 s; ) ::-webkit-input-placeholder ( /* WebKit preglednici */ boja: bijela; ) :-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) centar bez ponavljanja; širina: 60 px; float: lijevo; padding: 0; poravnanje teksta: središte; visina: 52 px; kursor: pokazivač; )

4. Padajući podizbornik

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

#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 napravite 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.