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
Samo Css3 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.
Ako vaša web stranica nije ograničena na jednu web stranicu, razmislite o dodavanju navigacijske trake (menija). Izbornik je dio web stranice dizajniran da pomogne posjetitelju da se kreće po stranici. Svaki meni je lista linkova koji vode do internih stranica sajta. Najlakši način da dodate navigacijsku traku na svoju web lokaciju je kreiranje menija koristeći CSS i HTML.
Vertikalni meni
Prvi korak u kreiranju vertikalnog menija je kreiranje liste sa nabrajanjem. Također moramo biti u mogućnosti identificirati listu, pa ćemo joj dodati id atribut sa id "navbar". Svaki element
Naš sljedeći zadatak je resetiranje zadanih stilova liste. Moramo ukloniti vanjske i unutrašnje uvlake sa same liste i markere sa stavki liste. Zatim postavite željenu širinu:
#navbar ( margina: 0; padding: 0; tip-stil liste: nijedan; širina: 100px; )
Sada je vrijeme za stiliziranje samih veza. Dodat ćemo im boju pozadine, promijeniti parametre teksta: boju, veličinu i zasićenost fonta, ukloniti podcrtanu crtu, dodati male uvlake i redefinirati prikaz element iz inline u blok. Dodatno, lijevi i donji okviri su dodani na stavke liste.
Najvažniji dio naših promjena je redefiniranje inline elemenata u blok elemente. Sada naše veze zauzimaju cijeli raspoloživi prostor stavki liste, što znači da više ne moramo preći preko tačnog teksta da bismo pratili vezu.
#navbar a (boja pozadine: #949494; boja: #fff; padding: 5px; dekoracija teksta: nema; font-weight: bold; border-left: 5px čvrsta #33ADFF; display: block; ) #navbar li ( border-left: 10px solid #666; border-bottom: 1px solid #666; )
Kombinirali smo sav gornji kod u jedan primjer, sada klikom na dugme probaj možete otići na stranicu sa primjerom i vidjeti rezultat:
Kada pomerite kursor miša preko stavke menija, njen izgled se može promeniti, privlačeći pažnju korisnika na sebe. Možete stvoriti takav efekat koristeći :hover pseudo-klasu.
Vratimo se na naš raniji primjer vertikalnog menija i dodajmo sljedeće pravilo u stilove:
#navbar a:hover (boja pozadine: #666; granica lijevo: 5px čvrsta #3333FF; ) Pokušajte »
Horizontalni meni
U prethodnom primjeru pogledali smo vertikalnu navigacijsku traku, koja se najčešće nalazi na web stranicama lijevo ili desno od područja glavnog sadržaja. Međutim, meniji sa navigacijskim vezama također se često nalaze horizontalno na vrhu web stranice.
Horizontalni meni se može kreirati stilizovanjem obične liste. Prikaz svojstva za elemente
Da biste rasporedili stavke menija horizontalno, prvo kreirajte listu sa nabrajanjem sa vezama:
Hajde da napišemo nekoliko pravila za našu listu koja resetuju stil koji se podrazumevano koristi za liste i redefiniše stavke liste iz bloka u inline:
#navbar ( margina: 0; padding: 0; tip-stil liste: nijedan; ) #navbar li ( display: inline; ) Pokušajte »
Sada samo trebamo definirati stil za naš horizontalni meni:
#navbar ( margina: 0; padding: 0; tip-stil liste: nijedan; granica: 2px čvrsta #0066FF; radijus granice: 20px 5px; širina: 550px; poravnanje teksta: centar; boja pozadine: #33ADFF; ) #navbar a ( boja: #fff; padding: 5px 10px; text-decoration: nema; font-weight: bold; display: inline-block; širina: 100px; ) #navbar a:hover ( border-radius: 20px 5px ; boja pozadine: #0066FF; ) Pokušajte »
Padajući meni
Meni koji ćemo kreirati imat će glavne navigacijske veze smještene u horizontalnoj navigacijskoj traci i podstavke koje će biti prikazane samo kada se kursor miša pređe preko stavke menija kojoj ove podstavke pripadaju.
Prvo treba da kreiramo HTML strukturu našeg menija. Postavićemo glavne navigacijske veze u listu sa nabrajanjem:
Postavićemo podstavke u posebnu listu tako što ćemo ih ugniježditi u element
Pokušajte »
Sada počnimo pisati CSS kod. Prvi korak je da sakrijete listu sa podstavkama sa prikazom: nema; deklaracija kako se ne bi stalno pojavljivale na web stranici. Da bismo prikazali podstavke, to nam je potrebno kada pređemo mišem iznad elementa
#navbar ul ( display: none; ) #navbar li:hover ul ( display: block; )
Uklanjamo podrazumevane uvlake i markere sa obe liste. Elemente liste pravimo sa plutajućim vezama za navigaciju, formirajući horizontalni meni, ali za elemente liste koji sadrže podstavke postavljamo float: none; tako da se pojavljuju jedno ispod drugog.
#navbar, #navbar ul ( margina: 0; padding: 0; tip-stil liste: nijedan; ) #navbar li ( float: lijevo; ) #navbar ul li ( float: nema; )
Zatim, moramo biti sigurni da naš padajući meni podmenija ne gura sadržaj ispod navigacijske trake prema dolje. Da bismo to uradili, postavićemo stavke liste na poziciju: relativno; , ali lista koja sadrži podstavke pozicija: apsolutna; i dodajte top svojstvo sa vrijednošću od 100% tako da se apsolutno pozicionirani podmeni pojavi tačno ispod linka.
#navbar ul ( prikaz: nema; pozicija: apsolutna; vrh: 100%; ) #navbar li ( float: lijevo; pozicija: relativna; ) #navbar (visina: 30px; ) Pokušajte »
Visina za nadređenu listu je namjerno dodana, budući da pretraživači ne smatraju plutajući sadržaj sadržajem elementa, bez dodavanja visine, pretraživač će zanemariti našu listu i sadržaj koji slijedi nakon liste će se omotati oko našeg menija.
Sada samo trebamo stilizirati obje naše liste i naš padajući meni će biti spreman:
#navbar ul ( display: none; background-color: #f90; position: absolute; top: 100%; ) #navbar li:hover ul (display: block; ) #navbar, #navbar ul ( margin: 0; padding: 0; tip-stila liste: nema; ) #navbar (visina: 30px; boja pozadine: #666; padding-left: 25px; min-width: 470px; ) #navbar li (float: lijevo; položaj: relativan; visina: 100%; ) #navbar li a (prikaz: blok; padding: 6px; širina: 100px; boja: #fff; text-decoration: nema; text-align: center; ) #navbar ul li (float: nema; ) #navbar li:hover (boja pozadine: #f90; ) #navbar ul li:hover (boja pozadine: #666; )
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 osobi 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 zadržavati na ovom koraku u detalje, jer se ipak nadam da niste toliko početnici da vam detaljno kažete šta su tijelo i glava i kako su uključeni stilovi. 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:left; )
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!!!
Zadatak
Napravite horizontalni meni čije stavke imaju proizvoljan nagib (slika 1).
Rice. 1. Prikaz menija sa nagnutim stavkama
Rješenje
Svojstvo stila transformacije odgovorno je za transformaciju elementa, a funkcija skewX se koristi kao njegova vrijednost, koja postavlja željeni nagib. Ugao nagiba je lakše podesiti u stepenima, na primer, 30 stepeni je 30 stepeni u odnosu na vertikalu. Transformacija utiče na sve podređene elemente, tako da će i tekst unutar elementa biti iskrivljen, što nije najbolji način da se odrazi na njegovu čitljivost i lepotu. Stoga je važno ponovo primijeniti nagib na tekst, ali u drugom smjeru, za to je dovoljno samo promijeniti predznak ispred vrijednosti stupnjeva.
Preglednici podržavaju svojstvo transformacije pretežno sa svojim vlastitim prefiksima, tako da radi dosljednosti u stilu, ponovite ga nekoliko puta s istom vrijednošću, dodajući -moz- za Firefox, -webkit- za Safari i Chrome, -o- za Opera i -ms - za pretraživač Internet Explorer kao što je prikazano u primjeru 1.
Primjer 1: Stavka menija nagnuta
HTML5 CSS3 IE Cr Op Sa Fx
- Joker
- Pazuzu
- Palpatine
- Doctor Doom
U ovom primjeru, horizontalni meni je kreiran pomoću liste sa nabrajanjem. Da bi lista bila tačno horizontalna, svojstvo prikaza sa vrednošću inline-block dodaje se elementu li u stilovima. Za skew, svojstvo transformacije se koristi sa funkcijom skewX i vrijednošću od -30º. Ovo svojstvo se također primjenjuje na veze unutar liste, ali s pozitivnom vrijednošću od 30º, to osigurava da su slova prikazana ispravno, a ne nagnuta.
Chrome, Safari i Firefox pretraživači koriste svojstvo transformacije za blok ili inline-blok elemente, tako da veze imaju svoj prikaz prikaza postavljen na blokiranje.
Zadatak
Kreirajte padajući meni sa CSS i HTML alatima.
Rješenje
Prvo, napravimo listu, postavimo je vodoravno i stiliziramo njen izgled. Ovo će biti glavni meni, a zatim ćemo napraviti padajući meni za njegove stavke.
Imamo ovakvu listu:
Slika 1. Pripremni radovi.
Imajte na umu da se stil veze mijenja kada pređete mišem preko nje. Ovo se implementira pomoću pseudo-klase :hover. Ova pseudo-klasa postavlja stil elementa kada se lebdi iznad njega bez pritiskanja tipke miša. Ako se pritisne dugme, ovo je još jedna pseudo-klasa.
Sada idemo na rješavanje našeg problema. Napravimo padajući meni za stavku "Usluge", dodajmo padajuće sekcije: "Kupi", "Prodaj", "Razmjena". Ove stavke su zasebna lista koja je ugniježđena u oznaci
Kreirajmo ovu listu i dodajmo stilove da opišemo njen izgled.
Sada imamo sljedeću listu:
Slika 2. Pripremni radovi. Naravno, ovo nije ono što nam treba. Prema zadanim postavkama, ova lista bi trebala biti skrivena i postati vidljiva samo kada se lebdi. Možete sakriti element koristeći pravilo pravila (prikaz: nema). A kada zadržite pokazivač iznad njega, morate ga aktivirati tako što ćete pravila ponovo učiniti vidljivima ( display : inline-block ).
Sada naš meni nestaje i pojavljuje se, ali želimo da se pojavi na vrhu postojećih elemenata bez promjene već postavljenih granica postojećih okvira.
Da bi element bio prikazan bez uticaja na prikaz drugih elemenata, mora biti pozicioniran sa apsolutnom vrijednošću.
Šta smo radili ovdje:
- pravilo pozicioniranja (pozicija : relativna ;). Ovo se radi tako da izvještaj o apsolutnim koordinatama položaja ugniježđene liste počinje od gornjeg lijevog ugla ovog bloka, a ne od ugla ekrana.
- dodano roditeljskom elementu
- pravilo (visina : 20px ;). Dali smo mu visinu kako bi bilo zgodnije pozicionirati padajuću listu.
- Postavite apsolutno pozicioniranje (pozicija : apsolutna ;) na padajuću listu i postavite koordinate: gore i lijevo.
Sada padajući meni radi ispravno.
Slika 3. Konačna verzija. Naravno, ovdje možete napraviti ljepši izgled padajućeg menija, ali u okviru našeg zadatka i ovo je dovoljno.
Problem učenja je riješen. ćao.
