Prekrasan horizontalni css meni. Vertikalni živopisan jQuery meni

16.05.2019 Savjet

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%); pozadina: linear-gradient(top, #4c4e5a 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; )

Korak 3 - dizajn linka

Pored osnovnih karakteristika u stilovima (font, boja, visina), koristimo i kreiramo glatki prelaz boje teksta pri lebdenju. Također dodajemo separatore u izbornik, uklanjajući granicu od 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 izlaska; -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:zadnje 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
- Postavke
- Aplikacija
- Board
- Opcije

Aplikacija
Board
Opcije
- Postavke
- 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 : nema ; 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: none; 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 :ne border : visina 0 ; 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 pronać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 do izvora, 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-a koriste slike, tako da ćete morati pažljivo pogledati putanje slika i postaviti ispravne vrijednosti za svoju web lokaciju. 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.

Specifikacija

Opis

Tag

je dizajniran za prikaz liste stavki menija. Slično oznakama

lista se formira pomoću oznaka

U HTML4 tag

izvan upotrebe, preporučuje se korištenje oznake umjesto toga

ponovo omogućen, ali u drugom svojstvu. Sada djeluje kao kontejner za oznaku i kreiranje menija.

Sintaksa

HTML	stavku menija stavku menija
HTML5	...

Atributi

Postavlja vidljivu oznaku za meni. Određuje tip menija.

Oznaka za zatvaranje

Obavezno.

Validacija

Upotreba ove oznake je zastarjela HTML4 specifikacijom, važeći kod se dobiva samo kada se koristi prijelazni. U HTML5, upotreba oznake

ispravno.

HTML 4.01 IE Cr Op Sa Fx

MENU tag

U ovom izdanju:

Ruska kuhinja. Ear burlatskaya

ukrajinska hrana. Vareniki

Moldavska kuhinja. Paprikaš

Kavkaska kuhinja. Supa kharcho

Baltička kuhinja. Vertiniai

Rezultat ovog primjera prikazan je na sl. jedan.

Rice. 1. Pregled liste kreirane pomoću oznake

HTML5 IE Cr Op Sa Fx

MENU tag

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. Dostupno je 8 efekata, da biste ih sve vidjeli - pratite veze Primjer1-Primjer8 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

Kreirajmo jednostavan horizontalni navigacijski meni za web stranicu. Da bismo to učinili, koristit ćemo jednostavne trikove, koji će rezultirati ispravnim prikazom našeg menija u svim pretraživačima.

Dakle, počnimo. Kreirajmo listu sa nazivima našeg menija. Kao nazivi stavki neka budu: "Početna", "Novosti", "Proizvodi", "Usluge", "Partneri", "Kontakti". Kreiramo novu datoteku pod nazivom menu.html, na primjer, koristeći Dreamweawer ili koristeći običan notepad. U njega, između oznaka tijela, postavljamo naš meni. To je samo ul lista sa nabrajanjem sa li elementima. Naravno, svaku stavku menija pravimo linkom, gde umesto URL-a ubacujemo heš oznaku #. Koristeći Photoshop, kreirajte sliku veličine 3x30 px sa ispunom gradijenta kao što je prikazano na slici ispod. Fajl će biti sačuvan u GIF formatu. Nazovimo to bg.gif . Ova slika će služiti kao pozadinska slika našeg menija.

Evo sadržaja datoteke menu.html:

Jednostavan horizontalni meni za više pretraživača

Dom
vijesti
Proizvodi
Usluge
Partneri
Kontakti

Sada ćemo posebno kreirati stilski list pod nazivom main.css. Njegov popis je u cijelosti dat u nastavku.

Ul ( margin:0; /*podesite padding na nulu*/ padding:0; /*postavite padding na nulu*/ float:left; /*levo-poravnajte listu*/ width:auto;/*postavite automatsku širinu na osnovu tip i sadržaj liste */ background-image: url(bg.gif); /*postaviti pozadinsku sliku*/ background-repeat:repeat-x; /*ponoviti našu sliku horizontalno*/ list-style:none; /*ukloniti listu markeri*/ background-color:#4778c3; /*postavite boju pozadine za sliku*/ font-size:13px; /*postavite veličinu fonta*/ font-family:Arial, Helvetica, sans-serif; /*postavite font*/ ) ul li ( float:left; /*left-align list items*/ ) ul a ( display:block; /*predstavlja veze menija kao blok elemente*/ width:100px; /*postavi veličinu bloka*/ visina:30px; /* i visina bloka*/ text-align:center; /*label centered*/ line-height: 2.1em; /*prored*/ text-decoration:none; /*ukloni podvlačenje iz linkovi*/ boja:#fff; /*boja teksta linka - bijela*/ border-right:#fff solid 1px; /*bor dur desna strana bloka (bijela linija na 1px)*/ ) ul a:hover ( color:#ccc; /*link mijenja boju pri lebdenju*/ )

Mislim da ne bi trebalo biti pitanja o sadržaju main.css fajla, dovoljno sam detaljno i jasno napisao nagoveštaje u komentarima, tako da se neću ponavljati. Ne zaboravite da ga povežete sa našom menu.html stranicom sa

Sažmite. Rezultat je potpuno horizontalni meni za više pretraživača koji izgleda isto ne samo u svim modernim pretraživačima, već iu takvim retkostima kao što su IE 5.5 i IE 6.0. Sve stavke menija se prikazuju kao elementi na nivou bloka i imaju iste dimenzije na 100px širine i 30px visine. Kao separator za stavke menija, koristi se dizajn blok elementa sa bijelim desnim rubom debljine 1px. Ovo je praktično najlakši način za implementaciju horizontalnog menija. Naravno, ako želite, možete ga modificirati, učiniti ljepšim i funkcionalnijim koristeći fantasy, css svojstva i dodatne grafičke elemente. dobro i naš horizontalni meni izgleda otprilike ovako:

Prednosti ovog rješenja:
Lakoća implementacije
Jednostavan kod
Nema tabela i javascripta
Kompatibilnost među pretraživačima: meni izgleda isto u svim pretraživačima
Koristi se samo jedan crtež
Minimalni kod na stranici menu.html
Minimalni kod za implementaciju stilova u main.css

Fajlovi korišteni u ovom primjeru mogu se preuzeti iz arhive

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

Horizontalni meni

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

, koji se pojavio u HTML5, odlučio sam da vas odmah naviknem na nove tagove kako biste pratili trend i standard, da tako kažem.Unatoč činjenici da novi HTML 5 tagovi ne podržavaju stariji pretraživači, i dalje toplo preporučujem da ih koristite u vašem rasporedu, budući da ćete ili kasnije i dalje morati da se prebacite na njih, pošto su dizajneri izgleda jednom prešli sa tabelarnog na blok raspored, to je realnost, bolje je pratiti trend!

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

(i druge oznake specifične za HTML5) će dobro raditi u starijim pretraživačima.

Vratimo se na naše oznake. Sljedeće nam je potrebno u našoj oznaci

ubacite listu sa nabrajanjem, za mene to izgleda ovako:

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

float: lijevo

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 (

) obrub s lijeve strane veličine 1px i boje #666;. Što se tiče .menu li:first-child selektora, ovdje koristimo posebnu pseudo-klasu koja vam omogućava da odaberete prvo dijete na listi. Također preporučujem da detaljnije pročitate o pseudo-klasama na internetu, naučit ćete puno korisnih stvari.

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