Horizontalni izbornikê popis podjela za mjesto, logičnije ga je smjestiti u sredinu elementa
- , a zatim zasosuvat CSS-stilove na yogo elemente. Takvo proširenje izbornika najviše je prošireno kroz očiti napredak u svom položaju na web stranici.
- Stavka izbornika
- Stavka izbornika
- Stavka izbornika ...
- blok trim za izbornik
- sam izbornik, pregledan putem popisa za označavanje (ul tag)
- dobro, stavke izbornika su u sredini, a u njima, očito, već postoji poruka
- vertical-align: bottom - ova snaga je potrebna kako bi se istakla, tako da će tekst stavke izbornika zauzimati 2 retka i da će se pojaviti ravnomjerno. Ako proširimo izbornik, vidi se jačina, poveća skala, tako da se točke stisnu i tekst prenese u dva reda i riješi problem prikaza. Vratite struju i sve će biti u redu.
- display: table-cell - postavili smo da se sam izbornik prikazuje kao red tablice, logično bi bilo postaviti jednu od stavki za prikaz kao red tablice. Tse obov'yazkovo.
- širina: auto - širina se izračunava automatski, ovisno o duljini teksta u odlomku
- text-align: centar je samo za centriranje teksta u sredini
- visina: 50px - postavite visinu na 50 piksela
- pa, granica-desno je samo desna granica, takva razdjelnica za točke
- moć tekst-dekoracija skasovuê podkrelennya posilan, jaka staviti iza umovchannyam
- širina: 1000px - možda najvažniji red. Potrebno je postaviti približno istu širinu, možda manju, ali i više od maksimalno široke stavke izbornika. Ako ne želite postati širi od 1000 piksela, postavite širinu stavke izbornika li, za koju je širina postavljena na automatski, a zatim dopustite da radi na takav način da, bez obzira na broj stavki, izbornik morat će se postaviti na 100 piksela širine.
- vertical-align: middle i display: table-cell - prvo renderirajte tekst okomito u sredini, a u drugom također pokušajte prikazati tekst u sredini. Potrebni su prekršaji za vlast.
- font - to je samo skup postavki za font. Pročitajte o css snazi za fontove u ovom članku.
- izbornik se dinamički proteže;
- izaći iz maloprodaje do točke razlike;
- ljepše je taj mali zečić okićen.
- s vipadaškom pri nišanju ubiti
- sa spojnom vapadkom od trećeg jednaka
- Kod volumena
- Nemogućnost dodjeljivanja aktivnog stanja elementa kroz selektor klase. Tse vídbuvaêtsya kroz rozryv sív u paragrafima (yakscho to je jedan). Rješenje problema bilo bi dodavanje još jednog spremnika elementima popisa.
- Za izbornik koji vidite, morate progurati kod kroz negativni priljev prekoračenja .
Kako napraviti horizontalni izbornik: izgled i dizajn
HTML izgled i osnovni stilovi za horizontalni izbornik
Za zaključavanje se postavljaju svi elementi liste okomito, obuhvaća cijelu širinu elementa spremnika, koji obuhvaća cijelu širinu bloka spremnika.
HTML oznake za horizontalnu navigaciju
Horizontalni izbornik koji se pojavljuje u sredini oznake može se dodatno postaviti u sredinu elementa ili
Ísnuê kílka načine za širenje njih vodoravno. Za cob, potrebno je ispustiti stilove preglednika za promocije za elemente navigacije:
Ul ( stil liste: nema; /*ukloni oznake popisa*/ margina: 0; /*ukloni gornju i donju marginu, jednako 1em*/ padding-left: 0; /*ukloni lijevu marginu, jednako 40px*/ ) a ( tekstualni ukras: nema; /*ukloni tekstualni ukras */)
Metoda 1. li (prikaz: inline;)
Robimo elementi list malimi. Kao rezultat toga, smrad se širi vodoravno, desna strana između njih se dodaje dodatni razmak koji iznosi 0,4em (računa se prema veličini fonta). Da biste koristili jogu, dodajte za li negativno desno polje li (margin-right: -4px;) . Dali smo stilski zahtjev za vlasnym tornjevima.
Metoda 2. li (float: lijevo;)
Popis Robimo elemenata pluta. Zbog toga se smrad širi vodoravno. Visina blok-kontejnera ul postavljena je na nulu. Da biste riješili ovaj problem, dodajte za ul (overflow: hidden;) , proširite ga i dopustite mu da preuzme plutajuće elemente. Za poruku dodajte (prikaz: blok;) i stilizirajte je za svoj bajan.
Opcija 3. li (prikaz: inline-block;)
Robimo elementi prikazuju blok redaka. Smrad luta vodoravno, s desne strane je razmak, kao prva kap. Za poruku dodajte (prikaz: blok;) i stilizirajte je za svoj bajan.
Metoda 4. ul (prikaz: flex;)
Robimo list ul s fleksibilnim spremnikom za dodatni model. Kao rezultat toga, stavke popisa su naslagane vodoravno. Dodaëmo poslati (prikaz: blok;) i stilizirati ga za svoj bajan.
1. Responzivni izbornik s učinkom pojačanja pri prelasku miša iznad poruke
@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; zaslon: inline-block; vertical-align:top; ) .menu-main li:last-child:after (sadržaj: nema;) .menu-main a (dekoracija teksta: nema; obitelj fontova: "Ubuntu Condensed", sans-serif; razmak između slova: 2px; položaj: relativan; padding-bottom: 20px; margina: 0 34px 0 30px; veličina fonta: 17px; text-transform: velika slova; prikaz: inline-block; prijelaz: boja .2s; ) .menu-main a, .menu-main a:visited (boja: #9d999d;) main a:hover(color: #feb386;) .menu-main a:prije, .menu-main a:after ( sadržaj: ""; položaj: apsolutna; visina: 4px; vrh: automatski; : -5px; lijevo: 50%; pozadina: #feb386; prijelaz: . 8s; ) .menu-main a:hover:before; hover:after, .menu-main .current:after (desno: 0; ) @media (max-width: 550px) ( .menu-main (padding-top: 0;) .menu-main li (display: block; ) .menu-main li:after (sadržaj: nema;) .menu-main a ( padding: 25px 0 20px; margin: 0 30px; )2. Responzivni izbornik za zabavnu stranicu
@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:prije, .top-menu:after ( sadržaj: ""; prikaz: blok; visina : 1px; border-top: 3px solid #575350; border-bottom: 1px solid #575350; margin-bottom: 2px; ) #575350;box-shadow: 0 2px 7px #ccc; margin-top: 2px; ) .menu-main (list-style: nema; padding: 0 30px; centar; položaj: relativan; ) .menu-main:before; ) ; . . (dekoracija teksta: nema; prikaz: inline-block; margina: 2px 5px; padding: 6px 15px; font-family: "PT Sans", sans-serif; veličina fonta: 16px; boja: #777777; obrub-dno : 1px čvrsta prozirna; n: .3s linearna; ) .menu-main .current, .menu-main a:hover ( border-radius: 3px; background: #f3ece1; color: #313131; text-shadow: 0 1px 0 #fff;@media (max-width: 500px) ( .menu-main li (display: block;) )3. Responsivan jelovnik s kapicama
@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: apsolutna; širina: 100%; visina: 20px; lijevo: 0; dolje: -20px; 255,255,255,0) 100%) 0 -10px; veličina pozadine: 20px 20px; pozadina-ponavljanje: ponavljanje-x; ) . nijedan; zaslon: inline-blok margina: 0 15px; padding: 10px 30px; obitelj fontova: "PT Sans Caption", sans-serif; -main a:prije, .menu-main a:after (sadržaj: ""; položaj: apsolutni; vrh: calc(50% - 3px); širina: 6px; visina: 6px; #F58262; neprozirnost: 0; prijelaz: .5s jednostavnost ulaska; ) . trenutno:prije, .glavni izbornik a.tekući najam: poslije, . ) @media(max-width:680px) ( .menu-main li (prikaz: blok;) )4. Responzivni izbornik na stranici
@import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .top-menu ( margina: 0 60px; položaj: relativna; pozadina: #5A394E; sjena okvira: umetnuti 1px 0 0 rgba(255,255,255,.1), umetnuti -1px 0 0 rgba(255,255,2) 0 150px -15 rgba(255,255,255,.12), umetnuti -150px 0 150px -150px rgba(255,255,255,.12); .top-menu:prije, .e z-index: 2; lijevo: 0; širina: 100% visina: 3px; ) .top-menu:before (gore: 0; menu:after (dole: 0; border-top: 1px isprekidana rgba(255,255,255,.2); ) .menu-main (list-style: nema; padding: 0; margina: 0; text-align: centar; ) .menu-main:prije, .menu-main:after (sadržaj: ""; položaj: apsolutna; širina: 50px; visina: 0; vrh: 8px; 5A394E; transformacija: rotate(360deg); z-index: -1; ) .menu-main:before (lijevo: -30px; main:after (desno: -30px; obrub desno: 12px čvrsti rgba(2 55, 255, 255, 0 ); ) .menu-main li ( display: inline-block; margin-right: -4px; ) .menu-main a (tekst-decoration: nema; display: inline-block; Sans Caption", sans-serif; boja : bijela; prijelaz: .3s linearna; ) .menu-main a.current, .menu-main a:hover @media (max-width: 680px) (.top-menu (margin: 0;) .menu-main li ( zaslon: blok; margin-desno: 0; ) .menu-main:prije, .menu-main:after (sadržaj: nema;) .menu-main a (prikaz: blok;) )5. Responzivni izbornik s logotipom u sredini
@import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu (pozicija: relativna; pozadina: rgba(34,34,34,.2); ) .menu-main (list-style: nema; margina: 0; padding: 0; ) .menu-main:after ( sadržaj: ""; prikaz: tablica; jasno: oboje; ) .lijeva-stavka (float: lijevo;) .desna-stavka (float: desno;) .navbar-logo (pozicija: apsolutna; lijevo: 50%; vrh : 50%; transform: translate(-50%,-50%); ) .menu-main a (tekst-decoration: nema; displayj: block; ; razmak između slova: 2px; font-family: "Arimo", sans -serif; font-weight: white; 0,0,.3);) @media (max-width: 830px) (.menu-main (padding-top: 90px; text-align: center;)). ; vrh: 10px; transformirati: translateX(-50%); ) .menu-main li (float: nema; display: inline-block; ) -size: 16px; ) ) @media (max-width: 630px) ( .menu-main li (display: block;)) )6. Responzivni izbornik sa logotipom Zliva
@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: "" .zaslon: stol; jasno: oboje; ) .navbar-logo (zaslon: inline-block;) . li (display: inline-block;) .menu-main a (tekst-decoration: none; display: block; : 2px; font-family: "Arimo", sans-serif; font-weight: bold; color: #F73E24 ;prijelaz:.3slinearno; ) . visina: 9px;pozadina:#F73E24;položaj: apsolutna;lijevo:50%;transform: rotate(45deg) translateX(6.5px);opacity:0;prijelaz:.3s linearno; (prozirnost: 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:be fore (transform: rotate(45deg) translateX(-6px);) ) @media (max-width: 600px) ( .menu-main li (zaslon: blok;) )Vitannia. Već dugo nisam napisao post o html/css-u. Nakon što je nedavno počeo s izmišljanjem novog izgleda i u procesu korištenja cicavia priyom, što vam omogućuje da proširite izbornik gumovim (prije novog možete dodati nove stavke i proširenje se neće povećavati, ali ćete biti 100% Batkiv blok). Također implementirano danas na css gum izborniku.
Kome je stalo da pročita članak, može se načuditi videu. Autor također sve jako lijepo objašnjava:
Guma meni na CSS - krok 1
Prvi Croc - Tse Zavzhdi html izgled kuda bez nje. Ale, u našoj vipadki sve će biti jednostavno:
Sve je bilo jasno, os je za mene sljedeći kod:
Gledajući sve je standardno, os je ovakva:
Sada sve dovodimo u traženi prikaz, CSS se uzima za robota.
Krok 2 - osnovni stilovi
Zatim ću dodati stilove bloku obgortsa. A za sebe ću postaviti maksimalnu širinu na 600 piksela (samo da ručno zgrabim snimku zaslona, tako da se izbornik uklapa), a također ću centrirati blok.
zamotati (
pozadina: #fff;
maksimalna širina: 600px
margina: 0 auto;
}
Krok 3 - realistički humanizam
Sada na sam jelovnik. Iz novog (iz oznake ul) maknut ću markere, povećati linearni gradijent pozadine i, što je najvažnije, postaviti display: table-row power na spremnik da se izbornik ponaša kao red tablice. Važno je podići za udaljene manipulacije.
R-izbornik(
pozadina: linearni gradijent (udesno, #b0d4e3 0%, #88bacf 100%);
prikaz:tablica-red;
stil liste: nema;
}
Yak bachite, šifra smjernica je prekrižena s brkovima, o čemu sam pisao. Kad smo kod toga, ručno generirajte gradijente pomoću alata Ultimate CSS Gradient Generator. Napisat ću više o novom.
R-izbornik li(
vertikalno poravnati: dno;
display:table-cell;
širina: auto;
poravnavanje teksta: središte;
visina: 50px;
border-right: 1px solid #222;
}
Dok jelovnik izgleda neupadljivo, ali ništa, došao je čas da se Yogo dovede u kit. 
Ostanite, što vam je potrebno, - postavite stilove za srednje odlomke. Evo imam ovaj kod:
R-izbornik li a (
tekst-dekoracija: nema;
širina: 1000px
visina: 50px;
okomito poravnanje: sredina;
display:table-cell;
boja: #fff;
font: normalan 14px Verdana;
}
Í os sada izbornik izgleda ovako:
Pa, reći ću vam, objasnit ću retke:
Krok 4 (iza tornjeva) može se dodati interaktivnost
Na primjer, za promjenu boje stavke izbornika pri lebdenju. Realizuêtsya tse jednostavnije, za pomoć pseudo-klase.
R-izbornik li: lebdjeti (
boja pozadine: #6bba70;
}
Testiranje jelovnika na gustoću
U stvari, jelovnik je spreman, ali nismo pretjerano provjerili ono najgluplje - pjevušit ćemo, kao što sam vam rekao. Pa, na jelovnik ću dodati još 2 stavke:
Izbornik je izgubio granicu od 600 piksela. Ostale točke samo stisnute, tako da su postavljene 2 nove.
Dodat ću još 1 točku:
Samo tako, meni se malo promijenio i druga stavka se čini sasvim normalna. A yakby nije imao moć vertikalnog poravnanja: dno, što se tiče jaka, rekao sam vam, jelovnik bi izgledao bolje.
Promijenit ću jelovnik na tri točke.
Stavke su postale bogatije, ali se sam izbornik nije mijenjao u širini. Axis mi i zrobili 100% guma menu!
Kako prilagoditi jogu?
U principu, budući da blok omota postavljate ne na fiksnu, već na maksimalnu širinu, onda ga nije potrebno prilagođavati. Moja preferencija je postaviti snagu na max-width: 600px i ako je širina manja od 600 piksela, blok će jednostavno promijeniti veličinu kako bi pratio zaslon, sprječavajući horizontalno pomicanje.
Pa, ako želite nešto promijeniti ili promijeniti jelovnik na pokretne gospodarske zgrade ali na širokim ekranima, onda će vam mediji pomoći! Sretno s web stranicom!
Nastavljamo seriju s lekcijom o dodjeli izbornika onome što vidite. Na vodoravnom izborniku, ono što vidite, na css-u vlastitim rukama.
Yakshcho si pio ovdje u vipadkovu ili si se šalio o provedbi jelovnika, što vidiš, raja idi u podružnicu Batkivsky.
Svaki odjeljak će imati opis horizontalnog izbornika koji se pojavljuje u CSS-u i HTML-u.
Bočna navigacija:
ja tako Naš zadatak:
robiti horizontalni izbornik css popis (na ul li listama) bez jQuery wiki taj Javascript, kao i bez zastosuvannya tablice
kod koda.
Horizontalni izbornik koji vidite
Mi smo ispred, prije nego počnemo pisati kod, moramo raditi html predložak za jelovnik.
U vezi s tim, želimo napraviti univerzalni izbornik, želim ga učiniti što sličnijim izgledu WordPress izbornika. Po mom mišljenju, ovo je jedan od najjednostavnijih i univerzalnih kodova Html izbornika. izgleda ovako:
Kao što možete vidjeti iz koda, naš izbornik, koji možete vidjeti, bit će implementiran na ul i li liste. Axis izgleda ovako izbornik bez CSS stilova:
Recimo samo, gledajući ravno naprijed, kao sjajan popis. Dali su nam potrebu da jelovnik ukrasimo dodatnim CSS stilovima.
Horizontalni izbornik koji pada na CSS
CSS stilovi za izbornik, ono što je vidljivo, i ne samo - zapravo je potrebno više. Kartica starosti, koju vidite, bori se na temelju pseudo-klase: lebdjeti.
Za vodoravni izbornik koji vidite, potrebna nam je os poput ove:
#menu1( position:relative; display:block; width:100%; height:auto; z-index:10; ) #menu1 ul( position:relative; display:block; margin:0px; padding:0px; width:100 %;height:auto;list-style:none;background:#F3A601; menu1 ul li( position:relative; display:block; float:left; width:auto; height:auto; ) #menu1 ul li a( display: blok; padding:9px 25px 0px 25px; font-size:14px; font-family:Arial, sans-serif;color:#ffffef;line-height:1.3em;text-decoration:none;font-weight:bold;text -transform:uppercase;height:36px;box-sizing:border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( background:#EBBD5B; boja:#2B45E0; )
Ovo nije kraj, već samo dio CSS-a za glavni horizontalni izbornik. Napišimo stilove za popis izbornika:
#menu1 ul li ul ( position:apsolute; top:36px; lijevo:0px; display:none; width:200px; background:#EBBD5B; ) #menu1 ul li:hover ul(display:block;) lebdeći mehanizam*/ # menu1 ul li ul li( float:none; width:100%; ) #menu1 ul li ul li(display:block; text-transform:none; height:auto; 100% box-sizing:border-box;border-top :1px solid #ffffff; ) #menu1 background:#FDDC96; boja:#6572BC;
Os je sada u. Sam mehanizam pada realizacija je u jednom redu.
Pogledajte skin iz menija:
Riža. 2 (horizontalni izbornik, ono što vidite)
Ispod je demo pregled robotskog padajućeg izbornika, kao i zahtjev za najam za odmor. (Demo će se igrati na vrhu srednje strane, ne morate pritisnuti otvori u novom prozoru 🙂 ili ima puno medvjeda)
Horizontalni izbornik koji pada cijelom širinom
Većina vas mi može reći manje, nakon što sam rekao takve jelovnike, kao da sam pokazao više, precijenit ću se iz prošlosti i na neki način sudjelovati u vašem obroku maête, ako želim pisati svježe izglede s takvim jelovnicima.
Pretpostavljam da ste iskoristili guzu. Html ostaje nepromijenjen, a opet se sjećamo CSS osi. Možete jednostavno uzeti CSS kod odavde i zalijepiti ga u zadnjicu, ili ga možete vidjeti u demo modu kako radi.
#conteiner( width:1000px; height:auto; margin:0px auto; padding-top:10px; ) #menu1( position:relative; display:block; width:100%; height:auto; z-index:10; ) #menu1 ul( position:relative; display:block; margin:0px; padding:0px; width:100%; height:auto; list-style:none; background:#F3A601; ) #menu1 > ul( text-align: justify; font-size:1px; line-height:1px; ) #menu1 > ul::after( display:inline-block; width:100%; visina:0px; :relative; display:inline-block;width:auto ;height:auto;vertical-align:top;text-align:left; ) #menu1 ul li a( display:block; :14px;font-family:Arial, sans-serif;color:#ffffef;line-height: 1.3em;text-decoration:none;font-weight:bold;text-transform:uppercase; :border-box; ) #menu1 ul li > a:hover; :0px; prikaz: nema; širina:auto; pozadina:#EBBD5B; white-space:nowrap; ) #menu1 ul li:last-child ul(/*posljednja stavka bit će zalijepljena desno*/ lijevo:auto; desno:0px; ) padajući izbornik*/ #menu1 ul li ul li(display:block; width:auto; ) #menu1 ul li ul li(display:block; text-transform:none; height:auto; box-sizing:border-box;border-top:1px solid #ffffff;) #menu1 #FDDC96; boja:#6572BC;
Također, ova guza izgleda kao prvi put, da se meni, koji padaš, sama kap, proteže u ugaru, od širine svih stavki izbornika.
Za ostale stavke izbornika ova opcija možda neće biti prikladnija jer će smrad biti izvan granica. Da biste dobili struju, dovoljno je znati snagu "white-space:nowrap;" selektor #menu1 ul li ul i ima jogu.
U nastavku možete pogledati demo ili vidjeti prikaz horizontalnog izbornika:
Bez trgovaca jelovnik izgleda ovako. Proširenja u html-u možete dodati ručno, ali ako imate CMS, na primjer WordPress, onda tamo ne možete ručno dodati.
Horizontalni jelovnik s trgovcima
Postoje deseci opcija, kao na čisti CSS dodajte muža (rozdílyuvach) između stavki izbornika. Opcije, poput uvijanja::prije ili::poslije, inače neću duplicirati obrub-lijevo, obrub-desno.
Postoje situacije, ako je izgled toliko divan da ne možete bez jqueryja.
Imamo puno html koda, samo ga povezujemo sa jQuery bibliotekom na kob, tu datoteku, koja je pobjednička:
Jednom davno.
Kao što razumijete, potrebno je stvoriti datoteku script-menu-3.js i ubaci ovaj mali kod:
$(document).ready(function()( $("#menu1 > ul > li:not(:last-child)").after(" "); ));
CSS stilove za takav izbornik treba izostaviti, što jest, + bacite os ovog komada do kraja:
#menu1 ul li.razd(visina:28px; širina:1px; background:#ffffff; margin-top:4px; )
Da biste pogledali takav horizontalni izbornik s opcijama na jQueryju, os će biti ovakva:
Možete pogledati demo ili uzeti predložak horizontalnog izbornika u nastavku:
Prednosti takvog rješenja su:
Horizontalno Baghatorivneve CSS+HTML izbornik
S obzirom da se radilo o bugatorivne, izbornik nestaje kada se lebdi iznad, pojedinačno ih podijeliti u podgrupe:
U svojim zadnjicama pokazujem bagatorivneve jelovnik CSS za 3 jednaka, mislim da neće biti teško shvatiti što treba učiniti.
Bagatorivneve meni s prečacem u knjizi kada lebdite
Za klip, trebamo malo dotjerati naš html. Tamo ćete dobiti nekoliko redaka za 3. red:
#conteiner( width:1000px; height:auto; margin:0px auto; padding-top:10px; ) #menu1( position:relative; display:block; width:100%; height:auto; z-index:10; ) #menu1 ul( position:relative; display:block; margin:0px; padding:0px; width:100%; height:auto; list-style:none; background:#F3A601; ) #menu1 > ul( text-align: justify; font-size:1px; line-height:1px; ) #menu1 > ul::after( display:inline-block; width:100%; visina:0px; :relative; display:inline-block;width:auto ;height:auto;vertical-align:top;text-align:left;) #menu1 ul li.razd(visina:28px; width:1px; background:#ffffff; margin-top:4px; ) #menu1 ul li a ( display:block; padding:9px 45px 0px 45px; em;text-decoration:none;font-weight:bold;text-transform:uppercase;height:36px;box-sizing:border-box;) #menu1 ul li ( pozadina: #EBBD5B; boja:#2B45E0; ) #menu1 ul li ul( position:apsolute; top:36px; lijevo:0px; display:none; width:auto; background:#EBBD5B; white-space:nowrap; ) # menu1 > ul > li:last-child > ul(/*posljednja stavka bit će prilozi na desnom rubu*/ lijevo:auto; desno:0px; ) #menu1 ul li:hover > ul(display:block;)/*ova linija implementira mehanizam lebdenja*/ #menu1 ul li ul li( display:block; width:auto; ) #menu1 ul li ul li a( display : block; text-transform:none; height:auto; padding:7px 45px; width:100%; box-sizing:border-box Border-top: 1px solid #ffffff; ) a( background:#FDDC96; color:# 6572BC ; ) #menu1 ul li ul li ul( top:0px; > ul ul(lijevo:auto; desno:100%;) #menu1
Datoteke za jQuery se kopiraju kao da su s prednje strane. Vyrishiv izostaviti trgovce, tako da je jelovnik izgledao malo bolje. Možete, naravno, i bez njih.
Os je izgledala ovako:
Napravio sam 2 skina u jednom, da pokažem kako izgledam dešnjak i u sredini.
U nastavku možete vidjeti demo i preuzeti dionice:
Bogati izbornik koji se pojavljuje s padajućim izbornikom za spajanje kada zadržite pokazivač miša
Trochovo ulje nije uključeno u naslov, ali smut šifra.
Bit ove zadnjice je stvaranje horizontalnog menija koji pada na punu širinu pada na punu širinu + bogatstvo.
Neću mijenjati html kod, možete ga uzeti s prednje strane. Razdílyuvachi na jQueryju također je preopterećen.
Iznova mijenjajte samo CSS:
#conteiner( width:1000px; height:auto; margin:0px auto; padding-top:10px; ) #menu1( position:relative; display:block; width:100%; height:auto; z-index:10; ) #menu1 ul( position:relative; display:block; margin:0px; padding:0px; width:100%; height:auto; list-style:none; background:#F3A601; ) #menu1 > ul( text-align: justify; font-size:1px; line-height:1px; ) #menu1 > ul::after( display:inline-block; width:100%; visina:0px; :relative; display:inline-block;width:auto ;height:auto;vertical-align:top;text-align:left; ) #menu1 > ul > li(position:static;) :28px;width:1px;background:#ffffff;margin-top:4px;) # menu1 ul li a(display:block;padding:9px 45px serif; color:#ffffef;line-height:1.3em;text-decoration:none;font-weight:bold;text-transform:uppercase;height:36px; a :hover, #menu1 ul li:hover > a( background:#EBBD5B; color:#2B45E0; ) #menu1 ul li ul( position:apsolute; top:36px; lijevo:0px; display:none; width:100%; background:#EBBD5B; ) #menu1 > ul > li > ul::after( clear:both; float: n jedan; širina:100%; visina:0px; sadržaj:" "; ) #menu1 :block; širina:30%; float:lijevo; ) #menu1 ul li ul li a( display:block; -box ; color:#6572BC; ; block;float:none;width:100%;) #menu1
Os izbornika će izgledati ovako: Jedini trenutak - stranica može imati dovoljno prostora, tako da nema mjesta za ekstremnu točku s desne strane. Ovaj problem se može riješiti kroz: n-to dijete, ali neću graditi grad.
Pogledajte demo vodoravne trake izbornika:
Kao što se možete sjetiti: donja ploča također je pune širine. Os je tako sramežljiva da padne na papalinu blokova.
Ja sam za to, siguran sam, želim jednu svoju guzicu za tebe. Hvala na postovanju.
Tse donose melankoliju i í̈m, i mene 🙂.Ako ste dobro pročitali post, ali ne znate kako napraviti svoj horizontalni izbornik, ono što možete vidjeti na css-u, postavite hranu u komentarima ili brzo pretražite stranicu.
Dakle, raja vidi očevu stranu https://website/vypadayushhee-menu/, odabrani su svi primijenjeni i različiti izbornici.
Za proširenje sheme izgleda izbornika za web-mjesto, ako spremnik s njega zauzima cijelu širinu, dostupan je sa strane. Pri tome, prva točka leži na lijevom rubu, a preostala - na desnoj strani i stoji između elemenata ruba. Danas ćemo vam reći kako se boriti.
Predlažemo vam početak implementacije jelovnik guma na Pomozite CSS-u za vaš resurs. Za ovaj izbornik stavke su smještene u jednom redu. Javascript nije dostupan. U izborniku će biti mjesta za sjajan popis. Glavni lik takvog jelovnika je svestranost, jer se očituje u činjenici da je to broj, pa čak i dozhina punkcija može biti.
Kako implementirati?
Programer kože može predložiti svoj način ostvarivanja postavljenog zadatka. Položiti sve u svjetlu svoje mašte, jednako profesionalnosti i zdibnosti. Najšira verzija problema je tablica varijanti. Bogat je i za nekoga tko je pozvao da ubrza JavaScript. Quiet, koji je pozvao da ubrza snagu za prikaz vrijednosti stol ili ćelija stola- Požurit ću se osramotiti. Ova metoda ne može biti dovoljno kompatibilna s različitim preglednicima.
Naše rješenje
Naš prijedlog će se temeljiti na dubokom poznavanju HTML5 i CSS3.
Bit procesa je moć poravnanja teksta kako bi se opravdale vrijednosti. Za one koji zaborave, pretpostavljam: autoritet orijentira tekst na punu širinu spremnika.
Uz izbor naše odluke, možemo dodati dva obov'yazykovyh pravila. Prva stvar je da širina spremnika za stavku izbornika može biti manji, niži tekst. Tobto ne u jednom redu. Drugo važno pravilo je da se riječi izvlače jednako, bez obzira jedna na drugu, do jedne točke smrada da lažu.
Ispod je prikaz koda, koji je temelj stvaranja "hum" izbornika:
HTML
< ul> < li>< a href= "#" >Golovna < li>< a href= "#" >Blog < li>< a href= "#" >Novini < li>< a href= "#" >popularniji < li>< a href= "#" >Novi
ul (poravnanje teksta: opravdati; preljev: skriveno; /* postavi bočnu injekciju na metodu */ visina: 20px; /* tezh usuvaê zayve */ kursor: zadano; /* postaviti oblik cob na kursor */ margina: 50px 100px 0 100px; pozadina: #eee; padding: 5px ) li (zaslon: inline; /* opljačkati stavke izbornika s tekstom */) li a (prikaz: inline-block; /* postavljanje proširenja linije izbornika */ boja: #444; ) a: lebdjeti (boja: #ff0000; ) ul: nakon ( /* oblikovanje drugog reda za metodu obrade */ sadržaj: "1"; margin-lijevo: 100% visina: 1px; prelijevanje: skriveno; zaslon: inline-blok )
Za rad u dobrom starom Internet Exploreru morate 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 registrirali potrebne vrijednosti vlasti i koda, uzimamo os takvog izbornika:
Nedostaci metode
Koji preglednici rade?
Tablete
6.0+ 6.0+ 10.5+ 5.0+ 3.6+ - -
