Hajde da implementiramo našu ideju koristeći najobičnije CSS. U sljedećem članku, ako se sjetim, opisat ću isti efekat korištenja jQuery. Ali za sada, počnimo s analizom ove metode. Ali prvo, predlažem da pogledate šta se na kraju dešava:
Prije svega, hajde da napišemo HTML kod našeg menija. Meni će biti jednostavan. Na primjer, imat će 2 stavke, od kojih će svaka imati padajuću listu s podstavkama.
Mislim da je ovde sve jasno, najjednostavniji meni na 2 nivoa. Kao što sam rekao, meni ima dvije glavne stavke, možete dodati koliko želite ako je potrebno. Onda samo trebate dodati stilove koji će učiniti svu magiju :)
#slow_nav > ul( width: 500px; margin:25px auto 0; ) #slow_nav > ul > li(list-style: none; display: inline-block; position:relative; padding:0; ) #slow_nav a(text- decoration:none;) #slow_nav > ul > li > a( font-size:18px; padding:5px; background-color:#333; color:#fff; ) #slow_nav li ul( position:apsolute; list-style: bez teksta: font-size: 0.4s -moz-transition:max-height 0.4s linear /* end */ ) #slow_nav li:hover ul( max-height :300px; ) #slow_nav li ul li( background-color:#333; border-bottom:); 1px solid #888 ) #slow_nav li ul li:last-child( border-bottom:none; ) #slow_nav li ul li a (padding:5px 12px; color:#fff; display:block; ) #slow_nav li ul li a :hover( background-color:#444; ) #slow_nav li ul li:first-child( margin-top:25px; pozicija: relativna; ) #slow_nav li ul li:first-child:before( content:""; position:apsolute; width:1px; height:1px; border:5px solid transparent; border-bottom-color:#333; left:10px; top :-10px )
CSS kod nije mali, ali nije inherentno složen. Ako imate vještine oblikovanja, lako možete shvatiti šta i kako. Istaknuću samo neke važne tačke.
Prva stvar je sama animacija. Potrebni kod je istaknut u komentarima u kodu - /* Ove linije su potrebne za ispravan rad animacije */. Ne možete izbrisati iz, inače će animacija prestati raditi. U ovom dijelu koda inicijalno smo postavili visinu na nula piksela -
max-visina:0px; i postavite svojstvo overflow:hidden; da sakrijemo naš podređeni meni, odnosno padajući meni. Zatim postavljamo svojstvo unakrsnog pregledača tranzicija, koji će izvesti animaciju.
Webkit-transition:max-height 0.4s linearno; -moz-transition:max-height 0.4s linearno; prijelaz: maks. visina 0,4 s linearno;
Ovdje možete samo promijeniti vrijeme animacije. Vrijeme je trenutno postavljeno na 0,4 sekunde. Odmah nakon postavljanja animacije, dodano je svojstvo za postavljanje nove visine kada se lebdi iznad stavki glavnog menija:
#slow_nav li:hover ul(max-height:300px; )
Evo slike. Visina je postavljena na fiksni maksimum, ako je visina vašeg padajućeg menija veća, promijenite vrijednost na veću. U suprotnom, vaš meni će biti izrezan na 300 piksela u visinu.
Ova metoda se može primijeniti ne samo na menije koji sami pišu, već i na iste dinamičke menije koje kreiraju sistemi za upravljanje sadržajem, npr. WordPress. Da biste to učinili, morate malo dotjerati stilove i to je to. Odnosno, ne morate koristiti prvi HTML kod, već samo stilove. U stilovima trebate zamijeniti ID ime #slow_nav onim što imate, i možda podesiti neke druge sitnice. Neću ulaziti u detalje. Svaki slučaj zahteva lični pristup, pa izvinite :) Ja sam dao ideju i metod, a na vama je da odlučite da li ćete to koristiti ili ne.
To je sve, hvala na pažnji. 🙂
Pozdrav! Ako ste početnik dizajner izgleda, prije ili kasnije ćete se suočiti s činjenicom da želite nekako oživjeti svoje stranice, učiniti ih barem malo interaktivnim. Ovdje vam CSS animacije mogu pomoći na najbolji mogući način. Ali morate znati gdje i kako ih koristiti.
Danas ću vam reći kako napraviti padajući meni na praznoCSS I kako mu dodati glatkoću koristeći CSS animaciju. Ako ne znate, onda je vrijeme da se upoznate s osnovama.
Layout meni HTML + CSS
Prvo, da bismo imali s čime raditi, napravimo jednostavan meni na jednom nivou. Nemojmo se previše zamarati dizajnom radi jasnoće, ovo će biti dovoljno:
Šta imamo? Najobičnija nenumerisana lista sa identifikatorom “top_menu” i sa linkovima umotanim u elemente same ove liste. Sve je banalno i jednostavno. Stavke menija menjaju boju kada pređete preko... svi to već znate i razumete kako se to radi (nadam se).
Dodavanje menija drugog nivoa
Da bismo napravili meni na više nivoa, moramo da dodamo drugu nenumerisanu listu unutar prve. Mislim da ste prošli kroz ovo negdje na početnim časovima. I takođe činjenica da ga treba umetnuti ne samo unutar naše liste, već upravo unutar elementa liste, odnosno oznake “ li", odmah nakon završne oznake "a".
Pozicioniramo ugniježđene liste apsolutno u odnosu na " li“, u koji su ugrađeni. I sve " li» gornji nivo je pozicioniran u odnosu na ( relativno). Da bi se padajući meni nalazio ODMAH iza našeg menija najvišeg nivoa, on (padajući meni – “ inner_menu" mora biti naveden
Pozicija: apsolutna; vrh: 100%;
Odnosno, pomak od gornje granice nadređenog bit će jednak visini roditelja. Veoma logično, po mom mišljenju.
Pored pozicioniranja, morate stilizirati padajući meni kao meni najvišeg nivoa. Jabuka sa stabla jabuke, kako se kaže...
Kao što vidite, naš padajući meni još ne izgleda kao padajući, već je ispao i visi. Ali u redu je, uskoro ćemo to popraviti.
Kako napraviti padajući meni zaista padajućim izbornikom
Ništa lakše! Da bi naša ugniježđena lista bila padajući meni, samo je trebate sakriti! A zatim se otvara samo kada se kursor miša pomeri preko stavke menija najvišeg nivoa, koja sadrži padajući meni. Možda zvuči malo komplikovano, ali u stvari se može riješiti u samo nekoliko linija koda.
Dodajte na padajući meni:
Prikaz: nema;
A da biste ga prikazali, trebate napisati:
#top_menu > li:hover > ul (prikaz: blok; )
Šta nam poručuje cijela gomila selektora? Čitamo od kraja. Postavljamo stilove (vidljivost) za listu drugog nivoa, koja se nalazi unutar elementa liste prvog nivoa, ali ovi stilovi će raditi samo ako pređemo mišem iznad elementa “li" koji sadrži našu listu drugog nivoa.
Nadam se da sam bio jasan. Ako ne, pokušajte ga pročitati nekoliko puta. Još bolje, samo to shvatite gledajući kod. Da vidimo šta smo dobili:
Da, izgleda da smo postigli ono što smo hteli - napravili smo padajući meni, pravi padajući meni, jebote! Ali nešto mu nedostaje. Znaš šta? Smoothness! Uostalom, sve izgleda kao da meni ne ispada, već se jednostavno pojavljuje. I vrlo oštro, čak i trenutno, rekao bih.
Pa, hajde da napravimo još malo magije na njemu.
Glatki padajući meni je olakšan
Pa hajde da napravimo glatki padajući meni koristeći čisti CSS. Zašto ovo radiš? Jer ljudi vole kada je sve glatko i mekano... i izgleda prelepo. To će biti plus za upotrebljivost vaše stranice. Idemo!
Zapamtite, možete animirati samo tačne matematičke vrijednosti, kao što su 50px i 300px, 0 i 100%, 0,5 i 1,0 i tako dalje. U našem slučaju, nećemo moći animirati dva stanja našeg padajućeg menija ( display:none; I display:block;).
Ali možemo ih zamijeniti transparentnošću - opacity:0 i opacity:1. I podesite vrijeme tokom kojeg će se naš meni pojaviti iz transparentnog stanja. Da, zaista će raditi, ali to nije baš efekat koji ste očekivali. Pa hajde da to malo zakomplikujemo. Ali vredi, verujte mi.
Da bismo animaciju učinili glatkijom i predvidljivijom, morali smo postaviti fiksnu visinu za stavke padajućeg menija, iako smo mogli i bez ovoga. Postoji mnogo metoda, samo smislite kombinacije i riješite probleme.
Kao što možete vidjeti iz koda, animirali smo visinu elemenata padajuće liste i njihovu transparentnost. Ovo je bilo dovoljno za stvaranje prelepe, glatke animacije padajućeg menija.
Šta nam je trebalo za animaciju? Dva stanja naših stavki menija, kao i svojstvo tranzicije, koje je interpoliralo ova stanja, odnosno popunilo sve međuvrijednosti u zadanom vremenskom periodu. To je sve!
To bi moglo biti još lakše uraditi koristeći jQuery, ali smo prvo naveli da ćemo danas raditi sa čistim CSS-om. Mogli biste to učiniti još ljepšim dodavanjem Bezierovih krivulja u animacije, ali ova tema je malo izvan dosega današnjice. Ali na to ćemo se svakako vratiti kasnije.
zaključak:
Sada možete pokazati svojim prijateljima i porodici da znate kako napraviti padajući meni u čistom CSS-u. Ovo je zaista korisna vještina koja će vam dobro doći više puta. Pa, prosudite sami, koliko ste sajtova videli sa statičnim menijem? Ne, većina web lokacija ima padajući meni.
Inače, ovo je bila moja prva lekcija iz CSS-a. Opišite kako vam se sviđa? Da li ste sve jasno objasnili ili treba detaljnije? I vrijedi li uopće nastaviti pisati članke na temu lajf hakova u CSS-u?
Hvala na pažnji i vidimo se uskoro!
Jeste li pročitali do samog kraja?
Je li ovaj članak bio od pomoći?
Ne baš
Šta vam se tačno nije dopalo? Je li članak bio nepotpun ili lažan?
Pišite u komentarima i obećavamo da ćemo se poboljšati!
Odavno sam želio napisati članak o tome kako napraviti podmeni u CSS-u. Mnogi ljudi to rade na JQuery i ispada sasvim dobro, međutim, čitav osnovni princip stvaranja podmeni u CSS-u Navest ću to ovdje. A onda, počevši od ove baze, možete dodatno poboljšati podmeni.
Doneću ga odmah CSS kod:
* html ulli (
float: lijevo;
}
* html ulli a (
visina: 1%;
}
ul (
border-bottom: 1px solid #000;
stil liste: nijedan;
margina: 0;
padding: 0;
širina: 100px;
}
ulli (
položaj: relativan;
}
ulli a (
displej: blok;
granica: 1px čvrsta #000;
border-bottom: 1px;
padding: 5px;
tekst-dekoracija: nema;
}
li ul (
prikaz: nema;
lijevo: 99px;
pozicija: apsolutna;
vrh: 0;
}
li:hover ul (
displej: blok;
}
Ovdje je najvažniji selektor" li:hover ul". Zapravo, prikazuje sadržaj menija. Podrazumevano, to " prikaz: nema", a kada zadržite pokazivač iznad stavke menija, podmeni postaje: " displej: blok", odnosno vidljivo. Ovo je najvažnije. I u prva dva selektora (koji sa * ) dolazi CSS hack Za I.E., inače ništa neće raditi u ovom pretraživaču bez njega. Sve ostalo je izgled, koji se, naravno, može mijenjati.
Donosim i HTML kod:
Dom
Meni 1
Podmeni 1
Podmeni 2
Podmeni 3
Meni 2
Podmeni4
Podmeni 5
Podmeni 6
Podmeni7
Podmeni 8
Ako pažljivo razmislite o ovoj strukturi, sve postaje vrlo jasno. Tag ul- kreira meni. Ako ul je unutar drugog ul, onda je ovo već podmeni. Oznaka li je odgovoran za određenu stavku menija.
Naravno, meni je najjednostavniji, kako u smislu logike i strukture, tako i u smislu dizajna. Naravno, možete koristiti JQuery napraviti glatko otvaranje. Također možete promijeniti dizajn, ali cijeli princip će ostati isti kao u ovom podmeni napisan u CSS i HTML-u.
Zdravo svima. Danas ćemo nastaviti našu temu o padajućim menijima i razgovarati o tome kako to učiniti. Kao i obično, za svaki primjer će biti dostupan demo način pregleda, kao i datoteke za preuzimanje.
Ako ste slučajno došli na ovu stranicu ili ste tražili drugu, savjetujem vam da slijedite link, postoji mnogo različitih menija za stranicu prikupljenih tamo.
Postoji dosta vertikalnih menija za web sajtove, u ovom tutorijalu ću vam pokazati samo vertikalni padajući meni na CSS-u pri lebdenju sa padajućim menijem desno i levo, 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 ćemo prestupiti.
Navigacija stranice:
Kao uvod, mislim da je vrijedno reći kako napuštanja rade u CSS-u.
Svi pretraživači koji rade sa računara ili laptopa imaju dostupno svojstvo CSS :hover(Malo sam u krivu, ovo je pseudo-klasa :) na osnovu koje možete napraviti skoro svaki vertikalni padajući meni.
Ali šta raditi sa mobilnim pretraživačima? - ili na tabletima pitate.
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. Zahvaljujući ovim naporima, 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 se djelimično poboljšavaju.
Vertikalni padajući meni sa desne strane
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 za liste, opcija odgovora je identična onome što wordpress vraća.
Html za vertikalni meni
Mislim da u smislu razumijevanja html-a nećete imati poteškoća, tipične liste sa ul i li tagovima. Pogledajmo kod:
Meni za web lokaciju zasnovan na listama: neke stavke imaju padajuće blokove, neke ne. Sve je krajnje jednostavno, mislim da nije potrebno objašnjenje.
Vertikalni padajući meni CSS
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-size:13px font-weight:10px 15px solid 236A92 ) #menuVertical ul:0px; ;) #menuVertical ul li a:hover, #menuVertical ul li:hover a( background:#0A3CC1; ) #menuVertical ul li ul( position:absolute; top:0px; lijevo:100%; display:none; width:auto ) /********** prikaži padajući meni pri lebdenju********/ #menuVertical ul li: lebdeći 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; )
Evo ove linije CSS-a
#menuVertical ul li:hover ul(display:block;)
Odgovoran za ispadanje. Prikazuje padajući blok 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 vertikalni css padajući meni radi u demo modu ispod, ili preuzimanjem primjera:
Evo jednostavnog primjera padajućeg menija koji sam smislio.
Recimo da morate da napravite padajući meni kada lebdite sa levim padajućim menijem. Na osnovu primjera pada udesno, sada ćemo ga implementirati.
Lijevi vertikalni padajući meni u CSS-u
Ostavljamo HTML kod isti, nema smisla mijenjati ga. Osim u samom primjeru, morat ću zamijeniti lijevi i desni blok, radi jasnoće primjera. (vidjet ćete preuzimanjem primjera na kraju)
CSS stilovi će se malo razlikovati, iako ne dramatično. U mom jednostavnom primjeru, dovoljno je ispraviti jednu vrijednost. Označiću ga u komentarima.
Za složenije menije, morat ćete napraviti još nekoliko izmjena. Pogledajmo 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-size:13px font-weight:10px 15px solid 236A92 ) #menuVertical ul:0px; ;) #menuVertical ul li a:hover, #menuVertical ul li:hover a( background:#0A3CC1; ) #menuVertical ul li ul( position:absolute; top:0px; desno:100%;/*promijenjeno ovdje*/ display :none ) /********** 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. Završili smo sa ovim menijem. S lijeve strane je skin na koji se može kliknuti, s desne strane je demo i link za preuzimanje primjera:
Vertikalni višeslojni meni
U stvarnom životu, vertikalni meniji na više nivoa koji padaju pri lebdenju su prilično rijetki. Htio sam pokazati par primjera iz svoje zalihe, ali ih nažalost nisam mogao pronaći. moracu 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 imati 3 padajuća podmenija, tako da će html kod biti ovakav:
Pazite, samo treća stavka menija ima padajući meni na više nivoa, ostalo nisam uradio da ne bih zatrpao HTML, a ima ga 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-size:13px font-weight:10px 15px solid 236A92 ) #menuVertical ul >li:first-child; :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 padajućeg menija na više nivoa na desnoj strani kada lebdite. Opcija sa padom ulijevo bit će malo dalje. Pogledajmo ispod šta smo dobili na slici (kož koji se može kliknuti).
Može se kreirati bez JavaScripta i/ili jQueryja. Da biste ga kreirali, koristite CSS svojstva display, padding, pseudo-class:hover. Moguć je radni meni (kliknite na „Računak“ ako želite da dizajnirate HTML meni na svoj način). Dužina videa ~12 min. Napomena je namijenjena početnicima layout dizajnerima i web programerima koji poduzimaju prve korake da nauče osnove HTML-a i CSS-a; za one koji su studirali kurs “Osnove HTML5 i CSS3”.
Kreiranje jednostavnog padajućeg menija
Za kreiranje menija stranica obično koristi blok strukturu HTML navigacijski element I nenumerisana lista. U jednu od stavki liste, druga lista je ugrađena tako da nije uključena u hipervezu. Bilo bi moguće postaviti ul unutar a, ali po mom mišljenju to nije baš dobra ideja, jer pseudo-class:hover radi i sa li elementima!
U našem slučaju ne razmatramo opciju kada padajuće liste Postoje i ugniježđene liste - ovaj zadatak sam po sebi nije težak, ali će uzrokovati poteškoće početniku dizajneru izgleda. Takođe imajte na umu da se konstruisanje menija može uraditi pronalaženjem ili pisanjem odgovarajućeg JavaScript-a.
Radi praktičnosti rada sa markupom (odjednom ćemo naići na drugu navigaciju), dodaćemo CSS klasu našem strukturnom elementu za navigaciju; Napravićemo stubove hiperlinkova, ali možete napisati http://site umjesto # :)
HTML oznaka za meni sa padajućim podmenijem
Glavna stvar u CSS-u: brisanje zadanih vrijednosti za HTML elemente uključene u meni; skrivanje buduće padajuće podliste ( podmeni) i njegov prikaz kada se lebdi iznad nadređenog HTML elementa - koristeći pseudo-klasu: hover
CSS pravila za padajući meni.menu ul li( padding: 10px; ) .menu ul > li:hover( background-color: #f96; ) .menu ul ul > li:hover( background-color: #69e; ) . menu ul li, .menu ul( display: inline-block; ) .menu ul( pozicija: relativna; margina: 0; padding: 0; background-color: #f63; ) .menu ul ul( display: none; position: absolute-color: #369 margin-top: 10px margin-left: -10px ) .menu ul a( color: #fff; text-decoration: none; ) .menu ul a( color: #fff ; text; -decoration: none ) .menu li:hover ul( display: block; ) .menu li:hover li( display: block; )
Kreirani meni nije savršen i može se poboljšati (razmislite kako). Sretno u razvoju i neka kreiranje ovakvih menija nikada ne bude teško!
Učitavanje...