Prekrasan horizontalni css izbornik. Vertikalni živopisan jQuery izbornik

16.05.2019 savjetovati

Većina klasičnih web-mjesta na webu koristi horizontalni izbornik kao glavni navigacijski element. Ponekad može sadržavati razne dodatne značajke - konstrukcije na više razina, ikone za podstavke, blok za pretraživanje, složene liste itd. Nedavno je na blogu već bio mali izbor, a danas ćemo pogledati 4 praktična primjera kako napraviti padajući izbornik u CSS + HTML. Informacije su korisne za programere početnike i one koji žele promijeniti navigaciju na svojoj stranici.

Prvi vodič CSS3 padajućeg izbornika najnoviji je u kolekciji (datirani u travnju 2016.). Prednosti rješenja: u ovom horizontalnom padajućem izborniku za stranicu nalaze se ikone u podstavkama, 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 sa sidrenim vezama (#) za njegove elemente. Tamo, u jednu od stavki, dodajemo još jedan ugniježđeni popis koji će biti odgovoran za podizbornik.

Korak 2 - prikaz izbornika

Uklanjanje dodatnog dopuna u CSS-u za elemente horizontalnog padajućeg izbornika web-mjesta. U istoj fazi postavit ćemo fiksnu širinu i visinu stavki izbornika, a također ćemo dodati zaobljene kutove.

.menu, .menu ul, .menu li, .menu a ( margin : 0 ; padding : 0 ; obrub : nijedan ; obris : nijedan ; ) .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% 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 ;)

Izbornik, .menu ul, .menu li, .menu a ( margina: 0; padding: 0; obrub: nijedan; obris: nijedan; ) .menu (visina: 40px; širina: 505px; pozadina: #4c4e5a; pozadina: - webkit-linear-gradient(vrh, #4c4e5a 0%,#2c2d33 100%); pozadina: -moz-linear-gradient(vrh, #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: nema; float: lijevo; prikaz: blok; visina: 40px; )

Korak 3 - dizajn veze

Uz osnovne značajke u stilovima (font, boja, visina), koristimo i stvaramo glatki prijelaz boje teksta pri lebdenju. Također dodajemo separatore u izbornik, uklanjajući obrub s prve stavke s lijeve strane i zadnje stavke s desne strane.

.menu li a (prikaz: blok; padding: 0 14px; margina: 6px 0; visina linije: 28px; text-decoration: nema; obrub lijevo: 1px čvrst #393942; obrub desno: 1px čvrst #4f5058; font -familija: 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 prijelaz: boja .2s jednostavnog ulaska; -moz-prijelaz: boja .2s jednostavnog ulaska; -o-prijelaz: boja .2s jednostavnog ulaska; -ms-prijelaz: boja .2s jednostavnog ulaska -izlaz; prijelaz : boja .2s jednostavnog ulaska; ) .izbornik li: prvo dijete a ( obrub-lijevo : nema ; ) .izbornik li: zadnje dijete a( granica-desno : nema ; ) .izbornik li : lebdjeti > a ( boja : #8fde62 ;)

Izbornik li a ( prikaz: blok; padding: 0 14px; margina: 6px 0; visina linije: 28px; dekoracija teksta: nema; obrub lijevo: 1px čvrst #393942; rub desno: 1px čvrst #4f5058; font- obitelj: 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- van; prijelaz: boja .2s jednostavnog ulaska; ) .izbornik li:prvo dijete a (obrub-lijevo: nema; ) .izbornik li:posljednje-dijete a(obrub-desno: nema; ) .izbornik li: lebdjeti > a ( boja: #8fde62; )

Korak 4 - podizbornik

Budući da imamo padajući izbornik CSS stranice, trebali bismo postaviti i dizajn ugniježđenog popisa. Prvo postavite padding na 40px na vrhu i 0px na lijevoj + dodajte zaobljene kutove. Da bismo prikazali/sakrili podizbornik, inicijalno smo postavili svojstvo neprozirnosti na nulu, a pri lebdenju na jedan. Da biste stvorili efekt izgleda podizbornika, postavite visinu popisa na nulu i zadržite pokazivač miša = 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-prijelaz: neprozirnost .25s lakoća .1s ; -ms-transition .25s jednostavnost .1s ; prijelaz : neprozirnost .25s jednostavnost .1s ; ) .menu li: hover > ul ( neprozirnost : 1 ; ) .izbornik ul li (visina : 0 ; preljev : skriven ; padding : 0 ; -webkit-transition : visina .25s lakoća .1s ; -moz-prijelaz: visina .25s jednostavnost .1s ; -o-prijelaz: visina .25s lakoća .1s ; -ms-prijelaz: visina .25s jednostavnost .1s ; prijelaz: visina .25s lakoća .1s ; ) .menu li: lebdeći > ul li (visina: 36px; prelijevanje: vidljivo; dopuna: 0 ;)

Izbornik 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-prijelaz: neprozirnost .25s lakoća .1s; -ms-prijelaz: neprozirnost .1s. 25s ease .1s; prijelaz: neprozirnost .25s ease .1s; ) .menu li:hover > ul (prozirnost: 1; ) .menu ul li (visina: 0; preljev: skriven; 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; prelijevanje: vidljivo; padding: 0; )

Postavljamo širinu linkova = 100px, pri dnu svih elemenata osim posljednjeg dodaje se obrub dna-obrub. Također, ako želite, možete postaviti slike za stavke podizbornika (pažnja! ne zaboravite promijeniti put 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 ; ) .izbornik a.dokumenti (pozadina: url (../img/docs.png) bez ponavljanja 6px centar; ) .izbornik a.poruke (pozadina: url (../img/bubble.png) bez ponavljanja 6px centar ; ) .izbornik a.signout (pozadina: url (../img/arrow.png) bez ponavljanja 6px centar ;)

Izbornik ul li a ( širina: 100px; padding: 4px 0 4px 40px; margina: 0; obrub: nema; obrub-dno: 1px solid #353539; ) .menu ul li:last-child a ( granica: nema; ) . izbornik a.dokumenti (pozadina: url(../img/docs.png) središte bez ponavljanja 6px; ) .izbornik a.poruke (pozadina: url(../img/bubble.png) središte bez ponavljanja 6px; ) .izbornik a.odjava (pozadina: url(../img/arrow.png) središte bez ponavljanja 6px; )

Meni se osobno sviđa jednostavnost implementacije i korištenja ikona. Evo konačnog koda s codepen-om:

Verzija Josha Risera vizualno je slična prethodnom padajućem izborniku u HTML-u i CSS-u. 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 izrade horizontalnog padajućeg izbornika, pa ću odmah dati konačni kod:

U ovom primjeru ćemo pogledati kako napraviti padajući izbornik u CSS-u, u kojem će se, osim stavki, nalaziti i blok za pretraživanje. Slična implementacija se često može naći u modernim . Što se tiče vremena i složenosti implementacije, rješenje je nešto kompliciranije od prethodnih. Objavljena je u svibnju 2013., pa ćete možda trebati dotjerati neke stvari, iako je u našem testiranju sve dobro funkcioniralo.

HTML kod

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

postavke - link slike;
traži - blok s pretraživanjem i odgovarajućim gumbom;
opcije - sadrži podizbornik (realiziran kroz popis s subnav klasom).

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

Primjena
Odbor
Mogućnosti
- Postavke
- Primjena
- Odbor
- Mogućnosti

Primjena
Odbor
Mogućnosti
- Postavke
- Primjena
- Odbor
- Mogućnosti

CSS za izbornik

1. Osnovni stilovi i stavke izbornika

Prvo određujemo Montserrat font, tamno sivu pozadinu i fiksnu visinu za stavke izbornika. Svi elementi su float: lijevo poravnati i pozicionirani relativno tako da kasnije možete dodati podizbornik s položaj: 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 poveznica

Stavke izbornika koriste osnovni stil + . Visina je ista kao u nav klasi. #settings veze na sliku na početku izbornika postavljeno je na poravnanje.

.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: lebdjeti (boja pozadine: #2e2e2e ;) #settings a ( padding : 18px height ; ; veličina fonta: 10px; visina linije: 24px;)

Nav li a (veličina fonta: 16px; boja: bijela; zaslon: blok; visina linije: 60px; padding: 0 26px; ukras teksta: nema; obrub lijevo: 1px čvrst #2e2e2e; obitelj fontova: Montserrat, sans-serif;text-shadow: 0 0 1px rgba(255, 255, 255, 0.5); ) .nav li a:hover ( boja pozadine: #2e2e2e; ) #settings a ( padding: 18px; 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 (širina: 357px; margina: 4px;) #search_text (širina: 297px; padding: 15px 0 15px 20px; font-size: 16px; font-family: Montserrat, sans-serif no ; px : ne granica : visina 0 ; margin-desno : 0 ; boja : bijela ; obris : nema ; pozadina : #1f7f5c ; float : lijevo ; veličina okvira : obrubni okvir ; 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: fokus (pozadina: rgb (64, 151, 119) ;) #search_button (obrub: 0 nema; pozadina: #1f7f5c url (search.png) središte 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; obrub: 0 nema; visina: 52px ; margin-desno: 0; boja: bijela; obris: nema; pozadina: #1f7f5c; float: lijevo; veličina okvira: obrub-kutija; 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 (pozadina: rgb(64, 151, 119); ) #search_button (obrub: 0 bez; pozadina: #1f7f5c url (search.png) centar bez ponavljanja; širina: 60px; plutajući: lijevo; padding: 0; poravnanje teksta: središte; visina: 52px; kursor: pokazivač; )

4. Padajući podizbornik

Posljednji dodir će nam omogućiti kako napraviti CSS padajući izbornik koji se aktivira za posljednju stavku #options.

#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 : automatski ; neprozirnost : 0 ; prijelaz : sve 0,1 s ; pozadina : #232323 ; ) .subnav li : nema ; ) .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% center; background-repeat: no-repeat; padding-right: 42px; ) .subnav ( vidljivost: skrivena; pozicija: apsolutna; vrh: 110%; desno: 0; širina: 200px; visina: automatski; neprozirnost: 0; prijelaz: sve 0,1 s; pozadina: #232323; ) .subnav li ( float : nema; ) .subnav li a (bord-bottom: 1px solid #2e2e2e; ) #options:hover .subnav ( vidljivost: vidljiva; vrh: 100%; neprozirnost: 1; )

U stilovima ćete pronaći umetanje pozadinske slike trokuta (triangle.png) za označavanje podizbornika - ne zaboravite navesti ispravan 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 je plus ili minus novo - za ožujak 2015. Ako vam nedostaje jedna podrazina u horizontalnom padajućem izborniku za stranicu, onda ovaj primjer sadrži tri odjednom. Pseudo-klasa :only-child dodaje simbol "+" stavkama za označavanje prisutnosti podizbornika.

Općenito, dobar i jednostavan primjer. Proces implementacije nećemo detaljno opisivati, jer sličan je prethodnim - prvo kreirate HTML kostur, a zatim mu postupno dodajete stilove. Preuzmite konačni kod s linka na izvor, djelomično ga možete vidjeti u Codepen:

Ukupno

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

Na kraju, dva komentara na gore navedene kodove. Neki od primjera padajućeg izbornika CSS-a koriste slike, tako da ćete morati pažljivo pogledati putove slika i postaviti ispravne vrijednosti za svoju web-lokaciju. Drugo, neka rješenja su stara 2-3 godine, pa je potrebno dodatno provjeriti njihovu izvedbu u različitim preglednicima.

Ako znate još neke zanimljive moderne implementacije horizontalnih padajućih izbornika za stranicu, pošaljite linkove u komentarima.

Specifikacija

Opis

Označiti

je dizajniran za prikaz popisa stavki izbornika. Slično oznakama

popis se formira pomoću oznaka

U HTML4 oznaci

izvan upotrebe, preporuča se umjesto toga koristiti oznaku

ponovno omogućen, ali u drugom svojstvu. Sada djeluje kao spremnik za oznaku i kreiranje izbornika.

Sintaksa

HTML	stavku izbornika stavku izbornika
HTML5	...

Atributi

Postavlja vidljivu oznaku za izbornik. Određuje vrstu izbornika.

Završna oznaka

Potreban.

Validacija

Korištenje ove oznake zabranjuje HTML4 specifikacija, valjani se kod dobiva samo kada se koristi prijelazni. U HTML5, korištenje oznake

ispravno.

HTML 4.01 IE Cr Op Sa Fx

Oznaka MENU

U ovom izdanju:

ruska kuhinja. Uho burlatskaya

ukrajinska hrana. Vareniki

Moldavska kuhinja. Paprikaš

Kavkaska kuhinja. Juha kharcho

Baltička kuhinja. Vertiniai

Rezultat ovog primjera prikazan je na sl. jedan.

Riža. 1. Prikaz popisa stvorenog pomoću oznake

HTML5 IE Cr Op Sa Fx

Oznaka MENU

1. Vertikalni živopisan jQuery izbornik

2. Cool efekt. Plesni meni.

4. Padajući popis pomoću jQueryja

Izvrsno oblikovanje elementa sučelja u obliku padajućeg popisa.

Kada zadržite pokazivač miša iznad gumba, s vrha se pojavljuje ploča.

6. jQuery dodatak "MobilyBlocks" za prikaz kružnog izbornika

7. Izbornik pomoću spriteova

Animirani javascript izbornik s efektom sjaja.

Svjež lijep jQuery meni.

9. Izbornik jQuery GarageDoor

10. Izbornik za okomito pomicanje jQuery

Implementacija jelovnika s velikim brojem stavki. Pomicanje pri pomicanju pokazivača miša gore ili dolje.

11. jQuery padajući stil

12. Dodatak za navigaciju po stranici

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

13. Dodatak za izbornik animiranog sadržaja

Novi jQuery dodatak. Izvrsna implementacija animirane navigacije stranice. Prilikom navigacije kroz stavke izbornika iskače blok s opisom i mogućim poveznicama, dok se ovisno o odabranoj stavci mijenja pozadina stranice koja se proteže na cijeli ekran, bez obzira na veličinu prozora preglednika. Svakako provjerite demo stranicu.

14. Dodatak jQuery Sweet Menu

Animirani izbornik s pokretnim stavkama.

15. Fiksni jQuery izbornik

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

16. Slider Kit Pomicanje izbornika

Za implementaciju okomitog izbornika s 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 izbornik

18. Novi CSS3 izbornik u Apple stilu

Novi meni u stilu Applea. Izgleda tamnije nego prije, ali ništa manje lijepo.

19. Izvorni jQuery izbornik

Padajući izbornik s efektom pozadine. Podstavke izbornika proširuju se prema gore. Kada zadržite pokazivač iznad stavke izbornika, pozadinska slika se mijenja.

20. Animirani jQuery izbornik

Animirani meni. Stavke izbornika predstavljene su kao ikone i opisi. neki sjajni efekti kada zadržite miš iznad stavke izbornika. Dostupno je 8 efekata, da biste ih sve vidjeli, slijedite poveznice Primjer1-Primjer8 na demo stranici.

21. "Izbornik za pomicanje" XML izbornik za pomicanje

Vertikalni i horizontalni pomicani izbornici. Dobro rješenje za veliki broj stavki na jelovniku.

22. Kontekstni izbornik na web stranici jQuery

Izbornik se pojavljuje desnim klikom na određeno područje.

23. Kružni izbornik na dvije razine za stranicu

Kada je odabrana stavka izbornika, stavke podizbornika se prikazuju s desne strane.

24. jQuery CSS3 izbornik s efektom zamućenja "Izbornik zamućenja" CSS3

Izvorni jQuery CSS3 izbornik dolazi u 7 različitih stilova. Kada pomaknete pokazivač miša preko jedne od stavki izbornika, čini se da su ostale zamućene.

25. Neki spektakularni animirani jQuery CSS3 izbornici

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

Arhiva također sadrži originalnu PSD datoteku izbornika.

27. Izbornik Magic Line

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

28 Mjehurići sa slikama

Sjajan učinak kada se mišem pređe preko jedne od slika. Učinak donekle podsjeća na gore opisani jQDock.

31. Zanimljivi jQuery izbornici s raznim efektima

Horizontalni, okomiti izbornik. Zanimljivi efekti.

32. Sjajan jQuery meni u stilu Applea

34. jQuery izbornik sa zanimljivim efektom

36. Svježi izbornik sa zanimljivim jQuery efektom

Vrlo zanimljiv efekt. Savršeno za web stranice portfelja.

Zanimljiv efekt skočnih sličica na lebdenju.

40. Padajući popis s automatskim pomicanjem

Dobar efekt prijelaza između stavki.

42. Sjajan jQuery izbornik

43. Lijep veliki jQuery meni

44. jQuery izbornici koji se mogu pomicati

Stavke izbornika prikazane su kao minijature.

46. jQuery radijalni navigacijski izbornik

47. CSS i jQuery izbornici

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

48. Horizontalni jQuery izbornik

49. Vertikalni jQuery izbornik

Izvrstan vertikalni meni. Kada zadržite pokazivač miša, pojavljuje se stavka izbornika.

50. Horizontalni jQuery izbornik

Zanimljiv efekt kada se lebdi iznad stavke izbornika.

52. Padajući izbornik jQuery

Kada pomaknete pokazivač miša preko izbornika, pojavit će se njegove stavke. Stavke koje se pojavljuju prikazuju se kao luk, čiji polumjer možete postaviti prilikom postavljanja dodatka. U nekim preglednicima nećete vidjeti lučni prikaz, izbornik će se prikazati ravno, ali to još uvijek ne narušava cjelokupno iskustvo ove implementacije jQuery izbornika.

53. CSS i jQuery navigacijska traka

Zanimljiv efekt pri prelasku miša preko stavke izbornika.

54. jQuery popup panel

Svježi animirani meni u sivim tonovima.

58. Stupna navigacija web-mjesta uz jQuery

Zanimljivo rješenje za navigaciju, koje je predstavljeno u obliku okomitih pruga. Kada zadržite pokazivač miša iznad ovih traka, pojavit će se slika za stavku i popis podizbornika. Kada kliknete na stavku podizbornika, pojavljuje se stranica s opisom. Ova je implementacija savršena za promotivne stranice ili prezentacije. Svakako pogledajte demo dodatka.

59. jQuery navigacija stranice

Navigacija web stranicama predstavljena je u obliku 4 slike, kada pređete mišem preko kojih ćete primijetiti zanimljiv animirani efekt.

60. Navigacijska traka se pomiče sa sadržajem

Navigacijska traka. Klikom na strelicu pomičete stranicu. Navigacija se pomiče zajedno sa sadržajem stranice.

61. jQuery ploča s raznim društvenim uslugama

62. Uredan animirani jQuery izbornik

63. Izbornik kista za akvarel jQuery

Napravimo jednostavan horizontalni navigacijski izbornik za web stranicu. Da bismo to učinili, koristit ćemo jednostavne trikove, koji će rezultirati ispravnim prikazom našeg izbornika u svim preglednicima.

Dakle, počnimo. Napravimo popis s nazivima našeg jelovnika. Kao nazivi stavki, neka budu: "Početna", "Novosti", "Proizvodi", "Usluge", "Partneri", "Kontakti". Izrađujemo novu datoteku pod nazivom menu.html , na primjer, koristeći Dreamweawer ili običnu bilježnicu. U njega, između oznaka tijela, postavljamo naš jelovnik. To je samo ul popis s grafičkim oznakama s li elementima. Naravno, svaku stavku izbornika činimo vezom, gdje umjesto URL-a ubacujemo hash oznaku #. Koristeći Photoshop, izradite sliku veličine 3x30 px s gradijentnom ispunom kao što je prikazano na donjoj slici. Datoteka će biti spremljena u GIF formatu. Nazovimo to bg.gif . Ova slika će služiti kao pozadinska slika našeg izbornika.

Evo sadržaja datoteke menu.html:

Jednostavan horizontalni izbornik za više preglednika

Dom
vijesti
Proizvodi
Usluge
Partneri
Kontakti

Sada ćemo zasebno stvoriti tablicu stilova pod nazivom main.css . Njegov popis je u cijelosti dat u nastavku.

Ul ( margin:0; /*postavi padding na nulu*/ padding:0; /*postavi padding na nulu*/ float:left; /*lijevo poravnanje popisa*/ width:auto;/*postavi automatski širinu na temelju vrsta i sadržaj popisa */ background-image: url(bg.gif); /*postavi pozadinsku sliku*/ background-repeat:repeat-x; /*ponovite našu sliku vodoravno*/ list-style:none; /*uklonite popis 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; /*lijevo poravnanje stavki liste*/ ) ul a ( display:block; /*predstavlja veze izbornika 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 veze*/ boja:#fff; /*boja teksta veze - bijela*/ border-right:#fff solid 1px; /*bor dur desna strana bloka (bijela linija na 1px)*/ ) ul a:hover ( boja:#ccc; /*veza mijenja boju pri lebdenju*/ )

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

Rezimirati. Rezultat je vodoravni izbornik koji se potpuno razlikuje od preglednika koji izgleda isto ne samo u svim modernim preglednicima, već iu takvim rijetkostima kao što su IE 5.5 i IE 6.0. Sve stavke izbornika prikazane su kao elementi na razini bloka i imaju iste dimenzije pri 100 px širine i 30 px visine. Kao separator za stavke izbornika, koristi se dizajn blok elementa s bijelim desnim rubom debljine 1px. Ovo je praktički najlakši način implementacije horizontalnog izbornika. Naravno, po želji se može modificirati, učiniti ljepšim i funkcionalnijim koristeći fantasy, css svojstva i dodatne grafičke elemente. dobro i naš horizontalni izbornik izgleda otprilike ovako:

Prednosti ovog rješenja:
Jednostavnost izvođenja
Jednostavan kod
Nema tablica i javascripta
Kompatibilnost s različitim preglednicima: izbornik izgleda isto u svim preglednicima
Koristi se samo jedan crtež
Minimalni kôd na stranici menu.html
Minimalni kod za implementaciju stilova u main.css

Datoteke korištene u ovom primjeru mogu se preuzeti iz arhive

Pozdrav dragi čitatelji mog bloga! Današnji će članak biti vrlo koristan za početnike. Od danas ćemo dizajnirati jednostavan horizontalni izbornik. Prije nego što prijeđemo izravno na izgled, želim reći nekoliko riječi o tome zašto sam odlučio odabrati ovu temu za članak.

Zapravo, 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 izgleda, s čime sam se morao suočiti u početnoj fazi postajanja sebe kao izgleda dizajner, što mi je bilo najnerazumljivije pri proučavanju ovog područja itd. Sva ova pitanja sam si postavio kako bih bolje razumio što bi moglo biti zanimljivo osobi koja započinje svoj put kao layout dizajner. A osobno, čim sam počeo učiti layout, najviše sam imao pitanja o izgledu raznih jelovnika, pogotovo kada su u pitanju višerazinski jelovnici. I tako ćemo danas govoriti o izborniku, a točnije o horizontalnom izborniku. Pa počnimo!

Počnimo s rasporedom našeg horizontalnog izbornika!

Kao što vjerojatno pogađate, prva stvar koju trebamo učiniti je stvoriti html stranicu sa standardnim oznakama i uključiti datoteku stila u nju. Neću se detaljnije zadržavati na ovom koraku, jer se ipak nadam da niste toliko početnici da vam detaljno govorim što su tijelo i glava i kako su stilovi povezani. Samo da kažem da ću osim stilova za naš izbornik, napisati najjednostavniji reset u css datoteku kako bih resetirao stilove i postigao isti prikaz uvlaka u svim preglednicima. Ovako izgleda moj najjednostavniji reset:

Neću još ništa reći o stilovima nuliranja, budući da 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 preglednicima.

Dakle, što imamo u ovoj fazi? Imamo html stranicu sa standardnim oznakama:

Horizontalni izbornik

I imamo datoteku stila spojenu na ovu stranicu (imam style.css), sa sljedećim sadržajem:

Sljedeći korak je stvaranje html oznake za naš izbornik.

Izrada oznake za izbornik

U našem označavanju koristit ćemo novu oznaku

, koji se pojavio u HTML5, odlučio sam vas odmah naviknuti na nove oznake kako biste pratili trend i standard, da tako kažem. Unatoč činjenici da stariji preglednici ne podržavaju nove HTML 5 oznake, i dalje toplo preporučujem da ih koristite u svom izgledu, budući da ili kasnije, i dalje ćete se morati prebaciti na njih, jer su se svojedobno dizajneri izgleda prebacili s tabličnog na blok raspored, to je realnost, bolje je pratiti trend!

A budući da smo već počeli razgovarati o podršci za nove html 5 oznake, kako s tim ne bismo imali problema u starijim preglednicima, moramo u naš dokument uključiti 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) dobro će raditi u starijim preglednicima.

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

ubacite popis s oznakama, za mene to izgleda ovako:

Dakle, čini se da smo završili s označavanjem, vrijeme je da prijeđemo izravno na stilove pisanja, jer sada naš izbornik izgleda, blago rečeno, ne baš dobro:

Oblikovanje našeg horizontalnog jelovnika

I tako, prije svega, prilikom postavljanja izbornika, moramo ukloniti oznake popisa, očito nam ne trebaju, to se radi ovako:

Ul( stil-list:none; )

Nakon toga naš jelovnik će izgledati ovako:

Ne sviđa mi se što se naš izbornik lijepi za rubove preglednika, popravimo to:

Ovim kodom smo postavili širinu našeg izbornika, dali mu gornje i donje uvlake od 50px i centrirali ga. Tko ne zna ima li blok element širinu, onda kako bismo ovaj element pozicionirali striktno u centar, samo trebamo postaviti njegovu vanjsku uvlaku (marginu) desno i lijevo s vrijednošću auto.

Sljedeći korak, moramo konačno naš izbornik postaviti horizontalno, to se radi postavljanjem elemenata

plutati: lijevo

Izbornik li( float:lijevo; )

Sve je sada naš jelovnik postalo horizontalno.

Ako ne razumijete što se točno dogodilo i što radi svojstvo float, preporučam da proguglate informacije o ovom svojstvu i dobro ga proučite, jer
niti jedna stranica izgleda ne može bez toga, mogu vam reći sa sigurnošću. Pa dobro, idemo dalje!

Izbornik li a( display:block;/* Učinite vezu blok elementom*/ padding:12px 20px;/* Postavite padding */ text-decoration: none; /* uklonite podcrtani dio */ color:#fff;/* učinite veze bijele boje */ 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 inline elementi, a uvlake se različito primjenjuju na inline elemente u različitim preglednicima, pa je preporučljivo napraviti vezu kao blok element i tek onda na nju primijeniti svojstva povezana s vanjskim ili unutarnjim uvlakama. Sada vas ne želim opterećivati nepotrebnim informacijama tijekom vremena, koristeći stvarne primjere, i sami ćete shvatiti zašto je takav naglasak ovdje stavljen.

Pogledajmo što smo dobili, osvježite stranicu preglednika i tada!:

Kao što vidite, ne izgleda loše, možemo reći da je u principu naš jelovnik spreman. Jedino što treba napraviti je podesiti svjetlo linkova na hover, eto, čini mi se da će meni izgledati bolje s razdjelnicima između stavki.

Počnimo s razdjelnicima:

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

Što smo učinili ovdje? 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ćuje odabir prvog djeteta s popisa. Također preporučujem da detaljnije pročitate o pseudo-klasama na internetu, naučit ćete puno korisnih stvari.

Opet, da vidimo što imamo:

Po mom mišljenju, sa separatorima je puno bolje.

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

Opet koristeći posebnu pseudo-klasu, ovaj put lebdeći, postavljamo boju veze kada se lebdi iznad nje, pogledajte:

Po meni, cool 🙂, 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 izbornik koristeći čisti html i css. Naravno, postavili smo jelovnik na jednoj razini, bit će malo teže s izbornikom na dvije razine (s ugniježđenim popisom), ali ovo je tema za drugu lekciju, to je sve za mene. Dođite opet, bit će mi drago!!!