Pozdrav dragi čitaoci mog bloga! Današnji članak će biti vrlo koristan za početnike. Od danas ćemo dizajnirati jednostavan horizontalni meni. Prije nego što pređemo direktno na izgled, želim reći nekoliko riječi o tome zašto sam odlučio odabrati ovu temu za članak.
U stvari, sve je prilično jednostavno, kada sam razmišljao o temi sljedeće lekcije za stranicu, počeo sam se prisjećati i analizirati svoje iskustvo u proučavanju layouta, sa čime sam se morao suočiti u početnoj fazi da postanem ja kao layout dizajner, što mi je bilo najnerazumljivije pri proučavanju ove oblasti itd. Sva ova pitanja sam sebi postavio kako bih bolje razumio šta bi moglo biti interesantno za osobu koja započinje svoj put kao layout dizajner. A lično, čim sam počeo da učim layout, najviše od svega imao sam pitanja o izgledu raznih menija, posebno kada su u pitanju višeslojni meniji. I tako ćemo danas pričati o meniju, tačnije o horizontalnom meniju. Pa počnimo!
Započnimo raspored našeg horizontalnog menija!
Kao što verovatno pretpostavljate, prva stvar koju treba da uradimo je da kreiramo html stranicu sa standardnim oznakama i u nju uključimo datoteku stila. Neću se detaljnije zadržavati na ovom koraku, jer se ipak nadam da niste toliko početnici da vam detaljno ispričate šta su tijelo i glava i kako su stilovi povezani. Samo da kažem da ću pored stilova za naš meni napisati najjednostavniji reset u css fajl kako bih resetovao stilove i postigao isti prikaz uvlaka u svim pretraživačima. Ovako izgleda moj najjednostavniji reset:
Neću još ništa reći o stilovima nuliranja, pošto je to zapravo tema za drugi članak, jedino što trebate znati o gornjem kodu je da će zahvaljujući ovom kodu svi elementi stranice koje ćemo napisati imati svoje margine i padding, to moramo učiniti tako da naša stranica izgleda isto u svim pretraživačima.
Dakle, šta imamo u ovoj fazi? Imamo html stranicu sa standardnim oznakama:
I imamo stilski fajl povezan sa ovom stranicom (imam style.css), sa sledećim sadržajem:
Sljedeći korak je kreiranje html oznake za naš meni.
Kreiranje oznaka za meni
U našem označavanju koristit ćemo novu oznaku
A pošto smo već počeli da pričamo o podršci za nove html 5 tagove, kako ne bismo imali problema sa ovim u starijim pretraživačima, potrebno je da u naš dokument uključimo posebnu biblioteku - html5shiv. To se radi umetanjem
glavni dio vaše stranice sa sljedećim kodom:
Sve nakon ove oznake
Vratimo se na naše oznake. Sljedeće nam je potrebno u našoj oznaci
Dakle, čini se da smo završili sa označavanjem, vrijeme je da pređemo direktno na stilove pisanja, jer sada naš meni izgleda, blago rečeno, ne baš dobro:
Oblikovanje našeg horizontalnog menija
I tako, prije svega, kada postavljamo meni, moramo ukloniti markere sa liste, oni nam očito ne trebaju, to se radi ovako:
Ul (list-style:none; )
Nakon toga, naš meni će izgledati ovako:
Ne sviđa mi se što se naš meni drži ivica pretraživača, popravimo to:
Ovim kodom smo postavili širinu našeg menija, dali mu 50px gornje i donje uvlake i centrirali ga. Ko ne zna da li blok element ima širinu, onda da bismo ovaj element pozicionirali striktno u centar, samo trebamo postaviti njegovo vanjsko uvlačenje (marginu) desno i lijevo sa vrijednošću auto.
Sljedeći korak, moramo konačno naš meni napraviti horizontalnim, to se radi postavljanjem elemenata
Meni li( float:levo; )
Sve je sada na našem meniju postalo horizontalno.
Ako ne razumijete šta se tačno dogodilo i šta radi svojstvo float, preporučujem da proguglate informacije o ovoj imovini i dobro ih proučite, jer
ni jedna stranica izgleda ne može bez toga, mogu vam reći sa sigurnošću. Pa dobro, nastavimo!
Meni li a( display:block;/* Učinite vezu blok elementom*/ padding:12px 20px;/* Postavite padding */ text-decoration: none; /* uklonite podcrtanu crtu */ color:#fff;/* napraviti vezu bijele boje */ background:#444;/* napraviti tamnu boju pozadine */ font:14px Verdana, sans-serif;/* postaviti veličinu fonta i naziv */ )
Jedno od najvažnijih pravila je display:block;. Činjenica je da su veze po defaultu inline elementi, a uvlake se različito primjenjuju na inline elemente u različitim pretraživačima, pa je preporučljivo napraviti link kao blok element i tek onda na njega primijeniti svojstva povezana s vanjskim ili internim uvlakama. Sada ne želim da vas vremenom opterećujem nepotrebnim informacijama, koristeći stvarne primjere, i sami ćete shvatiti zašto je toliki naglasak ovdje stavljen.
Da vidimo šta smo dobili, osvežite stranicu pretraživača i tada!:
Kao što vidite, ne izgleda loše, možemo reći da je u principu naš meni spreman. Jedino što treba uraditi je podesiti svjetlo linkova na hover, pa, čini mi se da će meni izgledati bolje sa separatorima između stavki.
Počnimo s razdjelnicima:
Meni li( border-left:1px solid #666; ) .menu li:first-child( border-left:none; )
Šta smo uradili ovde? Da, sve je vrlo jednostavno, tražili smo naše artikle (
Opet, da vidimo šta imamo:
Po mom mišljenju, sa separatorima je mnogo bolje.
Meni li a:hover( background:#888; )
Opet koristeći posebnu pseudo-klasu, ovaj put lebdeći, postavljamo boju veze kada se lebdi preko nje, pogledajte:
Po mom mišljenju, super 🙂, nadam se da imate isti meni kao moj.
Ovdje ću završiti ovu lekciju, stvarno se nadam da vam je bila korisna i sada znate kako napraviti jednostavan horizontalni meni koristeći čisti html i css. Naravno, postavili smo meni na jednom nivou, biće malo teže sa menijem na dva nivoa (sa ugniježđenom listom), ali ovo je tema za drugu lekciju, to je sve za mene. Dodjite ponovo, bice mi drago!!!
Habr, zdravo!
Na Codepen-u postoji mnogo dobrih rješenja različitih stručnjaka i vjerujem da najbolje od njih treba sakupiti na jednom mjestu. Stoga sam prije 2 godine počeo da spremam zanimljive skripte o raznim temama na svom računaru.
Objavljivao sam ih u grupi proizvoda cloud IDE mr. Gefest, to su bili sklopovi od 5-8 rješenja. Ali sada sam počeo da skupljam 15-30 skripti u različitim temama (dugmad, meniji, opisi alata i tako dalje).
Ovako velike setove treba pokazati većem broju stručnjaka. Stoga ih objavljujem na Habru. Nadam se da će vam biti od koristi.
U ovom pregledu ćemo pogledati menije na više nivoa.
Ravna horizontalna navigacija
Prekrasna navigacijska traka sa podmenijem koji se glatko pojavljuje. Kod je dobro strukturiran, koristi se js. Sudeći po korištenim funkcijama, radi u ie8+.
http://codepen.io/andytran/pen/kmAEy
Zaglavlje za navigaciju materijala s poravnatim padajućim izbornikom
Responzivna traka veza sa podmenijem u dvije kolone. Sve se radi u css i html. Primijenjeni css3 selektori koji nisu podržani u ie8.
http://codepen.io/colewaldrip/pen/KpRwgQ
Padajući meni Glatke harmonike
Moderan vertikalni meni sa elementima koji se glatko otvaraju. Korišteni prijelaz, transformacija js koda.
http://codepen.io/fainder/pen/AydHJ
Pure CSS Dark Inline Navigacijski meni
Tamna vertikalna navigaciona traka sa ikonama ikona. javascript je primijenjen. U ie8 će najvjerovatnije raditi bez animacije.
http://codepen.io/3lv3n_snip3r/pen/XbddOO
Čisti CSS3 Mega padajući meni sa animacijom
Moderan meni sa dva izlazna formata: horizontalnim i vertikalnim. Koriste se ikone i css3 animacija. U ie8 će definitivno izgledati užasno, ali u drugim pretraživačima je sve super.
Link do vertikale: http://codepen.io/rizky_k_r/full/sqcAn/
Link na horizontalu: http://codepen.io/rizky_k_r/pen/xFjqs
CSS3 padajući meni
Horizontalni meni sa velikim stavkama i padajućom listom veza. Čist i minimalistički kod bez js-a.
http://codepen.io/ojbravo/pen/tIacg
Jednostavan Pure CSS padajući meni
Jednostavan, ali moderan horizontalni meni. Font-awesome se koristi. Sve radi na css i html, bez js-a. Radit će u ie8.
http://codepen.io/Responsive/pen/raNrEW
Bootstrap 3 mega padajući meni
Odlično rješenje za online trgovine. Prikazuje više nivoa kategorija i velike slike (kao što su artikli na zalihama). Zasnovan je na boostrap 3.
http://codepen.io/organizedchaos/full/rwlhd/
Flat Navigation
Elegantna navigaciona traka sa glatkim podmenijima. U starijim pretraživačima će se prikazati sa problemima.
http://codepen.io/andytran/pen/YPvQQN
3D ugniježđena navigacija
Horizontalni meni sa vrlo cool animacijom bez js-a!
http://codepen.io/devilishalchemist/pen/wBGVor
Responzivni mega meni - navigacija
Horizontalni responzivni meni. Izgleda dobro, ali mobilna verzija je malo loša. Korišteni css, html i js.
http://codepen.io/samiralley/pen/xvFdc
Čisti CSS3 meni
originalni meni. Sa jednostavnim i čistim kodom bez js-a. Koristite za "vau" efekte.
http://codepen.io/Sonic/pen/xJagi
Potpuni CSS3 padajući meni
Šareni padajući meni sa jednim nivoom ugnježđenja. Koriste se ikone iz font-awesome, html i css.
http://codepen.io/daniesy/pen/pfxFi
Css3 samo padajući meni
Prilično dobar horizontalni meni sa tri nivoa ugnježđenja. Radi bez js-a.
http://codepen.io/riogrande/pen/ahBrb
Padajući meniji
Minimalistički meni sa originalnim efektom izgleda ugniježđene liste stavki. Drago mi je što je i ovo rješenje bez javascripta.
http://codepen.io/kkrueger/pen/qfoLa
Čisti CSS padajući meni
Primitivno ali efikasno rešenje. Samo css i html.
http://codepen.io/andornagy/pen/xhiJH
Povucite meni - Koncept interakcije menija
Zanimljiv koncept menija za mobilni telefon. Ovo još nisam vidio. Koristi se html, css i javascript.
http://codepen.io/fbrz/pen/bNdMwZ
Napravite jednostavan padajući meni
Čist i jednostavan kod, bez js-a. Definitivno će raditi u ie8.
http://codepen.io/nyekrip/pen/pJoYgb
Čisti CSS padajući meni
Rješenje nije loše, ali se koristi previše klasa. Drago mi je da nema js.
http://codepen.io/jonathlee/pen/mJMzgR
Padajući meni
Lep vertikalni meni sa minimalnim javascript kodom. jQuery se ne koristi!
http://codepen.io/MeredithU/pen/GAinq
CSS 3 padajući meni
Horizontalni meni s dodatnim natpisima može dobro ukrasiti vašu stranicu. Kod je jednostavan i jasan. Javascript se ne primjenjuje.
http://codepen.io/ibeeback/pen/qdEZjR
Predivno rješenje sa puno koda (html, css i js). Postoje 3 formata podmenija. Za online trgovine rješenje je dobro prilagođeno.
http://codepen.io/martinridgway/pen/KVdKQJ
Padajući meni CSS3 (posebno rešenje)!
Tamni horizontalni meni sa trinaest (13) opcija za animaciju! Svakako preporučujem za čitanje, korisno u svakodnevnom životu.
http://codepen.io/cmcg/pen/ofFiz
P.S.
Nadam se da ste uživali u sklapanju 23 rješenja. Ako ih želite nastaviti čitati, ispunite anketu u nastavku.
Sve ugodan rad.
Zadatak centriranja horizontalnog menija može biti težak, posebno za one koji su novi u CSS-u. Potraga za rješenjima vodi do vrlo ograničene liste metoda, od kojih se većina oslanja na CSS trikove, JavaScript ili korištenje nestandardnih pravila koja nisu podržana od strane svih pretraživača. U ovom vodiču ćemo pogledati metodu horizontalnog centriranja menija koja koristi samo standardna CSS pravila i radi u svim pretraživačima.
Primjer centriranog menija
Ispod je horizontalni meni u sredini ove kolone, u kojem je aktivirana druga kartica. Možete pokušati promijeniti veličinu prozora ili stranice preglednika kako biste bili sigurni da je meni uvijek centriran i funkcionalan.
Na demo stranici možete vidjeti nekoliko opcija dizajna za horizontalno centriran meni. Bilo koji od njih se može koristiti u vašim projektima.
HTML markup
Svi meniji, čiji su primjeri dati u ovoj lekciji, koriste jednostavnu strukturu. To je samo neuređena lista veza umotanih u element. div.
Centrirani meni CSS kod
Ispod je kompletan CSS kod koji centrira meni. A objašnjenja principa rada data su 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; pozicija:relativna; desno:50%; ) #centeredmenu ul li a ( display:block; margin:0 0 0 1px; padding:3px 10px; background:#ddd; boja:#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; )
Kako funkcioniše metoda centriranja
Djelovanje metode temelji se na relativnom pozicioniranju lebdećih blok elemenata jedan unutar drugog. Prvo, da vidimo kako se veličina elemenata mijenja kada se pomakne.
Element div(blok) bez pomaka se proteže do pune širine koja mu je dostupna.
Ali ako pomaknemo div element ulijevo, on će se automatski smanjiti na veličinu svog sadržaja. Kompresija je ključna za implementaciju ove metode centriranja menija. Pomaže da se meni pomeri na ispravan položaj.
Standardni lijevo poravnat meni
Uzmimo standardni lijevo poravnat meni i redizajnirajmo ga korak po korak. Radi preglednosti artikli su obojeni u različite boje, pa je odmah jasno šta je gde uloženo.
Obratite pažnju na sljedeće tačke:
- Element centrirani meni div(plavi pravougaonik) je pomaknut ulijevo, ali ima širinu od 100%, tako da ostaje rastegnut da stane na cijelu stranicu.
- Element ul(ružičasti pravougaonik) je unutar elementa centeredmenu div i pomera se ulevo. To znači da će se smanjiti na širinu svog sadržaja, odnosno na ukupnu širinu svih oznaka.
- Svi li elementi (zeleni pravokutnici) su unutar elementa ul i pomaknite se ulijevo. Tako se smanjuju na veličinu karika u njima i poredaju se u jednu horizontalnu liniju.
- Unutar svake veze (narandžasti pravougaonici) prikazuje se tekst obeleživača: Bookmark 1, Bookmark 2, itd.
Pomjeranje pozicije neuređene liste
Zatim pomeramo element ul desno za 50% sa pozicijom:relativna svojina; . Kada je element pomjeren 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 je polovina prozora pretraživača (ili prostora dostupnog za prikaz) Kao rezultat toga, naš meni počinje u sredini prozora i djelomično se proteže dalje od njega. I prelazimo na sljedeći korak.
Pomjerite poziciju svih stavki menija
Ostaje samo premjestiti sve elemente li lijevo za 50%. Ovo je 50% širine našeg elementa ul (kontejner koji sadrži meni). Tako se jezičci pomiču tačno u sredinu prozora.
Nekoliko važnih napomena
Postoji nekoliko važnih stvari koje treba imati na umu kada koristite ovu metodu centriranja:
- Od elementa ul djelomično izlazi van prozora, to vodi do prikaza traka za pomicanje. Stoga morate koristiti pravilo overflow:hidden; za element centrirani meni div. Dakle, izbočeni dio elementa divće biti odsječen.
- Od elementa ul nije poravnat tabulatorima, ne možete koristiti nikakve vizualne stilove za njega. Ostavite element ul bez boje pozadine i obruba kako biste ga učinili potpuno nevidljivim. A stilovi za obeleživače treba da se koriste samo za elemente li.
- Ako trebate postaviti posebne stilove za prvu i posljednju karticu, morate dodati klasu za prvi i posljednji element li tako da ih možete stilizirati pojedinačno.
Zaključak
Predloženo rješenje je kompatibilno sa svim pretraživačima, ne koristi JavaScript i podržava tekst koji se može promijeniti.
1. Vertikalni živopisan jQuery meni
2. Cool efekat. Plesni meni.
4. Padajuća lista koristeći jQuery
Odličan stil elementa interfejsa u obliku padajuće liste.
Kada pređete mišem preko dugmeta, odozgo se pojavljuje panel.
6. jQuery dodatak "MobilyBlocks" za prikaz kružnog menija
7. Meni pomoću sprite-ova
Animirani javascript meni sa efektom sjaja.
Svjež lijep jQuery meni.
9. jQuery GarageDoor meni
10. jQuery meni za vertikalno pomicanje
Implementacija menija sa velikim brojem stavki. Pomeranje prilikom pomeranja kursora miša gore ili dole.
11. jQuery padajući stil
12. Dodatak za navigaciju stranica
Glatko skrolovanje do željenog odeljka na stranici. jQuery dodatak za jednostranu navigaciju.
13. Dodatak menija animiranog sadržaja
Novi jQuery dodatak. Odlična implementacija animirane navigacije stranice. Kada se krećete kroz stavke menija, iskače blok sa opisom i mogućim linkovima, dok se u zavisnosti od izabrane stavke menja pozadina stranice koja se proteže na ceo ekran, bez obzira na veličinu prozora pretraživača. Obavezno pogledajte demo stranicu.
14. Dodatak za jQuery Sweet Menu
Animirani meni sa pokretnim stavkama.
15. Fiksni jQuery meni
Kada se pomičete prema dolje, meni ostaje fiksiran na vrhu ekrana.
16. Skrolovanje menija kompleta klizača
Za implementaciju vertikalnog menija sa velikim brojem stavki. Stavke se mogu pomicati pomoću kotačića miša ili pomoću veza "Prethodno" i "Sljedeće".
17. Moderan CSS3 meni
18. Novi CSS3 meni u Apple stilu
Novi meni u stilu Apple-a. Izgleda tamnije nego prije, ali ništa manje lijepo.
19. Originalni jQuery meni
Padajući meni sa efektom pozadine. Pod-stavke menija se proširuju prema gore. Kada pređete mišem preko stavke menija, pozadinska slika se menja.
20. Animirani jQuery meni
Animirani meni. Stavke menija su predstavljene kao ikone i opisi. neki sjajni efekti kada pređete mišem preko stavke menija. Postoji 8 efekata, da biste ih sve videli, pratite linkove Primer1-Primer8 na demo stranici.
21. "Meni za pomeranje" XML meni za pomeranje
Vertikalni i horizontalni pomerajući meniji. Dobro rješenje za veliki broj stavki na meniju.
22. Kontekstni meni na jQuery web stranici
Meni se pojavljuje desnim klikom na određeno područje.
23. Kružni dvostepeni meni za sajt
Kada je odabrana stavka menija, stavke podmenija se prikazuju na desnoj strani.
24. jQuery CSS3 meni sa efektom zamućenja "Blur Menu" CSS3
Originalni jQuery CSS3 meni dolazi u 7 različitih stilova. Kada pomerite kursor miša preko jedne od stavki menija, čini se da su ostale zamućene.
25. Neki spektakularni animirani jQuery CSS3 meniji
10 kreativnih animiranih menija. Horizontalni i vertikalni CSS3 meniji sa raznim efektima i prijelazima.
Arhiva takođe sadrži originalni PSD fajl menija.
27. Meni Magic Line
Pozadina ili podvlaka stavke menija prati miša sa malim zakašnjenjem, dok pozadina glatko menja svoju boju dok se krećete od stavke do stavke. Vrlo lijep efekat, izgleda neobično. Pažnja: efekat ne radi u operi
28 Oblačići sa slikama
Odličan efekat kada pređete mišem preko jedne od slika. Efekat pomalo podsjeća na gore opisani jQDock.
31. Zanimljivi jQuery meniji sa raznim efektima
Horizontalni, vertikalni meni. Zanimljivi efekti.
32. Odličan jQuery meni u stilu Apple-a
34. jQuery meni sa zanimljivim efektom
36. Svježi meni sa zanimljivim jQuery efektom
Veoma zanimljiv efekat. Savršeno za web stranice s portfoliom.
Zanimljiv efekat iskačućih sličica pri lebdenju.
40. Padajuća lista sa automatskim skrolovanjem
Dobar efekat prijelaza između stavki.
42. Odličan jQuery meni
43. Lijep veliki jQuery meni
44. jQuery meniji koji se mogu pomicati
Stavke menija su prikazane kao sličice.
46. jQuery radijalni navigacijski meni
47. CSS i jQuery meniji
Traka za navigaciju s okvirom za pretraživanje koji postaje proziran kada skrolujete prema dolje po stranici.
48. Horizontalni jQuery meni
49. Vertikalni jQuery meni
Odličan vertikalni meni. Kada zadržite pokazivač miša, iskače stavka menija.
50. Horizontalni jQuery meni
Zanimljiv efekat kada se lebdi iznad stavke menija.
52. Padajući jQuery meni
Kada pomerite kursor miša preko menija, njegove stavke će se pojaviti. Stavke koje se pojavljuju prikazuju se kao luk, čiji radijus možete postaviti prilikom postavljanja dodatka. U nekim pretraživačima nećete vidjeti lučni prikaz, meni će se prikazati ravno, ali to još uvijek ne narušava cjelokupno iskustvo ove implementacije jQuery menija.
53. CSS i jQuery navigaciona traka
Zanimljiv efekat kada se mišem pređe preko stavke menija.
54. jQuery popup panel
Svježi animirani meni u sivim tonovima.
58. Kolumna navigacija po web-mjestu sa jQuery
Zanimljivo rješenje za navigaciju, koje je predstavljeno u obliku vertikalnih pruga. Kada pređete mišem preko ovih traka, pojavljuje se slika za stavku i lista podmenija. Kada kliknete na stavku podmenija, pojavljuje se stranica sa opisom. Ova implementacija je savršena za promotivne stranice ili prezentacije. Obavezno pogledajte demo dodatka.
59. jQuery navigacija stranice
Navigacija sajtom je predstavljena u obliku 4 slike, kada pređete mišem preko kojih ćete primetiti zanimljiv animirani efekat.
60. Navigaciona traka se pomera sa sadržajem
Traka za navigaciju. Klikom na strelicu pomičete stranicu. Navigacija se pomiče zajedno sa sadržajem stranice.
61. jQuery panel sa raznim društvenim uslugama
62. Uredan animirani jQuery meni
63. jQuery meni akvarelnih četkica
Većina klasičnih web stranica na webu koristi horizontalni meni kao glavni navigacijski element. Ponekad može sadržavati razne dodatne karakteristike - konstrukcije na više nivoa, ikone za podstavke, blok za pretragu, složene liste itd. Nedavno je na blogu već bio mali izbor, a danas ćemo pogledati 4 praktična primjera kako napraviti padajući meni u CSS + HTML. Informacije su korisne za programere početnike i one koji žele promijeniti navigaciju na svojoj web stranici.
Prvi vodič za CSS3 padajući meni je najnoviji u kolekciji (od aprila 2016.). Prednosti rešenja: u ovom horizontalnom padajućem meniju za sajt se nalaze ikone u podstavkama, implementacija i sam CSS kod su prilično jednostavni za razumevanje i implementaciju.
Korak 1 - HTML markiranje
Prvi korak je kreiranje neuređene liste u HTML-u sa sidrenim vezama (#) za njegove elemente. Tamo, u jednu od stavki, dodajemo još jednu ugniježđenu listu koja će biti odgovorna za podmeni.
Korak 2 - prikaz menija
Uklanjanje dodatnih dopuna u CSS-u za elemente horizontalnog padajućeg menija sajta. U istoj fazi ćemo postaviti fiksnu širinu i visinu stavki menija, a takođe ćemo dodati zaobljene uglove.
| .menu, .menu ul, .menu li, .menu a ( margina : 0 ; padding : 0 ; granica : nema ; outline : nema ; ) .menu ( visina : 40px ; širina : 505px ; pozadina : #4c4e5a ; pozadina : -webkit-linear-gradient(top , #4c4e5a 0% , #2c2d33 100% ) ; pozadina : -moz-linear-gradient(top , #4c4e5a 0% , #2c2d33 100% ) ; pozadina: -o-linear-gradient (vrh , #4c4e5a 0% , #2c2d33 100% ) ; pozadina : -ms-linear-gradient(top , #4c4e5a 0% , #2c2d33 100% ) ; pozadina: linearni gradijent (top , #4c4e5a 0% 0% 2c2d33 100% ) ; -webkit-border-radius: 5px ; -moz-border-radius: 5px; border-radius: 5px ; ) .menu li (pozicija: relativna; stil liste: nijedan; float: lijevo; prikaz: blok ; visina : 40px ;) |
Meni, .menu ul, .menu li, .menu a ( margina: 0; padding: 0; granica: nema; obris: nema; ) .menu (visina: 40px; širina: 505px; pozadina: #4c4e5a; pozadina: - webkit-linear-gradient(vrh, #4c4e5a 0%,#2c2d33 100%); pozadina: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); pozadina: -o-linear-gradient( vrh, #4c4e5a 0%,#2c2d33 100%); pozadina: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); 100%); -webkit-border-radius: 5px; -moz -border-radius: 5px; border-radius: 5px; ) .menu li (pozicija: relativna; stil liste: nijedan; float: lijevo; prikaz: blok; visina: 40px; )
Korak 3 - dizajn linka
Pored osnovnih karakteristika u stilovima (font, boja, visina), koristimo i kreiramo glatki prelaz boje teksta pri lebdenju. U meni dodajemo i separatore, uklanjajući granicu sa prve stavke s lijeve strane i posljednje stavke s desne strane.
| .menu li a ( display : block ; padding : 0 14px ; margina : 6px 0 ; line-height : 28px ; text-decoration : nema ; border-left : 1px solid #393942 ; border-right : 1px solid #4f5058 ; font -familija: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 13px; boja: #f3f3f3; text-shadow: 1px 1px 1px rgba (0, 0, 0, .6-); -webkit prijelaz: boja .2s lakoća ulaska; -moz-prijelaz: boja .2s lakoća ulaska; -o-prijelaz: boja .2s lakoća ulaska; -ms-prijelaz: boja .2s lakoća ulaska -izlaz; prijelaz : boja .2s jednostavnog ulaska; ) .meni li: prvo dijete a ( granica-lijevo : nema ; ) .meni li: posljednje dijete a( granica-desno : nema ; ) .meni li : hover > a ( boja : #8fde62 ; ) |
Meni li a (prikaz: blok; padding: 0 14px; margina: 6px 0; visina linije: 28px; dekoracija teksta: nema; granica lijevo: 1px čvrsta #393942; granica desno: 1px čvrsta #4f5058; font- porodica: Helvetica, Arial, sans-serif; težina fonta: bold; veličina fonta: 13px; boja: #f3f3f3; sjena teksta: 1px 1px 1px rgba(0,0,0,.6); -webkit-transition : boja .2s lakoća ulaska; -moz-prijelaz: boja .2s lakoća ulaska; -o-prijelaz: boja .2s lakoća ulaska; -ms-prijelaz: boja .2s lakoća ulaska- izlaz; prijelaz: boja .2s jednostavnog ulaska; ) .meni li:prvo dijete a (borvica lijevo: nema; ) .meni li:posljednje dijete a( granica desno: nema; ) .meni li: hover > a ( boja: #8fde62; )
Korak 4 - podmeni
Pošto imamo padajući meni CSS sajta, trebalo bi da postavimo i dizajn ugnežđene liste. Prvo postavite padding na 40px na vrhu i 0px na lijevoj + dodajte zaobljene uglove. Da bismo prikazali/sakrili podmeni, inicijalno smo postavili svojstvo neprozirnosti na nulu, a pri lebdenju na jedan. Da biste kreirali efekat izgleda podmenija, postavite visinu liste na nulu i lebdite = 36px.
| .menu ul ( pozicija : apsolutna ; vrh : 40px ; lijevo : 0 ; neprozirnost : 0 ; pozadina : #1f2024 ; -webkit-border-radius: 0 0 5px 5px ; -moz-border-radius: 0 0 5px 5px ; granica -radius: 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 lakoća .1s; .25s ease .1s ; prijelaz : neprozirnost .25s ease .1s ; ) .menu li: hover > ul ( opacity : 1 ; ) .menu ul li (visina : 0 ; overflow : skriveno ; padding : 0 ; -webkit-transition : . : 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 ; .1s ; ) .meni li: hover > ul li (visina: 36px; prelivanje: vidljivo; padding: 0 ;) |
Meni ul ( pozicija: apsolutna; 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 lakoća .1s; 25s ease .1s; prijelaz: neprozirnost .25s ease .1s; ) .menu li:hover > ul (prozirnost: 1; ) .menu ul li (visina: 0; prelijevanje: skriveno; padding: 0; -webkit-transition: 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: 36px; overflow: vidljivo; padding: 0; )
Postavljamo širinu linkova = 100px, na dnu svih elemenata osim posljednjeg dodaje se granica donje granice. Takođe, ako želite, možete postaviti slike za stavke podmenija (pažnja! ne zaboravite da promenite putanje do slika u kodu na one koje koristite).
| .menu ul li a ( širina : 100px ; padding : 4px 0 4px 40px ; margina : 0 ; granica : nema ; border-bottom : 1px solid #353539 ; ) .menu ul li: last-child a ( granica: nema ; ) .meni a.documents (pozadina: url (../img/docs.png) bez ponavljanja 6px centar; ) .meni a.messages (pozadina: url (../img/bubble.png) bez ponavljanja 6px centar ; ) .meni a.signout (pozadina: url (../img/arrow.png) bez ponavljanja 6px centar ;) |
Menu ul li a (širina: 100px; padding: 4px 0 4px 40px; margina: 0; granica: nema; border-bottom: 1px solid #353539; ) .menu ul li:last-child a ( border: none; ) . meni a.documents (pozadina: url(../img/docs.png) bez ponavljanja 6px centar; ) .meni a.messages (pozadina: url(../img/bubble.png) bez ponavljanja 6px centar; ) .meni a.signout (pozadina: url(../img/arrow.png) bez ponavljanja 6px centar; )
Meni se lično sviđa jednostavnost implementacije i korištenja ikona. Evo konačnog koda sa codepen-om:
Verzija Josha Risera je vizuelno slična prethodnom padajućem meniju u HTML i CSS. U kodu nema ">" selektora djece (korisno u slojevitim dizajnima), ali autor uspješno koristi CSS3 efekte (prijelaz, box-shadow i text-shadow) za ljepši rezultat. Prema linku u izvoru, nema opisa procesa kreiranja horizontalnog padajućeg menija, pa ću odmah dati konačni kod:
U ovom primjeru ćemo pogledati kako napraviti padajući meni u CSS-u, u kojem će pored stavki biti i blok za pretragu. Slična implementacija se često može naći u modernim . Što se tiče vremena implementacije i složenosti, rješenje je nešto komplikovanije od prethodnih. Objavljeno je u maju 2013. godine, tako da ćete možda morati nešto podesiti, iako je na našem testiranju sve funkcionisalo dobro.
HTML kod
Za navigaciju se, kao i uvijek, koristi neuređena lista (sa klasom nav). Uobičajene stavke menija su stavke liste (li) i sadrže veze (a href) bez ikakvih klasa ili ID-ova. Izuzetak su 3 specijalizirana elementa ovog horizontalnog padajućeg menija sa sljedećim ID-ovima:
- podešavanja - link slike;
- pretraga - blok s pretraživanjem i odgovarajućim gumbom;
- opcije - sadrži podmeni (realizovan preko liste sa subnav klasom).
Također u kodu ćete vidjeti skriptu bez prefiksa za korištenje CSS svojstava bez prefiksa. Rezultirajući HTML za padajući meni izgleda ovako:
|
-
- Aplikacija
- Board
- Opcije
CSS za meni
1. Osnovni stilovi i stavke menija
Prvo određujemo Montserrat font, tamno sivu pozadinu i fiksnu visinu za stavke menija. Svi elementi su float: poravnati lijevo i pozicionirani relativno tako da kasnije možete dodati podmeni sa položajem: apsolutni;
| @import url (http: //fonts.googleapis .com/css?family= Montserrat) ; * ( margina : 0 ; padding : 0 ; ) .nav ( pozadina : #232323 ; visina : 60px ; display : inline-block ; ) .nav li ( float : lijevo ; tip-stil liste : nijedan; položaj : relativan ; ) |
@import url(http://fonts.googleapis.com/css?family=Montserrat); * ( margina: 0; padding: 0; ) .nav ( pozadina: #232323; visina: 60px; prikaz: inline-block; ) .nav li ( float: lijevo; tip-stil liste: nema; položaj: relativan; )
2. Formatiranje veza
Stavke menija koriste osnovni stil + . Visina je ista kao u navigacijskoj klasi. #settings linka slike na početku menija postavljeno je da se poravna.
| .nav li a (font-size : 16px ; boja : bijela ; display : block ; line-height : 60px ; padding : 0 26px ; text-decoration : nema ; border-left : 1px solid #2e2e2e ; font-family : Montserrat , sans-serif ;text-shadow : 0 0 1px rgba (255 , 255 , 255 , 0.5 ) ; ) .nav li a: lebdeći (boja pozadine : #2e2e2e ; ) #settings a ( padding : 18px ; visina ; ; font-size : 10px ; line-height : 24px ;) |
Nav li a (veličina fonta: 16px; boja: bijela; zaslon: blok; visina linije: 60px; padding: 0 26px; dekoracija teksta: nema; granica lijevo: 1px čvrsta #2e2e2e; porodica fontova: Montserrat, sans-serif;text-shadow: 0 0 1px rgba(255, 255, 255, 0.5); ) .nav li a:hover ( background-color: #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 delova - polja za unos (#search_text) sa zelenom pozadinom i dugmeta za pretragu (#search_button). U nekim pretraživačima, boja pozadine može biti siva.
| #search ( širina : 357px ; margina : 4px ; ) #search_text (širina: 297px ; padding : 15px 0 15px 20px ; font-size : 16px ; font-family : Montserrat, sans-serif no ; px 0 border : visina ; margin-desno : 0 ; boja : bijela ; kontura : nijedna ; pozadina : #1f7f5c ; float : lijevo ; box-size : border-box ; prijelaz : sve 0,15 s ; ) :: -webkit-input-placeholder ( /* WebKit pretraživači */ 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 : fokus (pozadina: rgb (64, 151, 119) ;) #search_button ( granica: 0 nema ; pozadina: #1f7f5c url (search.png) centar bez ponavljanja; širina: 60px; float: lijevo; padding: 0; text-align: centar; visina: 52px; kursor: pokazivač;) |
#search ( širina: 357px; margina: 4px; ) #search_text( širina: 297px; padding: 15px 0 15px 20px; font-size: 16px; font-family: Montserrat, sans-serif; granica: 0 nema; visina: 52px ; margin-desno: 0; boja: bijela; obris: nema; pozadina: #1f7f5c; float: lijevo; veličina okvira: okvir-boks; prijelaz: sve 0,15 s; ) ::-webkit-input-placeholder ( /* WebKit pretraživači */ 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 (pozadina: rgb(64, 151, 119); ) #search_button ( granica: 0 nema; pozadina: #1f7f5c url (search.png) centar bez ponavljanja; širina: 60px; float: lijevo; padding: 0; poravnanje teksta: centar; visina: 52px; kursor: pokazivač; )
4. Padajući podmeni
Poslednji dodir će nam omogućiti kako da napravimo CSS padajući meni koji se pokreće za poslednju #options stavku.
| #options a( border-left : 0 none ; ) #options > a ( background-image : url (triangle.png ) ; background-position : 85% centar ; background-repeat : ne-repeat ; padding-right : 42px ; ) .subnav ( vidljivost : skrivena ; pozicija : apsolutna ; vrh : 110% ; desno : 0 ; širina : 200px ; visina : auto ; neprozirnost : 0 ; prijelaz : sve 0,1 s ; pozadina : #232323 ; ) .subnav li : none ; ) .subnav li a ( border-bottom : 1px solid #2e2e2e ; ) #options : lebdeti .subnav ( vidljivost : vidljiva ; vrh : 100% ; neprozirnost : 1 ; ) |
#options a( border-left: 0 none; ) #options>a ( background-image: url(triangle.png); background-position: 85% centar; background-repeat: no-repeat; padding-right: 42px; ) .subnav ( vidljivost: skrivena; pozicija: apsolutna; vrh: 110%; desno: 0; širina: 200px; visina: auto; neprozirnost: 0; prijelaz: sve 0,1 s; pozadina: #232323; ) .subnav li ( float : none; ) .subnav li a ( border-bottom: 1px solid #2e2e2e; ) #options:hover .subnav ( vidljivost: vidljiva; vrh: 100%; neprozirnost: 1; )
U stilovima ćete naći umetanje pozadinske slike trougla (triangle.png) za označavanje podmenija - ne zaboravite da navedete ispravnu putanju za ovu i druge slike u primeru. Izgled podmenija implementiran je pomoću svojstva neprozirnosti. Konačno rješenje na codepen-u:
Ova opcija uglavnom koristi CSS2.1 tehnike, rešenje je plus ili minus novo - za mart 2015. Ako vam nedostaje jedan podnivo u horizontalnom padajućem meniju za sajt, onda ovaj primer sadrži tri odjednom. Pseudo-klasa :only-child dodaje simbol "+" stavkama da označi prisustvo podmenija.
Općenito, dobar i jednostavan primjer. Nećemo detaljno opisivati proces implementacije, jer sličan je prethodnim - prvo kreirate HTML kostur, a zatim postepeno dodajete stilove za njega. Preuzmite konačni kod sa linka na izvorni kod, možete ga djelomično vidjeti u Codepen-u:
Ukupno
Iznad smo pogledali 4 opcije kako napraviti padajući meni u CSS + HTML za , iako postoji mnogo više sličnih primjera na mreži. Postoje rješenja sa jQueryjem, ali ovo je najvjerovatnije korisno samo za implementaciju nekih specijalnih efekata i nestandardnih zadataka. U većini slučajeva dovoljna je gomila CSS + HTML, pogotovo jer su sada glavni zahtjevi za meni praktičnost i brza brzina učitavanja.
Na kraju, dva komentara na kodove iznad. Neki od primjera padajućeg izbornika CSS koriste slike, tako da ćete morati pažljivo pogledati putanje slika i postaviti ispravne vrijednosti za svoju web stranicu. Drugo, neka rješenja su stara 2-3 godine, tako da je potrebno dodatno provjeriti njihovu izvedbu u različitim pretraživačima.
Ako znate još neke zanimljive moderne implementacije horizontalnih padajućih menija za sajt, pošaljite linkove u komentarima.
