Pravljenje padajućeg menija pomoću css-a. Kako napraviti padajući meni u CSS-u? Horizontalni padajući meni pune širine
Većina klasičnih stranica na webu koristi horizontalni meni kao glavni navigacijski element. Ponekad može sadržavati razne dodatne karakteristike - strukture 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 (datirani u aprilu 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 : 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 ;) |
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. U meni dodajemo i separatore, 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 -family : Helvetica, Arial, sans-serif ; font-weight : bold ; font-size : 13px ; boja : #f3f3f3 ; text-shadow : 1px 1px 1px rgba (0 , 0 , 0 , .6-) ; -webkit prijelaz: boja .2s lakoća ulaska; -moz-prijelaz: boja .2s lakoća ulaska; -o-prijelaz: boja .2s lakoća ulaska; -ms-prijelaz: boja .2s lakoća ulaska -izlaz; prijelaz : boja .2s jednostavnog ulaska; ) .meni li: prvo dijete a ( granica-lijevo : nema ; ) .meni li: posljednje dijete a( granica-desno : nema ; ) .meni li : hover > a ( boja : #8fde62 ; ) |
Meni li a (prikaz: blok; padding: 0 14px; margina: 6px 0; visina linije: 28px; dekoracija teksta: nema; granica lijevo: 1px čvrsta #393942; granica desno: 1px čvrsta #4f5058; font- porodica: Helvetica, Arial, sans-serif; težina fonta: bold; veličina fonta: 13px; boja: #f3f3f3; sjena teksta: 1px 1px 1px rgba(0,0,0,.6); -webkit-transition : lakoća ulaska u boji .2s; -moz-prijelaz: boja .2s lakoća ulaska; -o-prijelaz: lakoća ulaska u boji .2s; -ms-prijelaz: boja .2s lakoća ulaska- izlaz; prijelaz: boja .2s lako ulazak; ) .meni li:prvo dijete a (borvica-lijevo: nema; ) .meni li:posljednje dijete a( granica-desno: nema; ) .meni li: hover > a ( boja: #8fde62; )
Korak 4 - podmeni
Pošto imamo padajući meni CSS sajta, trebalo bi da postavimo i dizajn ugnežđene liste. Prvo postavite padding na 40px na vrhu i 0px na lijevoj + dodajte zaobljene uglove. Da bismo prikazali/sakrili podmeni, inicijalno smo postavili svojstvo neprozirnosti na nulu, a pri lebdenju na jedan. Da biste kreirali efekat izgleda podmenija, postavite visinu liste na nulu i lebdite = 36px.
| .menu ul ( pozicija : apsolutna ; vrh : 40px ; lijevo : 0 ; neprozirnost : 0 ; pozadina : #1f2024 ; -webkit-border-radius: 0 0 5px 5px ; -moz-border-radius: 0 0 5px 5px ; granica -radius: 0 0 5px 5px; -webkit-transition: neprozirnost .25s lakoća .1s; -moz-transition: neprozirnost .25s lakoća .1s; -o-transition: neprozirnost .25s lakoća .1s; -ms-transition: neprozirnost .25s lakoća .1s; .25s ease .1s ; prijelaz : neprozirnost .25s ease .1s ; ) .menu li: hover > ul ( opacity : 1 ; ) .menu ul li (visina : 0 ; overflow : skriveno ; padding : 0 ; -webkit-transition : . : visina .25s lakoća .1s ; -moz-prijelaz: visina .25s lakoća .1s ; -o-prijelaz: visina .25s lakoća .1s ; -ms-prijelaz: visina .25s lakoća .1s ; prijelaz : visina .25s lakoća .1s ; .1s ; ) .meni li: hover > ul li (visina: 36px; prelivanje: vidljivo; padding: 0 ;) |
Meni ul ( pozicija: apsolutna; vrh: 40px; lijevo: 0; neprozirnost: 0; pozadina: #1f2024; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border- radijus: 0 0 5px 5px; -webkit-transition: neprozirnost .25s lakoća .1s; -moz-transition: neprozirnost .25s lakoća .1s; -o-transition: neprozirnost .25s lakoća .1s; -ms-transition: neprozirnost .25s lakoća .1s; 25s ease .1s; prijelaz: neprozirnost .25s ease .1s; ) .menu li:hover > ul (prozirnost: 1; ) .menu ul li (visina: 0; prelijevanje: skriveno; padding: 0; -webkit-transition: visina .25s lakoća .1s; -moz-prijelaz: visina .25s lakoća .1s; -o-prijelaz: visina .25s lakoća .1s; -ms-prijelaz: visina .25s lakoća .1s; prijelaz: visina .25s lakoća . 1s; ) .menu li:hover > ul li (visina: 36px; overflow: vidljivo; padding: 0; )
Postavljamo širinu linkova = 100px, na dnu svih elemenata osim posljednjeg dodaje se granica donje granice. Takođe, ako želite, možete postaviti slike za stavke podmenija (pažnja! ne zaboravite da promenite putanje do slika u kodu na one koje koristite).
| .menu ul li a ( širina : 100px ; padding : 4px 0 4px 40px ; margina : 0 ; granica : nema ; border-bottom : 1px solid #353539 ; ) .menu ul li: last-child a ( granica: nema ; ) .menu 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-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 kreiranja horizontalnog padajućeg menija, pa ću odmah dati konačni kod:
IN ovaj primjer pogledaćemo 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 i složenosti implementacije, rješenje je nešto složenije 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 (implementirano kroz listu sa subnav klasom).
Također u kodu ćete vidjeti skriptu bez prefiksa za korištenje CSS svojstava bez prefiksa. Rezultirajući HTML za padajući meni izgleda ovako:
|
-
- Aplikacija
- Board
- Opcije
CSS za meni
1. Osnovni stilovi i stavke menija
Prvo određujemo Montserrat font, tamno sivu pozadinu i fiksnu visinu za stavke menija. Svi elementi su float: poravnati lijevo i pozicionirani relativno tako da kasnije možete dodati podmeni sa položajem: apsolutni;
| @import url (http: //fonts.googleapis .com/css?family= Montserrat) ; * ( margina : 0 ; padding : 0 ; ) .nav ( pozadina : #232323 ; visina : 60px ; display : inline-block ; ) .nav li ( float : lijevo ; tip-stil liste : 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 je postavljeno da se poravna.
| .nav li a (font-size : 16px ; boja : bijela ; display : block ; line-height : 60px ; padding : 0 26px ; text-decoration : nema ; border-left : 1px solid #2e2e2e ; font-family : Montserrat , sans-serif ;text-shadow : 0 0 1px rgba (255 , 255 , 255 , 0.5 ) ; ) .nav li a: lebdeći (boja pozadine : #2e2e2e ; ) #settings a ( padding : 18px ; visina ; ; font-size : 10px ; line-height : 24px ;) |
Nav li a (veličina fonta: 16px; boja: bijela; zaslon: blok; visina linije: 60px; padding: 0 26px; dekoracija teksta: nema; granica lijevo: 1px čvrsta #2e2e2e; porodica fontova: Montserrat, sans-serif;text-shadow: 0 0 1px rgba(255, 255, 255, 0.5); ) .nav li a:hover ( background-color: #2e2e2e; ) #settings a ( padding: 18px; visina: 24px; veličina fonta: 10px; visina linije: 24px; )
3. Blok pretraživanja
Ovaj element ima fiksnu širinu i sastoji se od nekoliko delova - polja za unos (#search_text) sa zelenom pozadinom i dugmeta za pretragu (#search_button). U nekim pretraživačima, boja pozadine može biti siva.
| #search (širina: 357px; margina: 4px;) #search_text (širina: 297px; padding: 15px 0 15px 20px; font-size: 16px; font-family: Montserrat, sans-serif no; px :ne border : visina 0 15px 20px ; 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; background: #1f7f5c url (search.png) centar bez ponavljanja; širina: 60px lijevo; plutajući pad : 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 kutije: 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
Završni dodir će nam omogućiti kako da napravimo CSS padajući meni koji radi posljednja tačka#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 : auto ; neprozirnost : 0 ; prijelaz : sve 0,1 s ; pozadina : #232323 ; ) .subnav li : none ; ) .subnav li a ( border-bottom : 1px solid #2e2e2e ; ) #options : hover .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 na izvorni kod, možete ga djelomično vidjeti u Codepen-u:
Ukupno
Iznad smo pogledali 4 opcije kako napraviti padajući meni u CSS + HTML za , međutim slični primjeri ima mnogo više na webu. 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 CSS padajućih izbornika koriste slike, tako da ćete morati pažljivo pogledati putanje slika i unijeti ispravne vrijednosti za svoju web lokaciju. Drugo, neka rješenja su stara 2-3 godine, pa bi trebalo 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.
Zdravo svima. Danas nastavljamo našu temu o padajućim menijima i pričamo o tome kako napraviti . Kao i obično, svaki primjer će imati dostupan demo način rada, kao i datoteke za preuzimanje.
Ako ste slučajno došli na ovu stranicu ili ste tražili nešto drugo, savjetujem vam da pratite link, ima puno različiti meniji za sajt.
Postoji dosta vertikalnih menija za web sajtove, u ovom tutorijalu ću vam pokazati samo vertikalni padajući meni u CSS-u pri lebdenju sa desnim i levim padajućim menijem, kao i padajuće menije na više nivoa. Ostale opcije za vertikalne menije za web lokaciju će biti opisane u sljedećim lekcijama. I tako prelazimo.
Navigacija stranice:
Kao uvod, mislim da je vrijedno objasniti kako funkcionišu CSS padajući menii.
Svi pretraživači koji se pokreću sa računara ili laptopa imaju svojstvo dostupno u CSS-u :hover(ovdje malo griješim, ovo je pseudo-klasa 🙂) na osnovu koje možete napraviti skoro svaki vertikalni padajući meni.
Ali šta je sa mobilnim pretraživačima? - ili na tabletima, pitate se.
Na sreću, programeri mobilnih pretraživača su omogućili (nažalost ne svuda) mogućnost pokretanja pseudo-class:hover pri prvom kliku na link, ako je to opisano u CSS-u. Uz ove napore, većina korisnika će moći vidjeti vaš CSS vertikalni padajući meni.
Nekoliko riječi o prednostima padajućih menija:
- možete staviti veoma dugačke menije u ograničen prostor;
- dizajn postaje elegantniji;
- faktori ponašanja su djelimično poboljšani.
Vertikalni padajući meni desno
Predstavljam vašoj pažnji prvi primjer: jednostavan vertikalni padajući meni s desne strane pri lebdenju.
Počećemo pisati meni sa html kodom i učiniti ga univerzalnim na listama, odgovor je identičan onome što wordpress vraća.
Html za vertikalni meni
Mislim da u smislu razumijevanja html-a nećete imati nikakvih poteškoća, tipične liste sa ul i li tagovima. Pogledajmo kod:
Meni za sajt na listama: neke stavke imaju padajuće blokove, neke ne. Sve je krajnje jednostavno, mislim da nije potrebno objašnjenje.
CSS vertikalni padajući meni
Sa CSS stilovima, problem je malo komplikovaniji. Pokazat ću vam kod samo samog menija, a ostatak stilova možete vidjeti kada preuzmete primjer.
#menuVertical(width:100%;height:auto;) #menuVertical ul( display:block; width:100%; height:auto; margin:0px; padding:0px; list-style:none; position:relative; ) # menuVertical ul li(display:block; width:100%; height:auto; position:relative;) #menuVertical ul li a( position:relative; display:block; width:100%; height:auto; box-sizing:border -box; font-size:13px; text-transform:uppercase; font-weight:bold; color:#FBF7F7; line-height:1.2em; padding:10px 15px; background:#3A9CD3; border-top:1px solid # 236A92; text-decoration:none; ) #menuVertical ul li:first-child a(border:0px;) #menuVertical ul li a:hover, #menuVertical ul li:hover a( background:#0A3CC1; ) #menuVertical ul li ul( position:apsolute; top:0px; lijevo:100%; display:none; width:auto; ) /*********prikaži padajući meni pri lebdenju ********/ #menuVertical ul li: hover ul(display:block;) #menuVertical ul li ul li a( white-space:nowrap; text-transform:none; padding:5px 20px; ) #menuVertical ul li ul li a:hover( background:#75C1D4; boja:#0A3CC1; )
Ova linija CSS-a
#menuVertical ul li:hover ul(display:block;)
Odgovoran za posledice. Prikazuje padajući okvir pri lebdenju. Preostali stilovi su potrebni za stilizovanje samog menija, kao i za pravilno postavljanje lista/stavki menija.
Možete vidjeti šta smo dobili u ovom primjeru na skinu:
Možete vidjeti kako css vertikalni padajući meni funkcionira u demonstraciji ispod, ili preuzimanjem primjera:
Evo tako jednostavnog primjera padajućeg menija koji sam dobio.
Recimo da želite da napravite padajući meni kada se lebdi sa padajućim menijem sa leve strane. Na osnovu primjera pada na desno, sada ćemo ga implementirati.
Vertikalni padajući meni lijevo u CSS-u
Ostavljamo HTML kod isti, nema smisla ga mijenjati. Osim u samom primjeru, morat ću zamijeniti lijevi blok i desni, radi jasnoće primjera. (vidjet ćete preuzimanje primjera na kraju)
CSS stilovi će se malo razlikovati, iako ne drastično. U mom jednostavnom primjeru, dovoljno je popraviti jednu vrijednost. U komentarima ću ga označiti.
Za složenije menije, morat ćete malo više uređivati. Pogledajte stilove:
#menuVertical(width:100%;height:auto;) #menuVertical ul( display:block; width:100%; height:auto; margin:0px; padding:0px; list-style:none; position:relative; ) # menuVertical ul li(display:block; width:100%; height:auto; position:relative;) #menuVertical ul li a( position:relative; display:block; width:100%; height:auto; box-sizing:border -box; font-size:13px; text-transform:uppercase; font-weight:bold; color:#FBF7F7; line-height:1.2em; padding:10px 15px; background:#3A9CD3; border-top:1px solid # 236A92; text-decoration:none; ) #menuVertical ul li:first-child a(border:0px;) #menuVertical ul li a:hover, #menuVertical ul li:hover a( background:#0A3CC1; ) #menuVertical ul li ul( position:apsolute; top:0px; desno:100%;/*promijenjeno ovdje*/ display:none; width:auto; ) /*******prikaži padajući meni pri lebdenju ******** / #menuVertical ul li:hover ul(display:block;) #menuVertical ul li ul li a( white-space:nowrap; text-transform:none; padding:5px 20px; ) #menuVertical ul li ul li a:hover( background:#75C1D4; boja:#0A3CC1; )
To je sve. Imamo ovaj meni. S lijeve strane je skin na koji se može kliknuti, s desne strane je demo i link za preuzimanje primjera:
Vertikalni slojeviti meni
U stvarnom životu, vertikalni višeslojni lebdeći meniji su prilično rijetki. Hteo sam da pokažem par primera iz svoje zalihe, ali nažalost nisam mogao da ih nađem. Morat će to uraditi 🙂. Nema ništa komplikovano u ovim menijima za sajt, tipičan CSS za padajući meni.
Počnimo. Počnimo sa html kodom. Dodaćemo nekoliko ul li lista za sledeće nivoe sajta. Moj primjer će biti na 3 padajuća podmenija, prema ovom html kodu će biti ovako:
Pazite, samo treća stavka menija ima padajući meni na više nivoa, ostalo nisam uradio da ne začepim html a ima ih toliko.
#menuVertical(width:100%;height:auto;) #menuVertical ul( display:block; width:100%; height:auto; margin:0px; padding:0px; list-style:none; position:relative; ) # menuVertical ul li(display:block; width:100%; height:auto; position:relative;) #menuVertical ul li a( position:relative; display:block; width:100%; height:auto; box-sizing:border -box; font-size:13px; text-transform:uppercase; font-weight:bold; color:#FBF7F7; line-height:1.2em; padding:10px 15px; background:#3A9CD3; border-top:1px solid # 236A92; text-decoration:none; ) #menuVertical ul > li:first-child > a(border:0px;) #menuVertical ul li a:hover, #menuVertical ul li:hover a( background:#0A3CC1; ) #menuVertical ul li ul( position:apsolute; top:0px; lijevo:100%; display:none; width:150px; ) /*******prikaži padajući meni pri lebdenju ********/ #menuVertical ul li:hover > ul(display:block;) #menuVertical ul li ul li a(text-transform:none; padding:5px 20px; ) #menuVertical ul li ul li a:hover, #menuVertical ul li ul li:hover > a( background:#75C1D4; boja:#0A3CC1; )
Ovo su stilovi za kreiranje vertikalnog slojevitog padajućeg menija koji lebdi mišem. Opcija sa iskorakom ulijevo bit će malo dalje. U nastavku pogledajte šta smo dobili na slici (skin se može kliknuti).
Horizontalni padajući meni koristi se za organizovanje strukture navigacije sajta. Optimalan broj nivoa gniježđenja je jedan ili dva. Što je manje nivoa priloga, to je posetiocu sajta lakše pronaći informacije koje su mu potrebne. Kako kreirati običan horizontalni meni je detaljno opisano u .
Kako napraviti horizontalni padajući meni
1. HTML oznake i osnovni stilovi za padajući meni sa jednim nivoom ugniježđenja
HTML oznaka horizontalnog padajućeg menija razlikuje se od običnog menija po tome što se odnosi na željenu stavku liste
- ili<оl> .
- Nad kojim se kursor lebdi. Ova funkcija radi samo u Internet Exploreru - drugim pretraživačima jednostavno nije potrebna.
Za pozicioniranje podmenija u odnosu na glavni meni, deklarisani su sledeći stilovi:
— za element liste u koji je padajuća lista ugniježđena: li (pozicija: relativna;) ;
- za padajući meni ul (pozicija: apsolutna;) , kao i lijeve i gornje vrijednosti.
Radi jasnoće i praktičnosti formatiranja, dodajmo klasu gornjeg menija u glavni meni, a klasu podmenija u padajući meni.
Padajući meni možete sakriti na nekoliko načina:
1) prikaz: nema;
2) vidljivost: skrivena;
3) neprozirnost: 0;
4) transformacija: scaleY(0);
5) koristeći jQuery biblioteku.
Metoda 1. (prikaz: nema;)
Padajući meni je skriven sa .submenu (display: none;) , prikazan pri lebdenju sa .topmenu li:hover .submenu (display: block;) .
Metoda 2. (vidljivost: skriveno;)
Meni je skriven sa .submenu (vidljivost: skriveno;), prikazano sa .topmenu li:hover .submenu (vidljivost: vidljivo;) .
Metoda 3. (prozirnost: 0;)
Meni je skriven sa .submenu (prozirnost: 0;) , prikazan sa .topmenu li:hover .submenu (neprozirnost: 1;) . Da biste spriječili da se meni pojavi kada zadržite pokazivač iznad područja na kojem se nalazi, dodajte vidljivost: skriveno; , a pri lebdenju promijeni se u vidljivost: vidljivo; .
Metoda 4. (transformacija: scaleY(0);)
Meni je skriven sa .submenu (transform: scaleY(0);) , prikazan sa .topmenu li:hover .submenu (transform: scaleY(1);) . Pošto je zadana transformacija elementa iz centra, potrebno je dodati za .submeni (transform-origin: 0 0;) , tj. iz gornjeg lijevog ugla.
Metod 5: Korišćenje jQueryja
$(".five li ul").hide(); // sakrij padajući meni $(".five li:has(".submenu")").hover(function()( $(".five li ul").stop().fadeToggle(300);) /* izaberite element liste koji sadrži element sa .submenu klasom i dodajte mu funkciju lebdenja koja prikazuje i sakriva padajući meni */);2. 3D padajući meni
Zanimljivi efekti se mogu kreirati pomoću CSS3 transformacija, kao što je stvaranje menija sa dna ekrana.
* ( veličina okvira: border-box; ) body ( margina: 0; pozadina: radijalni gradijent(#BFD6E2 1px, rgba(255,255,255,0) 2px); background-size: 10px 10px; ) nav ul (stil liste : nema; margina: 0; padding: 0; ) nav a (prikaz: blok; tekst-dekoracija: nema; obris: nema; prijelaz: .4s jednostavno ulazak; ) .topmenu (backface-visibility: skriveno; pozadina : rgba(255,255,255,.8); ) .topmenu > li (prikaz: inline-block; pozicija: relativna; ) .topmenu > li > a (familija fontova: "Exo 2", sans-serif; visina: 70px; visina linije: 70px; padding: 0 30px; font-weight: bold; boja: #003559; transformacija teksta: velika slova; ) .down:after ( sadržaj: "\f107"; margin-left: 8px; font-family : FontAwesome; ) .topmenu li a:hover (boja: #E6855F; ) .submeni (pozadina: bijela; granica: 2px čvrsta #003559; pozicija: apsolutna; lijevo: 0; vidljivost: skrivena; neprozirnost: 0; z-indeks : 5; širina: 150px; transformacija: perspektiva(600px) rotateX(-90deg); transform-origin: 0% 0%; prijelaz: .6s lakoća ulaska; ) .topmenu > li:hover .submenu( vidljivost: vidljivo; neprozirnost: 1 transformacija: perspektiva(600px) rotateX(0deg); ) .podmeni li a ( boja: #7f7f7f; veličina fonta: 13px; visina linije: 36px; padding: 0 25px; porodica fontova: "Kurale", serif; )
3. Proširivi padajući meni sa logotipom
U ovom primjeru, gornji dio stranice sadrži logotip i navigaciju web lokacije. Logo može biti slika ili tekst. Padajući meni se postepeno širi ispod gornje stavke liste koristeći CSS3 funkciju transformacije.
4. Povećanje padajućeg menija
Još jedan primjer za padajući meni. Efekat uvećanja kada se pojavi meni ostvaruje se smanjenjem početne size.submenu (transform: scale(.8);) , pri lebdenju se veličina povećava na.topmenu > li:hover .submenu (transform: scale(1);) .
* ( veličina okvira: okvir-kutija; ) tijelo ( margina: 0; pozadina: url(https://html5book.ru/wp-content/uploads/2015/10/background54.png) ) nav ( pozadina: bijela; ) nav ul ( stil liste: nijedan; margina: 0; padding: 0; ) nav a ( dekoracija teksta: nema; obris: nijedan; prikaz: blok; prijelaz: .4s lakoća ulaska; ) .topmenu ( text-align: centar; padding: 10px 0; ) .topmenu > li (prikaz: inline-block; pozicija: relativna; ) .topmenu > li:after (sadržaj: ""; pozicija: apsolutna; desno: 0; širina: 1px; visina: 12px; pozadina: #d2d2d2; vrh: 16px; box-shadow: 4px -2px 0 #d2d2d2; transform: rotate(30deg); ) .topmenu > li:last-child:after (pozadina: nema; okvir -shadow: nema; ) .topmenu > li > a ( padding: 12px 26px; boja: #767676; text-transform: velika slova; font-weight: bold; razmak između slova: 1px; font-family: "Exo 2", sans-serif; ) .topmenu li a:hover ( boja: #c0a97a; ) .submenu ( pozicija: apsolutna; lijevo: 50%; vrh: 100%; širina: 210px; margin-left: -105px; pozadina: #fafafa ; granica: 1px čvrsta #ededed; z-indeks: 5; vidljivost: skrivena; neprozirnost: 0 transform:scale(.8); tranzicija: .4s jednostavnost ulaska; ) .submeni li a ( padding: 10px 0; margina: 0 10px; border-bottom: 1px solid #efefef; font-size: 12px; boja: #484848; font-family: "Kurale", serif; ) .topmenu > li:hover .submenu ( vidljivost: vidljiva; neprozirnost: 1; transformacija: skala(1); )
5. Padajući meni
Horizontalni meni sa mini animacijom: kada pređete mišem preko linkova gornjeg menija, pojavljuje se mali krug, koji takođe prati pojavu padajućeg menija.
@import url("https://fonts.googleapis.com/css?.jpg); background-position: centar centar; background-repeat: no-repeat; background-size: cover; visina: 100vh; položaj: relativan; ) body:before (sadržaj: ""; pozicija: apsolutna; lijevo: 0; dno: 0; visina: 100%; širina: 100%; pozadina: linearni gradijent (45deg, rgba(0,0,0,0) , rgba(255,255,255,.8)); ) nav (poravnanje teksta: centar; padding: 40px 0 0; ) nav ul (stil liste: nema; margina: 0; padding: 0; ) nav a (dekoracija teksta : nema; prikaz: blok; boja: #222; ) .topmenu > li (prikaz: inline-block; pozicija: relativna; ) .topmenu > li > a (pozicija: relativna; padding: 10px 15px; font-family: " Kaushan Script", kurziv; veličina fonta: 1.5em; visina reda: 1; razmak između slova: 3px; ) .topmenu > li > a:before ( sadržaj: ""; pozicija: apsolutna; z-indeks: 5; lijevo: 50%; vrh: 100%; širina: 10px; visina: 10px; pozadina: bijela; radijus ivice: 50%; transformacija: translate(-50%, 20px); neprozirnost: 0; prijelaz: .3s; ) .topmenu li:hover a:before ( transform: translate(-50%, 0); neprozirnost: 1 ) .podmeni ( pozicija: apsolutna; z-indeks: 4; lijevo: 50%; vrh: 100%; širina: 150px; padding: 15px 0 15px; margin-top: 5px; pozadina: bijela; radijus granice: 5px; box-shadow: 0 0 30px rgba(0,0,0,.2); box-size: border-box; vidljivost: skrivena; neprozirnost: 0; transformacija: translate(-50%, 20px); prijelaz: .3s ; ) .topmenu > li:hover .submeni ( vidljivost: vidljiva; neprozirnost: 1; transformacija: translate(-50%, 0); ) .submenu a ( porodica fontova: "Libre Baskerville", serif; veličina fonta: 11px; razmak između slova: 1px; padding: 5px 10px; prijelaz: .3s linearan; ) .submeni a:hover (pozadina: #e8e8e8;)
Svako ko se odluči za kreiranje vlastite web stranice susreće se s potrebom da napravi lijepu meni za vašu web stranicu. U ovom članku ću vam pokazati kako, koristeći običan HTML kod i jednostavna CSS pravila, možete stvoriti sjajan padajući meni koji se lako menja i dodaje. A za ovo nam nije potreban nikakav JavaScript kod!
Prvi i najvažniji korak u kreiranju padajućeg menija je kreiranje njegove strukture. Ovo je najbolje uraditi koristeći neuređene liste. Kreirajmo ovako jednostavan meni:
Pokazalo se da je html kod prilično jednostavan i nimalo kompliciran. Ova lista će izgledati ovako.
U narednom koraku naš jelovnik ćemo dovesti do ljepšeg izgleda. Ovo se lako može uraditi pomoću CSS-a.
Prije svega, uklonit ćemo markere u neuređenoj listi, uvlake, a također ćemo postaviti širinu našeg menija.
#nav ul ( margina: 0px; padding: 0px; list-style:none; width:200px; )
Sada moramo postaviti poziciju elemenata liste. Od našeg meniće biti okomito, to nam olakšava rad. Međutim, moramo postaviti vrijednost za svojstvo "pozicija" , Kako "rođak" . Ovo je neophodno kako bi se podmeniji apsolutno pozicionirali u odnosu na glavni meni. Također ćemo postaviti donju crtu za stavke menija.
#nav ul li (pozicija: relativna; border-bottom:1px solid #ccc; )
Sada treba da ispravimo naše podmeni. Pošto želimo da se naš meni pojavi desno od glavnog menija u trenutku kada je kursor iznad ove stavke, potrebno nam je svojstvo ugniježđene liste "pozicija" postavljena vrijednost "apsolutno" . Takođe moramo odrediti njegovu poziciju. To se radi na sljedeći način
#nav li ul ( pozicija: apsolutna; lijevo: 200px; gore: 0; prikaz: nema; )
Korištenje atributa lijevo I top postavljamo apsolutno pozicioniranje našeg podmenija u odnosu na roditeljsku stavku menija. Također sam dodijelio atribut "prikaz" značenje "nijedno" , pošto ne želimo da vidimo podmeni kada se stranica otvori.
Tako da sada naš meni izgleda ovako.
Pogledajmo sada naše linkove. Prije svega, kako bi svaka veza zauzela sav prostor koji joj je dodijeljen unutar elementa liste koji ga sadrži, dodjeljujemo atributu "prikaz" značenje blok . Također ćemo ukloniti podvučeno i postaviti boju pozadine i boju teksta veza.
#nav ul li a (prikaz: blok; tekst-dekoracija: nema; boja: #777; pozadina: #fff; padding: 5px; )
#nav li:hover ul (prikaz: blok; )
Sada naš meni već radi i izgleda ovako.
Ostaje mu dati atraktivniji izgled.
Prvo, napravimo tako da se pozadina i boja teksta mijenjaju kada zadržite pokazivač miša iznad naših stavki menija. Da biste to učinili, dodajte sljedeći kod
#nav li:hover a ( boja:#FFFFFF; pozadina: url(img/fone-tr.png); )
Ovdje koristim ovu sliku kao pozadinu, ali možete koristiti bilo koju drugu boju (na primjer: background-color:#0000ff; ).
#nav li:hover ul a:hover ( boja pozadine:#cccccc; background-image:none; boja:#FFFFFF; )
OK, sada je sve gotovo! Je li naš padajući meni u html i css spreman. Vidite šta imamo.
Činilo se da se ovo moglo završiti, ali ne. Nažalost rano Internet verzije Explorer razumije pseudo klasu :hover samo za oznaku - Pa li:hover , na koji imamo izgled podmenija i promjenu boje pozadine, ne govori mu ništa.
Da riješimo ovaj problem, dodajmo malo JavaScript koda:
A sada neka bude tako da kada pređete mišem preko stavke podmenija, ona također mijenja boju pozadine. Za ovo koristimo sljedeći kod:
Ovo vam omogućava da "zakačite" klasu jshover na bilo koji element
Sada, da bi meni radio u IE, dodajemo na tri već postojeća pravila dodatnim selektorom li.jshover:
|
#nav li:hover ul, #nav li.jshover ul ( #nav li:hover a, #nav li.jshover a ( #nav li:hover ul a:hover, #nav li.jshover ul a:hover ( |
Od autora: Pozdravljam sve. Iz nekog razloga, webmasteri povezuju padajući meni sa skriptama, ali već dugo se takva navigacija može apsolutno sigurno obaviti na čistom css-u. I takav meni neće biti ništa lošiji. Danas ću vam pokazati kako da napravite padajući meni u css-u. Da podijelim recept.
Plan lekcije i izgled našeg menija
Generalno, prvo ćemo odlučiti kako ćemo kreirati sam meni. U html5, standardni način je da se kreira u navigacionom kontejneru koristeći listu sa nabrajanjem. Uradimo samo to. Oznake ćemo ukloniti kasnije pomoću css-a, oni nam uopće nisu potrebni u meniju.
Zapravo, odmah ću napisati u html markupu sa ugniježđenim listama. Odnosno, naša lista će biti na dva nivoa - sadržavat će druge liste. Naime, za svaku stavku 1 lista, koja će formirati padajući meni.
Ovdje postoji važna stvar, a to je da možda nećete morati napraviti padajući meni za svaku stavku, već samo neke. Nema problema, onda jednostavno ne kreiramo ugniježđene liste u paragrafima bez ispadanja.
Zapravo, evo ga, cijela oznaka:
< nav id = "nav" > < ul > < li > < a href = "#" >Stav 1< / a > < ul class = "second" > < li > < a href = "#" >podparagraf< / a > < / li > < li > < a href = "#" >podparagraf< / a > < / li > < li > < a href = "#" >podparagraf< / a > < / li > < / ul > < / li > < li > < a href = "#" >Tačka 2< / a > < ul class = "second" > < li > < a href = "#" >podparagraf< / a > < / li > < li > < a href = "#" >podparagraf< / a > < / li > < li > < a href = "#" >podparagraf< / a > < / li > < / ul > < / li > < li > < a href = "#" >Tačka 3< / a > < ul class = "second" > < li > < a href = "#" >podparagraf< / a > < / li > < li > < a href = "#" >podparagraf< / a > < / li > < li > < a href = "#" >podparagraf< / a > < / li > < / ul > < / li > < li > < a href = "#" >Stavka 4< / a > < ul class = "second" > < li > < a href = "#" >podparagraf< / a > < / li > < li > < a href = "#" >podparagraf< / a > < / li > < li > < a href = "#" >podparagraf< / a > < / li > < / ul > < / li > < / ul > < / nav > |
Razumijem da je ogroman. To je problem sa ugniježđenim listama, što morate napisati mnogo koda. Ali uzmite u obzir činjenicu da radimo 4 glavne stavke i za svaku će postojati padajući meni.
Zapravo, cijeloj navigaciji sam dao navigacijski ID, a sve ugniježđene liste drugu klasu stila da shvatim da su ugniježđene.
Odlično, oznaka je spremna, možete vidjeti rezultat:
Da, izgleda užasno. Ali sada ćemo uključiti css u rad i za nekoliko minuta naša navigacija će se promijeniti. Hajdemo raditi.
Pisanje css stilova
Prva stvar koju ću učiniti je resetirati sav padding na default za sve elemente. Samo će nas ometati, bolje je da kasnije sami postavimo uvlake, gdje je potrebno.
*( margina: 0; dopuna: 0; )
margina : 0 padding: 0 |
#nav(visina: 70px; ) #nav ul(list-style: none;)
#nav( visina: 70px #navul( stil liste: nijedan; |
Sada treba da odlučimo kakav će biti naš meni. Horizontalno ili vertikalno? Predlažem da prvo napravite horizontalni i vidite sve na njegovom primjeru. Da biste to učinili, morate napisati sljedeće stilove:
#nav > ul > li( float: lijevo; širina: 180px; pozicija: relativna; )
#nav > ul > li( float : lijevo ; širina: 180px pozicija : relativna ; |
Imajte na umu da znakom > upućujemo na stavke liste koje su direktno ugniježđene u ul, što je direktno ugniježđeno u nav. Ovo je vrlo važno, jer vam omogućava da ne primjenjujete stil na ugniježđene stavke liste. Činjenica je da će, prema mojoj zamisli, stavke u glavnoj listi biti raspoređene horizontalno, a u ugniježđenim - okomito.
Ali naravno, možete to učiniti drugačije, u skladu sa svojom idejom. Možete osigurati da su sve stavke u jednom redu.
U svakom slučaju, gornji kod, nadam se da razumiješ. To prisiljava da se stavke glavne liste smjeste ulijevo, tako da se sve uklapaju u istu liniju, iako su elementi na nivou bloka. Također sam im dao eksplicitnu širinu i relativno pozicioniranje.
Čemu služi pozicioniranje? Neophodno je kako bi se kasnije apsolutno pozicionirale ugniježđene liste. Ako ste proučavali pozicioniranje u css-u, vjerovatno znate da ako postavite blok na relativno pozicioniranje, onda svi elementi u njemu mogu biti pozicionirani apsolutno unutar ovog određenog bloka, a ne cijelog prozora pretraživača.
U međuvremenu, evo šta imamo do sada:
Sa ovog snimka ekrana već možete zamisliti približan rezultat. Naravno, još uvijek moramo lijepo stilizirati točke kako oči ne bi molile za milost pri gledanju navigacije.
#nav li a( display: block; background: #90DA93; border: 1px solid #060A13; color: #060A13; padding: 8px; text-align: center; text-decoration: none; ) #nav li a:hover( pozadina: #2F718E; )
#nav li a( displej : blok ; pozadina : #90DA93; granica : 1px čvrsta #060A13; boja : #060A13; padding: 8px tekst - poravnaj : centar ; tekst - dekoracija: nema; #nav li a:hover( pozadina : #2F718E; |
Prvo, same veze moraju biti blokirane. Ovo je neophodno da bi padding funkcionisao i da bi se sva svojstva pravilno primenila. Zatim određujem boje pozadine, tekst, opcije okvira, uvlake i poravnanje teksta u sredini. Na kraju uklanjam podvlačenje veza.
Svi ovi parametri ne moraju biti napisani kao ja. Boje možete birati proizvoljno, napraviti drugačiji okvir ili ga uopće ne koristiti, udubljenja se mogu smanjiti ili povećati.
Imajte na umu da u ovom slučaju nismo koristili znak >, tako da će se ova pravila primjenjivati na sve veze, uključujući one u ugniježđenim pasusima. Dakle, sada imamo sljedeće:
Odlično, ali razumiješ da podstavke ne bi trebale biti vidljive, trebale bi se otkriti kada pređete mišem preko željene stavke. Bez toga, naš meni izgleda kao sto. Pa, vrijeme je da sakrijete ugniježđene stavke.
#nav li .second (prikaz: nema; pozicija: apsolutna; vrh: 100%; )
#nav li .second( prikaz : nema ; pozicija : apsolutna ; vrh : 100% ; |
Prvo, sakrivamo potpuno ugniježđene liste. Drugo, dajemo im apsolutno pozicioniranje i koordinatni vrh: 100%. To znači da će padajući meni biti jasno prikazan ispod glavne stavke kojoj pripada, jasno ispod 100% visine te stavke.
Sada vidimo samo glavni meni na web stranici, što nam je potrebno.
Implementacija osipanja
Ostaje nam da uradimo ono najvažnije – da implementiramo sam pad. U tome nema ništa komplikovano, pogledajte ovaj kod:
#nav li:hover .second( display: block; )
#nav li:hover .second( displej : blok ; |
Ovaj kod će raditi besprijekorno. Kada zadržite pokazivač iznad stavke glavnog menija, ugniježđena lista će postati vidljiva. I to samo lista koja je ugniježđena u stavku na kojoj se kursor lebdi.
Postoji samo jedan manji problem - širina ugniježđenih stavki ne odgovara širini glavnih. Ali to se vrlo lako rješava dodavanjem odgovarajućih stilova:
#nav li li( širina: 180px; )
#nav li li( širina: 180px |
To je to, problem rešen:
Sve radi savršeno. Kada zadržite pokazivač iznad glavne stavke, pojavljuje se odgovarajući padajući meni. Ako pomaknete kursor u stranu, on nestaje. Ako pomaknete kursor na same ugniježđene stavke, možete kliknuti na njih i otići na željeni dio stranice. Tako smo napravili vrlo jednostavan i lak padajući meni bez apsolutno nikakvih skripti.
Promjena menija u vertikalni
Pa, u potpunosti smo shvatili horizontalnu navigaciju, ali osim nje, vertikalna navigacija je vrlo česta na stranicama i može biti i padajuće. U stvari, promjena menija iz horizontalnog u vertikalni je vrlo jednostavna, morat ćemo promijeniti samo nekoliko linija koda.
Prvo, morat ćete ukloniti float:left sa stavki glavne liste. Upravo ovo svojstvo doprinosi tome da se naše stavke prikazuju u jednom redu, ali zašto nam je to potrebno ako bi navigacija trebala biti okomita?
Sada ostaje promijeniti pravila za #nav li .second selektor, odnosno za ugniježđene liste, naime treba ih malo drugačije pozicionirati. Volim ovo:
#nav li .second (prikaz: nema; pozicija: apsolutna; lijevo: 100%; gore: 0; )
#nav li .second( prikaz : nema ; pozicija : apsolutna ; lijevo: 100% vrh : 0 ; |
Odnosno, potrebno je registrirati dvije koordinate umjesto jedne. Prvo, u slučaju horizontalne navigacije, rekao sam da, kako je planirano, stavke podmenija treba da budu prikazane ispod glavnih stavki. U slučaju vertikalnog menija, ovo nije prikladno - stavke bi trebale biti prikazane sa strane.
Dakle, mijenjamo vrh: 100% lijevo: 100%. Osim toga, potrebna nam je i gornja koordinata. Postavite ga na 0 tako da podmeni bude na istom nivou kao i stavka kojoj odgovara.
Sve, sad sve radi kako treba. Možete testirati. Kao što vidite, nisam lagao kada sam rekao da ću morati da prepišem samo nekoliko linija koda.
Horizontalni meni sa više nivoa
Koristeći isti pristup, možete kreirati više nivoa menija ako je potrebno. Na primjer, napravimo listu za četvrtu stavku glavnog menija, koja će biti ugniježđena u jednu od podstavaka.
