Prilično uobičajen izgled menija stranice, kada kontejner s njim zauzima cijelu širinu dostupnu na stranici. U ovom slučaju, prva stavka je uz lijevu ivicu, a posljednja uz desnu, a razmak između svih elemenata je jednak. Danas ćemo vam reći kako se to radi.
Nudimo vam primjer implementacije gumenog menija koristeći CSS za vaš resurs. U ovom meniju stavke će se nalaziti u jednom redu. Javascript se neće koristiti. Sadržaj menija će biti uvršten u redovnu listu. Glavna karakteristika ovakvog menija je njegova svestranost, koja se izražava u činjenici da i broj i dužina stavki mogu biti bilo koji.
Kako ovo implementirati?Svaki programer može ponuditi svoj način rješavanja datog problema. Sve zavisi od njegove mašte, nivoa profesionalnosti i sposobnosti. Najčešće rješenje ovog problema je korištenje tablice. Također, mnogi bi predložili korištenje javascripta. Žurim da razočaram one koji bi predložili korištenje svojstva prikaza s tablicom vrijednosti ili tablicom-ćelijom. Ova metoda nije dovoljno kompatibilna sa više pretraživača.
Naše rešenjeNaša ponuda će biti izgrađena na čvrstim osnovama znanja HTML5 i CSS3.
Suština procesa je zasnovana na svojstvu text-align sa vrednošću justify. Za one koji su zaboravili, podsjećam: ovo svojstvo orijentira poravnanje teksta po cijeloj širini kontejnera.
Prilikom korištenja našeg rješenja moraju se poštovati dva obavezna pravila. Prvi je da širina kontejnera stavke menija treba da bude manja od teksta. Odnosno, ne u jednom redu. Drugo važno pravilo je da se riječi jednako protežu, bez obzira da li pripadaju istoj tački ili ne.
Ispod je kod koji služi kao primjer kreiranja gumenog menija:
HTML
< ul> < li>< a href= "#" >Dom< li>< a href= "#" >Blog< li>< a href= "#" >Vijesti< li>< a href= "#" >Popularno< li>< a href= "#" >Nove stavke
ul ( text-align: justify; overflow: hidden; /* eliminiše nuspojave metode */ visina: 20px; /* takođe eliminiše nepotrebno */ cursor: default ; /* postavlja početni oblik kursora */ margina : 50px 100px 0 100px; boja: #444 ) a : lebdeći (boja: #ff0000; ) ul: nakon ( /* formiranje drugog reda za razradu metode */ sadržaj: "1" ; margina lijevo: 100 %; visina: 1px; overflow: hidden: inline block )
Da biste radili u dobrom starom Internet Exploreru, morate dodatno dodati sljedeći kod u CSS
ul ( z- indeks: izraz (runtimeStyle. zIndex = 1 , insertAdjacentHTML("beforeEnd&apos, "< li class = "last" >")); ) ul .last ( margin-left: 100%; ) * html ul ( /* treba samo ie6 */ visina: 30px; )
Nakon što smo naveli potrebne vrijednosti svojstava i kod, dobijamo ovaj gumeni meni:
| 6.0+ | 6.0+ | 10.5+ | 5.0+ | 3.6+ | - | - |
Horizontalni meni je lista sekcija web stranice, pa je logičnije postaviti ga unutar elementa
- , a zatim primijeniti CSS stilove na njegove elemente. Ovaj izgled menija je najčešći zbog očiglednih prednosti u njegovom pozicioniranju na web stranici. Kako napraviti horizontalni meni: primjeri izgleda i dizajna
HTML oznake i osnovni stilovi za horizontalni meni
- Stavka menija
- Stavka menija
- Stavka menija ...
- blok omot za meni
- sam meni, prikazan kroz listu sa nabrajanjem (ul tag)
- Pa, unutra su stavke menija, a u njima, shodno tome, već postoje veze
- vertical-align: bottom - ovo svojstvo je neophodno kako bi, ako tekst u stavci menija zauzima 2 reda, bio ravnomerno prikazan. Kada napravimo meni, možete ukloniti ovo svojstvo, zumirati tako da stavke budu komprimirane i tekst premješten na dva reda i vidjet ćete problem sa prikazom. Vratite imovinu i sve će biti u redu.
- display: table-cell - budući da smo meni prikaza postavili da bude red tabele, bilo bi logično postaviti da se njegove stavke prikazuju kao ćelije u tabeli. Ovo je obavezno.
- širina: auto — širina će se automatski izračunati u zavisnosti od dužine teksta u pasusu
- text-align: center - ovo je samo za centriranje teksta unutra
- visina: 50px — postavite visinu na 50 piksela
- pa, granica desno je samo granica na desnoj strani, separator za stavke
- svojstvo text-decoration nadjačava podrazumevano podvlačenje za veze
- širina: 1000px je možda najvažnija linija. Morate postaviti veze na otprilike ovu širinu, možda manje, ali definitivno veće od najšire moguće stavke menija. Veze neće biti široke 1000 piksela, jer će širina biti ograničena stavkom menija li, čija je širina postavljena na auto, ali će to omogućiti da se za bilo koji broj stavki u meniju uvijek bude 100 posto širine.
- vertical-align: middle i display: table-cell - prvi će poravnati tekst okomito do centra, a drugi će također prikazati veze kao ćelije. Potrebne su obje nekretnine.
- font - pa, ovo je samo skup postavki za font. Pročitajte o css svojstvima za fontove u ovom članku.
- Dom
- O nama
- Naše usluge
- Naša usluga br. 1
- Naš servis br. 2
- Naš servis br. 3
- Naš servis br. 4
- Usluga 5
- Vijesti
- Kontakti
- meni će se crtati dinamički;
- uvlake od separatora do pasusa su svuda iste;
- ljepši i fleksibilniji dizajn.
- sa vip podlogom kada pokazujete u stranu
- sa iskačućim padajućim menijem trećeg nivoa
- Dom
- O nama
- Naše usluge
- Naša usluga br. 1
- Dodatak servisu 1
- Dodatak servisu 2
- Naš servis br. 2
- Dodatak servisu 3
- Dodatak servisu 4
- Naš servis br. 3
- Naš servis br. 4
- Usluga 5
- Naša usluga br. 1
- Vijesti
- Kontakti
- Mapa smjerova
- Dodatak za karte
- Dodatak za kartu 2
- Obrazac za povratne informacije
- Mapa smjerova
Po defaultu, svi elementi liste su raspoređeni okomito, zauzimajući cijelu širinu elementa kontejnera, koji zauzvrat zauzima cijelu širinu svog bloka kontejnera.
HTML oznake za horizontalnu navigaciju
Horizontalni meni koji se nalazi unutar oznake može se dodatno postaviti unutar ... i/ili ... elementa. Zahvaljujući tome, html markupu se daje semantičko značenje, a također pruža dodatnu priliku za formatiranje bloka menija.
Postoji nekoliko načina da ih postavite vodoravno. Prvo morate resetirati zadane stilove pretraživača za elemente navigacije:
Ul ( stil liste: nema; /*ukloni oznake liste*/ margina: 0; /*ukloni gornju i donju marginu jednaku 1em*/ padding-left: 0; /*ukloni lijevi padding jednak 40px*/ ) a ( dekoracija teksta: nema; /*ukloni podvlačenje teksta linka*/)
Metoda 1. li (prikaz: inline;)Pravljenje elemenata liste malim slovima. Kao rezultat toga, oni su pozicionirani horizontalno, sa razmakom od 0,4 em dodat na desnoj strani između njih (izračunato u odnosu na veličinu fonta). Da biste je uklonili, dodajte negativnu desnu marginu za li li (margin-right: -4px;) . Zatim stiliziramo linkove kako želimo.
Metoda 2. li (float: lijevo;)Pokretanje elemenata liste. Kao rezultat toga, oni su postavljeni vodoravno. Visina bloka kontejnera ul postaje nula. Da bismo riješili ovaj problem, dodamo (prelijevanje: skriveno;) u ul, proširujući ga i na taj način dozvoljavajući mu da sadrži plutajuće elemente. Za veze dodajte (prikaz: blok;) i stilizirajte ih kako želite.
Metoda 3. li (prikaz: inline-block;)Izrada elemenata liste inline-block. Nalaze se vodoravno, na desnoj strani se formira jaz, kao u prvom slučaju. Za veze dodajte (prikaz: blok;) i stilizirajte ih kako želite.
Metoda 4. ul (prikaz: flex;)Pretvaranje ul liste u fleksibilan kontejner pomoću . Kao rezultat toga, elementi liste su raspoređeni horizontalno. Dodamo (prikaz: blok;) za veze i stiliziramo ih po želji.
1. Prilagodljivi meni sa efektom podvlačenja kada pređete preko linka @import url("https://fonts.googleapis.com/css?family=Ubuntu+Condensed"); .menu-main (list-style: none; margin: 40px 0 5px; padding: 25px 0 5px; text-align: center; background: white; ) .menu-main li (display: inline-block;).menu- main li:after (sadržaj: "|"; boja: #606060; display: inline-block; vertical-align:top; ) .menu-main li:last-child:after (sadržaj: nema;) .menu-main a ( dekoracija teksta: nema; porodica fontova: "Ubuntu Condensed", sans-serif; razmak između slova: 2px; pozicija: relativna; padding-bottom: 20px; margina: 0 34px 0 30px; veličina fonta: 17px; text-transform: prikaz velikih slova: boja .2s ) .menu-main a:visited (boja: #9d999d;); ) .menu-main a:prije, .menu-main a:after (sadržaj: ""; pozicija: apsolutna; visina: 4px; gore: automatski; desno: 50%; dolje: -5px; lijevo: 50%; pozadina : #feb386 .menu-main a:hover:before, .menu-main .current:before (lijevo: 0; 0;) @media (max-width: 550px) ( .menu-main (padding-top: 0;).menu-main li (display: block; ) .menu-main li:after (content: none;) . menu-main a ( padding: 25px 0 20px; @import url("https://fonts.googleapis.com/css?family=PT+Sans"); .top-menu ( pozicija: relativna; pozadina: #fff; box-shadow: inset 0 0 10px #ccc; ) .top-menu:pre, .top-menu:after (sadržaj: ""; prikaz: blok; visina : 1px solidno #575350: 1px solidno #575350 .top-menu:after (border-bottom: 1px solid #575350; 575350 box-shadow: 0 2px 7px #ccc margin-top: 2px .menu-main (list-style: none; padding: 0 30px; margin: 0; font-size: text-align: center; pozicija: relativna ) .menu-main:prije, .menu-main:nakon (sadržaj: "\25C8"; visina reda: 1; pozicija: apsolutna; vrh: 50%; transformacija: translateY(-50%); (dekoracija teksta: nema; prikaz: inline-block; margina: 2px 5px; padding: 6px 15px; porodica fontova: "PT Sans", sans-serif; veličina fonta: 16px; boja: #777777; obrub-dno : 1px puna prozirna tranzicija: .3s linearna; ) .menu-main .current, .menu-main a:hover ( radijus granice: 3px; pozadina: #f3ece1; boja: #313131; sjena teksta: 0 1px 0 #fff; boja granice: #c6c6c6; ) @media (max-width: 500px) ( .menu-main li (display: block;) ) 3. Reakcioni zaobljeni meni @import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .menu-main (list-style: none; padding: 0 30px; margin: 0; font-size: 18px; text-align: center; position: relative; background: white; ) .menu-main:after ( content: "" položaj: 20px pozadina: bela 70%, rgba(255,255,0) 0 -10px; background-repeat: repeat-x ) .menu-main li (display: inline-block;) .menu-main a ( text-decoration: none; display: inline-block; padding: 10px 30px; font-family: " PT Sans Caption", sans-serif; prijelaz: .3s linearni; -main a:prije, .menu-main a:after (sadržaj: ""; pozicija: apsolutna; vrh: calc(50% - 3px); širina: 6px visina: 50% pozadina: .5s ease-in-out (levo: 5px;); :after (desno: 5px;) .menu-main a:current:prije, .menu-main a.current:after, .menu-main a:hover:before, .menu-main a:hover:after (prozirnost:. 1;) .menu-main a.current, .menu-main a:hover (boja: #F58262;) @media(max-width:680px) ( .menu-main li (display: block;) ) 4. Adaptive meni na traci @import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .top-meni ( margina: 0 60px; pozicija: relativna; pozadina: #5A394E; senka okvira: umetnuti 1px 0 0 rgba(255,255,255,.1), umetnuti -1px 0 0 rgba(255,255,255,.1), umetnuti 15 0 150px -150px rgba(255,255,255,.12), umetnuti -150px 0 150px -150px rgba(255,255,255,.12) .top-menu:prije, .top-menu:after: (sadržaj: ";"; -indeks: 2; širina: 3px ) .top-menu:after (dole: 0; border-top: 1px isprekidana rgba(255,255,255,.2); ) .menu-main (list-style:); nema polja: 0; menu-main:after; 8px solidno #5A394E: rotate(360deg: -1) .menu-main: -30px; : 12px solid rgba(255, 255, 255, 0) .menu- main:after (desno: -30px; border-right: 12px solid rgba(255, 255, 255, 0); ) .menu-main li ( display: inline-block; margin-right: -4px; ) .menu-main a ( text-decoration: none; display: inline-block; padding: 15px 30px; font-family: "PT Sans Caption", sans-serif; boja: bijela; prijelaz: .3s linearni; ) .menu-main a.current, .menu-main a:hover (pozadina: rgba(0,0,0,.2);) @media (max-width: 680px) ( .top-menu (margin: 0;) .menu-main li ( display: block; margin-right: 0; ) .menu-main:pre, .menu-main:after (sadržaj: nema;) .menu-main a (prikaz: blok;) ) 5. Responsivan meni sa logom u sredini
@import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu (pozicija: relativna; pozadina: rgba(34,34,34,.2); ) .menu-main (stil liste: nema; margina: 0; padding: 0; ) .menu-main:after ( sadržaj: ""; prikaz: tabela; jasno: oba; ) .left-item (float: lijevo;) .right-item (float: desno;).navbar-logo ( pozicija: apsolutna; lijevo: 50%; vrh : 50%; transformacija: translate(-50%,-50%) .menu-main a (tekst-decoration: none; display: block; line-height: 80px; padding: 0 20px; font-size: 18px ; razmak između slova: "Arimo", boja bez serifa: .3s linearno;) @media (max-width: 830px); main ( padding-top: 90px; text-align: center; ) .navbar-logo ( položaj: apsolutna; lijevo: 50% ; vrh: 10px; transform: translateX(-50%) ) .menu-main li ( float: none: inline-block ) .menu-main a (line-height: normal; padding: 20px 15px; font -size: 16px; ) ) @media (max-width: 630px) ( .menu-main li; displej: blok;) ) 6. Responsivan meni sa logom na lijevoj strani 
@import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu (pozadina: rgba(255,255,255,.5); box-shadow: 3px 0 7px rgba(0,0,0,.3); padding: 20px; ) .top-menu:after (sadržaj: "" ; display: table; clear: both ) .navbar-logo (display: inline-block;) .menu-main (list-style: none; margin: 0; float: right; ) .menu-main; li (prikaz: inline-block;).menu-main a (dekoracija teksta: nema; prikaz: blok; pozicija: relativna; visina linije: 61px; padding-left: 20px; veličina fonta: 18px; razmak između slova : 2px-familija: "Arimo", sans-serif color:.3s linear .menu-main (sadržaj: ""; visina: 9px; lijevo: 50% translateX(6,5px prijelaz: .3s linearno: 1;) @media (max-width: 660px) ( .menu-main (float: none; padding-top); 20px ) .top-menu (text-align: center; padding: 20px 0 0 0; ) .menu-main a (padding: 0 10px;) .menu-main a:before (transform: rotate(45deg) translateX() -6px);) ) @media (max-width: 600px) ( .menu-main li (display: block;) ) Dobar dan
Često je potrebno napraviti horizontalni meni koji će se protezati cijelom širinom roditeljskog bloka, bez obzira na to koliko stavki sadrži.
Danas bih želeo da vam pokažem kako da napravite upravo takav meni.
Dakle, naš meni će biti sledeći:
Isteže se cijelom širinom i ističe se kada se pređe preko njega. Meni je zaobljen sa strane.
HTML MARKUP
|
|
...
|
Da bi meni napravio punu širinu, koristio sam tabele sa 100% širine. Svaka tabela ima div kontejner stavke menija. U zavisnosti od toga da li je prva, poslednja ili srednja stavka menija div, dodeljuje se odgovarajuća klasa.
Svaki div kontejner ima 2 bočne ivice sa apsolutnim pozicioniranjem, koje su neophodne za ispravan prikaz. Ako koristite standardne ivice, onda kada mijenjate stavke menija, tekst će skočiti za 1-2 piksela, što je dobro.
Aktivna klasa je odgovorna za odabranu stavku menija i ističe je.
U svakom artiklu imamo sliku i tekst. Kako bismo osigurali da je sve ovo poravnato striktno u sredini okomito, koristimo tablicu. Zahvaljujući svojstvu vertikalnog poravnanja, naše stavke menija će uvek biti glatko prikazane i neće se pomerati.
CSS PRAVILA
Prvo, postavimo stilove za opći prikaz menija:
Menu_container ( padding-top: 40px; širina: 100%; visina: 47px; razmak između granica: 0px; ) .menu_container td (vertical-align: middle; /* vertikalno poravnanje */ ) .last_point_menu, .first_point_menu (menu_middle_point). širina: 100% visina: 1px čvrsta #dadbda: relativna; 150px; padding-left: 4px; ;vertical-align: middle: none; text-align: left .inner_table_title (padding-right: 10px; line-height: 13px; .inner_table_im); ( širina: 30px! važno; visina: 30px! važno; padding-left: 15px; )
Za ljepotu, zaokružimo uglove sa strane menija:
First_point_menu ( -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px border-right: 1px solid #dadbda (-webkit-border-right-radius: 5px; -webkit-border; donji desni radijus: 5px;
Sada naš meni ima ljepši izgled:
Do sada, prva tačka nema lijevu granicu. Popravićemo to malo kasnije.
Sada dodajmo efekte lebdenja za meni.
Middle_point_menu:lebdjeti, .last_point_menu:lebdjeti, .first_point_menu:lebdjeti, .middle_point_menu.active, .last_point_menu.active, .first_point_menu.active, .middle_point_menu.active ( background-color: #CAE285; background-image: -moz gradijent (vrh, #CAE285, #9FCB56): -webkit-gradient(linear, 0 0, 0 100%, from(#CAE285), to(#9FCB56)); #9FCB56 background-image: -o-linear-gradient(vrh, #9FCB56): linear-gradient (do dna, #9FCB56); -boja: #aec671 #9fbb62 #87ac4a: nema z-indeksa: .first_point_menu:hover, .first_point_menu. ) .last_point_menu ( border: 1px solid #dadbda; border-left: none; ) .last_point_menu:hover ( border: 1px solid #9FCB56; border-left: nijedan;
border-color: #aec671 #9fbb62 #87ac4a; ) .last_point_menu.active ( granica lijevo: nema; )
/* stilovi za bočne ivice */ .borderLeftSecond, .borderRightSecond (prikaz: nema; pozicija: apsolutna; širina: 1px; visina: 47px; boja pozadine: #9fbb62; vrh: 0px; z-indeks: 1000; ) /* apsolutni pomaci za granice */ .borderLeftSecond (lijevo: 0px; , .middle_point_menu:hover > .borderRightSecond, .last_point_menu:hover > .borderLeftSecond .first_point_menu:hover > .borderRightSecond) (prikaz: obradite slučajeve;). prva i posljednja stavka */ .first_point_menu.active .borderLeftSecond ( display: none; ) .last_point_menu.active .borderRightSecond ( display: none; ) .last_point_menu:hover .borderLeftSecond ( display: block; )
To je to!
Dobili smo odličan meni koji se proteže po cijeloj širini roditeljskog bloka! Stavke se ne preklapaju jedna s drugom kada zadržite pokazivač miša i raspored ne skače.
Zdravo. Nisam pisao postove na temu html/css rada jako dugo. Nedavno sam upravo počeo sastavljati novi izgled i u tom procesu naišao sam na zanimljiv trik koji vam omogućava da učinite meni fleksibilnim (možete mu dodati nove stavke i veličina se neće povećati, ali će uvijek biti 100% roditeljski blok). Dakle, danas ćemo implementirati gumeni meni koristeći CSS.
Ako ste previše lijeni da pročitate članak, možete pogledati ovaj video. Autor takođe sve odlično objašnjava:
Prvi korak je uvijek html markup, gdje bismo bili bez njega? Ali u našem slučaju sve će biti jednostavno:
Sve je jasno, evo moje oznake koda:
Sve izgleda standardno, ovako:
Sada ćemo sve staviti u željenu formu, CSS će se baciti na posao.
Korak 2 - Osnovni stiloviZatim ću dodati stilove bloku omotača. Naime, postaviću maksimalnu širinu na 600 piksela (samo da olakšam snimanje ekrana kako bi meni stao), a blok ću i centrirati.
Zamotajte (
pozadina: #fff;
max-width: 600px;
margina: 0 auto;
}
Pređimo sada na sam jelovnik. Uklonit ću markere iz njega (oznaku ul), napraviti linearni gradijent pozadine i, što je najvažnije, iskoristiti svojstvo display: table-row da bi se kontejner za meni ponašao kao red tabele. Ovo je važno učiniti za dalje manipulacije.
R-meni(
pozadina: linearni gradijent (nadesno, #b0d4e3 0%,#88bacf 100%);
displej: tabela-red;
stil liste: nijedan;
}
Kao što vidite, gornji kod je upravo riješio sve o čemu sam pisao. Usput, zgodno je generirati gradijente pomoću alata Ultimate CSS Gradient generator. Pisaću o njemu ponovo jednog dana.
R-meni(
vertikalno poravnanje: dno;
displej: ćelija tabele;
širina: auto;
text-align: centar;
visina: 50px;
border-right: 1px solid #222;
}
Za sada jelovnik izgleda neugledno, ali u redu je, vrijeme je da ga podsjetimo. 
Posljednja stvar koju treba učiniti je stilizirati veze unutar stavki. Evo imam ovaj kod:
R-meni li a(
tekst-dekoracija: nema;
širina: 1000px;
visina: 50px;
vertikalno poravnanje: sredina;
displej: ćelija tabele;
boja: #fff;
font: normalan 14px Verdana;
}
A ovako sada izgleda meni:
Opet, dozvolite mi da objasnim neke redove:
Na primjer, tako da se boja stavke menija mijenja kada se lebdi. Ovo se može vrlo jednostavno implementirati, koristeći pseudo-klasu hover:
R-meni li:hover(
boja pozadine: #6bba70;
}
Odlično, meniji su spremni, ali nismo provjerili ono najvažnije - koliko je gumeno, kao što sam vam obećao. Pa, dodaću još 2 stavke na meni:
Meni ostaje širok 600 piksela. Preostale stvari su jednostavno malo skupljene da bi se mogle smjestiti 2 nove.
Dodaću još jednu dugačku tačku:
Kao što vidite, meni se još malo smanjio i duga stavka se prikazuje sasvim normalno. A da nije bilo svojstva vertical-align: bottom o kojoj sam vam pričao, meni bi izgledao lošije.
Smanjiću jelovnik na tri stavke.
Stavke su postale mnogo slobodnije, ali se sam meni nije promijenio po širini. Tako smo napravili 100% gumeni meni!
U principu, ako postavite blok omotača na maksimalnu širinu, a ne na fiksnu, onda ga ne treba ni prilagođavati. U mom slučaju, imam svojstvo max-width: 600px i kada širina postane manja od 600 piksela, blok će se jednostavno smanjiti zajedno sa ekranom, bez formiranja horizontalnog skrolovanja.
Pa, ako želite nekako promijeniti ili ispraviti meni na mobilnim uređajima ili širokim ekranima, onda će vam medijski upiti pomoći! Sretno u izradi web stranica!
Nastavljamo seriju sa lekcijom o padajućim menijima. Sljedeći je horizontalni padajući meni uradi sam koristeći css.
Ako ste slučajno došli ovdje ili ste tražili drugu implementaciju padajućeg menija, savjetujem vam da odete u odjeljak za roditelje.
Ovaj odjeljak će opisati horizontalni padajući meni u CSS-u i HTML-u.
Navigacija stranice:
dakle, naš zadatak:
napravite horizontalni meni sa padajućom listom css (na ul li listama) bez upotrebe jQueryja i Javascript-a, kao i bez upotrebe tabela
Rice. 2 (horizontalni padajući meni)
Kopiramo datoteke za jQuery kao što su bile iz prethodnog primjera. Odlučio sam da ostavim razdjelnike kako bi jelovnik izgledao barem malo bolje. Naravno da možete i bez njih.