Kako napraviti padajući meni u html-u. Glatko otvaranje menija koristeći CSS. Višeslojni padajući meni sa iskačućim tablom pri lebdenju

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ćim menijem css lista(na ul li listama) bez korištenja jQueryja i Javascripta, kao i bez korištenja tabela

u kodu.

Padajući horizontalni meni html

Prije svega, prije nego počnemo pisati kod, moramo to učiniti html šablon za meni.

Zbog činjenice da pravimo univerzalni meni, želim da ga učinim što sličnijim izlazu WordPress menija. Po mom mišljenju, ovo je jedan od najjednostavnijih i najsvestranijih kodova Html menija. izgleda ovako:

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

Kao što vidite iz koda, naš padajući meni će biti implementiran na ul i li listama. Ovako izgleda meni bez CSS stilova:

Da se razumijemo, ružno izgleda, kao obična lista. Zatim trebamo ukrasiti ovaj meni koristeći CSS stilove.

Horizontalni padajući meni u CSS-u

CSS stilovi za padajuće menije i više su neophodni koliko i vazduh. Uostalom, padajuća kartica je napravljena na osnovu pseudo-class:hover.

Za horizontalni padajući meni potrebni su nam sljedeći stilovi:

#menu1( position:relative; display:block; width:100%; height:auto; z-index:10; ) #menu1 ul( position:relative; display:block; margin:0px; padding:0px; width:100 %; menu1 ul li( position:relative; display:block; float:left; width:auto; height:auto; ) #menu1 ul li a( display:block; padding:9px 25px 0px 25px; font-size:14px; font- porodica:Arial, sans-serif:1.3em font-weight:uppercase ) #menu1 ul li > a:hover > a( background:#EBBD5B; color:#2B45E0; )

Ovo još nije kraj, samo dio CSS-a za glavni horizontalni meni. Zatim ćemo napisati stilove za padajuću listu menija:

#menu1 ul li ul( position:apsolute; top:36px; lijevo:0px; display:none; width:200px; background:#EBBD5B; ) #menu1 ul li:hover ul(display:block;)/*ova linija implementira mehanizam za ispadanje*/ #menu1 ul li ul li( float:none; width:100%; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 25px; width: 100% box-sizing:border-top:1px solid #ffffff ) #menu1 ul li ul li:first-child a(border-top:0px;) #menu1 ul li a:hover; (pozadina:#FDDC96;boja:#6572BC)

To je to sada. Sam mehanizam ispadanja implementiran je u jednoj liniji.

Pogledajte kožu sa ovim menijem:

Rice. 2 (horizontalni padajući meni)

Ispod je demo rada padajućeg menija, kao i link za preuzimanje izvora. (Demo će se otvoriti sa padajućim izbornikom na vrhu ove stranice, nema potrebe da kliknete otvori u novom prozoru 🙂 ili kotačić miša)

Horizontalni padajući meni pune širine

Većina vas može da mi zameri da su ovakvi meniji kao što sam gore pokazao pozdrav iz prošlosti i delimično ste u pravu, iako sam viđao novije rasporede sa takvim menijima.

Nadam se da ste preuzeli gornji primjer. Naš Html ostaje isti, ali ćemo CSS u potpunosti promijeniti. Možete jednostavno uzeti CSS kod odavde i zalijepiti ga u preuzeti primjer ili gledati u demo modu kako funkcionira.

#container( 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:0px; content:" "; ) #menu1 ul li( position); :relative:inline-block:automatska-align:left) #menu1 ul li a(display:block; padding:9px 35px; font-size:14px; height:1.3em font-weight:uppercase :border-box ) #menu1 ul li > a (pozadina:#EBBD5B; ) #menu1 ul li; ul( pozicija:apsolutna; vrh:36px; lijevo :0px;

display:none;

širina:auto;

background:#EBBD5B;

white-space:nowrap;

) #menu1 ul li:last-child ul(/*posljednja stavka će biti pričvršćena za desnu ivicu*/ lijevo:auto; desno:0px; ) #menu1 ul li:hover ul(display:block;)/*ovo linija implementira mehanizam dropouts*/ #menu1 ul li ul li( display:block; width:auto; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 35px; width:100% box-sizing:border-top:1px solid #ffffff ) #menu1 ul li ul li:first-child a(border-top:0px;) #menu1 ul li a:hover; (pozadina: #FDDC96;boja:#6572BC;

Postoji nekoliko desetina opcija za dodavanje trake (separatora) između stavki menija koristeći čisti CSS. Neću duplirati opcije koje koriste::prije ili::posle, ili mnogo jednostavnije granice lijevo, granice desno.

Postoje situacije kada je izgled tako divno izgrađen da ne možete bez jqueryja.

Naš HTML kod ostaje isti, samo uključujemo jQuery biblioteku i fajl koji ga koristi na samom početku:

Odmah nakon toga.

Kao što razumete, morate kreirati fajl script-menu-3.js i dodajte ovaj mali kod tamo:

$(document).ready(function())( $("#menu1 > ul > li:not(:last-child)").after(" "); ));

CSS stilove za takav meni treba ostaviti onakvima kakvi jesu, + dodajte ovaj komad na kraj:

#menu1 ul li.razd(visina:28px; širina:1px; background:#ffffff; margin-top:4px; )

Horizontalni padajući meni sa graničnicima u jQueryju će izgledati ovako:

Možete pogledati u demo modu ili preuzeti predložak horizontalnog menija ispod:

Prednosti ovog rješenja su:

meni će se crtati dinamički;
uvlake od separatora do pasusa su svuda iste;
ljepši i fleksibilniji dizajn.

Horizontalni padajući meni na više nivoa CSS meni+HTML

Budući da govorimo o padajućim menijima na više nivoa pri lebdenju, vjerojatno ih vrijedi podijeliti u podgrupe:

sa vip podlogom kada pokazujete u stranu

sa iskačućim padajućim menijem trećeg nivoa

U svojim primjerima pokazaću meni na više nivoa CSS za 3 nivoa, onda mislim da neće biti teško pogoditi šta treba da se uradi.

Višeslojni padajući meni sa bočnom trakom pri lebdenju

Prvo, moramo malo ispraviti naš HTML. Tamo će biti dodato nekoliko linija za nivo 3:

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
Vijesti
Kontakti
- Mapa smjerova
  - Dodatak za karte
  - Dodatak za kartu 2
- Obrazac za povratne informacije

#container( 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:0px; content:" "; ) #menu1 ul li( position); :relative:inline-block:left:4px ) #menu1 ul li a(display:block; padding:9px 0px 45px;font-size; -familija:#ffffef color:1.3 em text-decoration:uppercase:border-box; (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 će biti pričvršćena za desnu ivicu*/ lijevo:auto; desno:0px; ) #menu1 ul li:hover > ul(display:block;)/*ova linija implementira mehanizam ispadanja* / #menu1 ul li ul li( display:block; width:auto; ) #menu1 ul li ul li a( display:block; text-transform:none; visina:auto; padding:7px 45px; width:100%; box -sizing:border-top:1px solid #ffffff ) #menu1 ul li ul li:first-child > a(border-top:0px;) #menu1 ul li ul li a:hover, #menu1 ul; li ul li:hover > a( background:#FDDC96; boja:#6572BC; ) #menu1 ul li ul li ul( top:0px; lijevo:100%; display:none; background:#fddc96; ) #menu1 > ul > li:last-child > ul ul(lijevo:auto; desno:100%;) #menu1 ul li ul li ul a(boja:#F38A01;)
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.

Evo kako se to desilo:

Napravio sam 2 skina u jednom da pokažem kako kap izgleda desno i u sredini.

U nastavku možete pogledati demo i preuzeti primjer:

Višeslojni padajući meni sa iskačućim tablom pri lebdenju

Neću mijenjati HTML kod, može se uzeti iz prethodnog primjera. Također ostavljamo separatore u jQueryju.

Samo će se CSS potpuno promijeniti:

#container( 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:0px; content:" "; ) #menu1 ul li( position); :relative:inline-block:left) #menu1 ul li.razd :#ffffff; -top:4px;) #menu1 ul li a( display:block; padding:9px 45px 0px 45px; font-family:Arial, sans-serif; line-height:1.3em; font-weight:bold; height:36px; a:hover, #menu1 ul li:hover > a( background:#EBBD5B;

boja:#2B45E0;

) #menu1 ul li ul( position:apsolute; top:36px; left:0px; display:none; width:100%; background:#EBBD5B; ) #menu1 > ul > li > ul::after( clear:both; float:none width:0px content:" " ) #menu1 ul li:hover > ul(display:block;)/*ova linija implementira mehanizam za ispuštanje*/ #menu1 ul li li(; display :block: float:left ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 45px; width:100%; box-sizing; border -box ) #menu1 ul li ul li:first-child > a(border-top:0px;) #menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a( background:#FDDC96; ; boja:#6572BC ) #menu1 ul li ul li ul( top:0px; left:100%; display:none; background:#fddc96; z-index:15; ) #menu1 ul li ul li : blok float:nema širine:100%;) #menu1 ul li ul a(color:#F38A01; border-top:1px solid #ffffff;)

Ovako će izgledati meni: Jedina stvar je da sajt mora imati dovoljno prostora, pošto poslednja stavka sa desne strane nema mesta za padajući meni. Ovaj problem se može riješiti putem:nth-child, ali nisam se trudio.

To je sve za mene, nadam se da vam bar jedan moj primjer odgovara. Hvala na pažnji.

koristiće i njima i meni :)

Ako ste pročitali ceo post, ali niste pronašli kako da napravite sopstveni horizontalni padajući meni u css-u, postavite pitanje u komentarima ili koristite pretragu sajta.

Također, savjetujem vam da posjetite roditeljsku stranicu https://site/vypadayushhee-menu/, tamo su prikupljeni svi primjeri i vrste padajućih menija.

Zdravo, dragi čitaoci bloga. Danas ćemo naučiti kako napraviti cool, šaren i padajući meni sa čistim CSS3. Ogroman plus ovaj meni Stvar je u tome što se ovdje ne koriste skripte, već samo CSS.

Izradit ćemo ga i u nekoliko boja koje korisnik može sam odabrati. Iskreno ću vam reći da izgleda jako cool i praktično.

Pa, hajde da bude naš.

Padajući meni i meni boja za web stranicu koja koristi čisti CSS3 i HTML

Prvo, napravimo sam HTML kod i vidimo kako će izgledati. Kao i obično, ovdje nema ništa komplikovano. Ovdje ćemo prikazati listu boja koje se nalaze iznad menija i koje korisnik može izabrati. Također ćemo prikazati sam kod. Ovako će izgledati sav ovaj kod:

Dom
Meni 1
- Podmeni 1
- Podmeni 2
- Podmeni 3
- Podmeni 4
- Podmeni 5
Meni 2
- Podmeni 2-1
- Podmeni 2-2
- Podmeni 2-3
- Podmeni 2-4
- Podmeni 2-5
- Podmeni 2-6
- Podmeni 2-7
- Podmeni 2-8
Meni 3
- Podmeni 3-1
- Podmeni 3-2
- Podmeni 3-3
- Podmeni 3-4
- Podmeni 3-5
Meni 4
Meni 5
Meni 6

CSS

Sada, hajde da direktno podesimo CSS stil za meni i za boju. Evo samog CSS koda:

#nav,#nav ul ( stil liste: nijedna izvan nijedna; margina: 0; padding: 0; ) #nav ( boja pozadine: #000000; radijus granice: 5px 5px 5px 5px; senka okvira: 3px 3px 3px rgba (0, 0, 0, 0,5): 10px; hidden: 20px 0 10px: scaleY(0)-webkit-transform: 0 0; -webkit-transform-origin: -transform 0.1s linear; -o-transform 0.1s; -transformacija 0.1s linearna ) #nav li (float: lijevo;

Zadatak

Kreirajte padajući meni koristeći CSS i HTML alate.

Rješenje

Prvo, napravimo listu, postavimo je vodoravno i stiliziramo izgled. Ovo će biti glavni meni, a zatim ćemo napraviti padajući meni za njegove stavke.

Padajući meni ul.menu( padding: 3px; /* ukloni padding */ margin-top: 50px; /* za lepotu, pomerite ga nadole */ text-align: center; /* poravnajte spask elemente u centar */ ) ul.menu > li( stil liste: nema; /* ukloni oznake liste */ display: inline-block; /* rasporedi liste horizontalno */ background-color: #D87171; padding: 5px 15px; ) /* postavi stil linkova u meniju */ ul.menu > li > a( boja: #FFFFFF; text-decoration: none; ) /* postavi stil linkova kada lebdi */ ul.menu > li > a:hover( text -dekoracija: podvlačenje;

Na kraju smo dobili ovakvu listu:

Slika 1. Pripremni radovi.

Imajte na umu: stil veze se mijenja kada pređete mišem preko nje. Ovo se implementira pomoću pseudoklase :hover. Ova pseudo-klasa specificira stil elementa kada se kursor pređe preko njega bez pritiskanja tipke miša. Ako se pritisne dugme, ovo je još jedna pseudo-klasa.

Sada idemo na rješavanje našeg problema. Napravimo padajući meni za stavku "Usluge", dodajmo padajuće sekcije: "Kupi", "Prodaj", "Razmjena". Ove stavke su zasebna lista koja je ugniježđena u oznaci

Kreirajmo ovu listu i dodajmo stilove koji opisuju njen izgled.

Sada imamo ovu listu:

Slika 2. Pripremni radovi.

Naravno, ovo nije ono što nam treba. Prema zadanim postavkama, ova lista bi trebala biti skrivena i vidljiva samo pri prelasku miša. Možete sakriti element koristeći pravilo pravila (prikaz: nema). A kada zadržite pokazivač, morate ga aktivirati tako što ćete pravila ponovo učiniti vidljivima (prikaz: inline-block).

Padajući meni ul.menu( padding: 3px; margin-top: 50px; text-align: center; ) ul.menu > li (list-style: none; display: inline-block; background-color: #D87171; padding: 5px 15px ) /* postaviti stil linkova u meniju */ ul.menu > li > a( boja: #FFFFFF; text-decoration: none; ) /* postaviti stil linkova pri lebdenju */ ul.menu; > li > a :hover( text-decoration: underline; ) /* postavite stil za interni meni */ .menuInner( display: none; /* učinite ga nevidljivim */ list-style: none; padding: 4px; granica : 1px solid #000000 border: 5px background-color: #FFFFFF: left ) /* učinite vidljivim preko bloka li */ .menu >hover > . : blok )

Sada naš meni blijedi i nestaje, ali nam je potrebno da se pojavi na vrhu postojećih elemenata bez promjene već postavljenih granica postojećih blokova.

Da bi element bio prikazan bez uticaja na prikaz drugih elemenata, mora biti pozicioniran sa apsolutnom vrijednošću.

Padajući meni ul.menu( padding: 3px; margin-top: 50px; text-align: center; ) ul.menu > li( position: relative; /* add positioning */ list-style: none; display: inline-block ; background-color: #D87171 padding: 5px 15px /* add height */ ) /* postaviti stil linkova u meniju */ ul.menu > a( color: #FFFFFF; text-decoration: none; ) /* postavlja stil linkova kada lebdi kursor */ ul.menu > li > a:hover( text-decoration: underline; ) /* postavlja stil za interni meni */ .menuInner( display: none; /* učinite ga nevidljivim */ list-style: none; 1px solid #000000; vrh: 30px;

Šta smo radili ovdje:

pravilo pozicioniranja (pozicija : relativna ;). Ovo se radi tako da izvještaj o apsolutnim koordinatama pozicioniranja ugniježđene liste počinje od gornjeg lijevog ugla ovog bloka, a ne od ugla ekrana.

Dodano u roditeljski element

pravilo (visina : 20px ;). Postavili smo njegovu visinu da bi bilo pogodnije pozicionirati padajuću listu.

Postavite apsolutno pozicioniranje (pozicija : apsolutna ;) na padajuću listu i postavite koordinate: gore i lijevo.

Padajući meni sada radi ispravno.

Slika 3. Konačna verzija.

Naravno, ovdje možete učiniti da padajući meni bude ljepši, ali za potrebe našeg zadatka i ovo je dovoljno.

Obrazovni problem je riješen. ćao.

Habr, zdravo!

Mnogo toga se pojavljuje na Codepen-u dobre odluke od različitih specijalista i smatram da najbolje od njih treba sakupiti na jednom mjestu. Stoga sam prije 2 godine počeo da spremam zanimljive skripte o raznim temama na svom računaru.

Objavljivao sam ih u mr cloud IDE grupi proizvoda. Gefest, to su bili sklopovi od 5-8 rješenja. Ali sada sam počeo da skupljam 15-30 skripti u različitim temama (dugmad, meniji, opisi alata i tako dalje).

Tako velike skupove treba prikazati više specijalisti. Zato ih objavljujem na Habru. Nadam se da će vam biti od koristi.

U ovom pregledu ćemo pogledati menije na više nivoa.

Ravna horizontalna navigacija

Prekrasna navigacijska traka sa podizbornicima koji se glatko pojavljuju. Kod je dobro strukturiran i koristi js. Sudeći po korištenim funkcijama, radi u ie8+.
http://codepen.io/andytran/pen/kmAEy

Zaglavlje za navigaciju materijala s poravnatim padajućim izbornikom

Adaptivna traka veza sa podmenijem u dvije kolone. Sve se radi u css i html-u. Korišteni css3 selektori koji nisu podržani u ie8.
http://codepen.io/colewaldrip/pen/KpRwgQ

Padajući meni Glatke harmonike

Moderan vertikalni meni sa elementima koji se glatko otvaraju. Koristi se Transition, transform js kod.
http://codepen.io/fainder/pen/AydHJ

Pure CSS Dark Inline Navigacijski meni

Tamna vertikalna navigaciona traka sa ikonama iz ionikona. Koristi se JavaScript. U ie8 će najvjerovatnije raditi bez animacije.
http://codepen.io/3lv3n_snip3r/pen/XbddOO

Čisti CSS3 Mega padajući meni sa animacijom

Moderan meni sa dva izlazna formata: horizontalnim i vertikalnim. Koriste se ikone i css3 animacija. Definitivno će izgledati užasno u ie8, ali u drugim pretraživačima je sve super.
Vertikalni link: http://codepen.io/rizky_k_r/full/sqcAn/
Link do horizontalne: http://codepen.io/rizky_k_r/pen/xFjqs

CSS3 padajući meni

Horizontalni meni sa velikim elementima i padajućom listom veza. Čist i minimalistički kod bez js-a.
http://codepen.io/ojbravo/pen/tIacg

Jednostavan Pure CSS padajući meni

Jednostavan, ali moderan horizontalni meni. Koristi font-awesome. Sve radi sa css-om i html-om, bez js-a. Radit će u ie8.
http://codepen.io/Responsive/pen/raNrEW

Bootstrap 3 mega padajući meni

Odlično rješenje za online trgovine. Prikazuje nekoliko nivoa kategorija i velike slike (na primjer, proizvod na rasprodaji). Zasnovan je na boostrap 3.
http://codepen.io/organizedchaos/full/rwlhd/

Flat Navigation

Elegantna navigaciona traka sa glatkim podmenijem. U starijim pretraživačima će prikazati probleme.
http://codepen.io/andytran/pen/YPvQQN

3D ugniježđena navigacija

Horizontalni meni sa vrlo cool animacijom bez js-a!
http://codepen.io/devilishalchemist/pen/wBGVor

Responsive Mega Menu - Navigacija

Horizontalno responsive menu. Izgleda dobro, ali mobilna verzija Malo je jadno. Koriste se CSS, html i js.
http://codepen.io/samiralley/pen/xvFdc

Čisti Css3 meni

Originalni meni. Sa jednostavnim i čistim kodom bez js-a. Koristite za "vau" efekte.
http://codepen.io/Sonick/pen/xJagi

Potpuni CSS3 padajući meni

Šareni padajući meni sa jednim nivoom ugnježđenja. Koriste se ikone iz font-awesome, html i css.
http://codepen.io/daniesy/pen/pfxFi

Css3 samo padajući meni

Prilično dobar horizontalni meni sa tri nivoa ugnježđenja. Radi bez js-a.
http://codepen.io/riogrande/pen/ahBrb

Padajući meniji

Minimalistički meni s originalnim efektom izgleda ugniježđene liste elemenata. Drago mi je da je i ovo rješenje bez javascripta.
http://codepen.io/kkrueger/pen/qfoLa

Čisti CSS padajući meni

Primitivno, ali efikasno rešenje. Samo css i html.
http://codepen.io/andornagy/pen/xhiJH

Povucite meni - Koncept interakcije menija

Zanimljiv koncept menija za mobilni telefon. Nikada prije nisam vidio ništa slično. Koristi html, css i javascript.
http://codepen.io/fbrz/pen/bNdMwZ

Napravite jednostavan padajući meni

Čist i jednostavan kod, bez js-a. Definitivno će raditi u ie8.
http://codepen.io/nyekrip/pen/pJoYgb

Čisti CSS padajući meni

Rješenje nije loše, ali koristi previše klasa. Drago mi je što nema js.
http://codepen.io/jonathlee/pen/mJMzgR

Padajući meni

Lep vertikalni meni sa minimalnim javascript kodom. JQuery se ne koristi!
http://codepen.io/MeredithU/pen/GAinq

CSS 3 padajući meni

Horizontalni meni s dodatnim natpisima može dobro ukrasiti vašu web stranicu. Kod je jednostavan i jasan. Javascript se ne koristi.
http://codepen.io/ibeeback/pen/qdEZjR

Predivno rješenje sa puno koda (html, css i js). Kreirana su 3 formata podmenija. Rješenje je pogodno za online trgovine.
http://codepen.io/martinridgway/pen/KVdKQJ

Padajući meni CSS3 (posebno rešenje)!

Tamni horizontalni meni sa trinaest (13) opcija animacije! Svakako vam savjetujem da ga pročitate, bit će korisno u svakodnevnom životu.
http://codepen.io/cmcg/pen/ofFiz

P.S.
Nadam se da vam se svidjela zbirka od 23 rješenja. Ako ih želite nastaviti čitati, ispunite anketu u nastavku.
Uživajte svi u svom poslu.

Za web stranicu, vrijeme učitavanja i jednostavnost korištenja su među najvažnijima važni aspekti. Stoga ne biste trebali pretrpavati svoju web stranicu dodatnim JavaScript-om i velikim slikama. Ali šta ako želite prekrasan CSS padajući meni? Ne morate da koristite JavaScript da biste to uradili danas, padajući meni se može napraviti koristeći samo CSS. U ovom vodiču ćete naučiti kako da kreirate CSS padajući meni.

Prije nego što započnemo ovaj vodič, trebat će vam sljedeće:

Pristup kontrolnoj tabli vašeg hostinga

Korak 1 - Kreirajte HTML datoteku

Prvo morate kreirati praznu HTML datoteku. U ovom tutorijalu ćemo kreirati novi fajl pod nazivom menu.html. Za ovo ćemo koristiti File manager. Međutim, isti rezultat se može postići korištenjem (kreirajte datoteku menu.html na svom računaru i postavite je na svoj hosting).

Korak 2 - Dodavanje HTML koda menija

Naš meni će biti napravljen od jednog nadređenog elementa koji se zove Glavni meni i pet podsekcija. Promjenom adrese unutar atributa href, možete povezati svaki pododjeljak s različitim stranicama na vašoj web lokaciji. Možda ste primijetili da svaki element ima različite klase - dropdown , mainmenubtn i dropdown-child . Od časova se traži da primjenjuju CSS pravila.

Glavni meni Pododjeljak 1 Pododjeljak 2 Pododjeljak 3 Pododjeljak 4 Pododjeljak 5

Evo kako to izgleda bez primijenjenih CSS pravila:

Kao što vidite, običan HTML meni nije optimizovan i ne izgleda baš lepo. Međutim, mi ćemo primijeniti CSS pravila i to promijeniti u sljedećem koraku.

Korak 3 - Kako napraviti CSS padajući meni

Stiliziramo naš HTML kod koristeći sljedeća CSS pravila:

Mainmenubtn (boja pozadine: crvena; boja: bijela; granica: nema; kursor: pokazivač; padding:20px; margin-top:20px; ) .mainmenubtn:hover (boja pozadine: crvena; ) .padajući izbornik (pozicija: relativna; display: inline-block ) .dropdown-child (display: none; background-color: black; min-width: 200px; ) .dropdown-child a (boja: bijela; padding: 20px; text-decoration: nijedan; display: inline-block; ) .dropdown-child; : blok .dropdown:hover .dropdown-child (prikaz: blok; )

Kao što vidite, klasa .dropdown-child ima CSS pravilo prikaza: none. Međutim, čim korisnik pređe (.dropdown:hover) iznad nadređenog elementa, ovo pravilo će promijeniti svoj prikaz u display: block . Ovo će stvoriti efekat padajućeg menija.

Ispod je konačni izlaz naše menu.html datoteke:

.mainmenubtn (boja pozadine: crvena; boja: bijela ; granica: nema; ; kursor: pokazivač; padding: 20px ; margin-top: boja:; ) .dropdown (pozicija: relativna; prikaz: inline-block; ) .dropdown-child (prikaz: nema; boja pozadine: ; crna

; min-širina: 200px

; ) .dropdown-child a ( boja:

; padding:, mijenja boje i veličinu. Prilagodite jelovnik svojim potrebama.

Zaključak

Završavanjem ovog vodiča naučili ste kako da kreirate CSS padajući meni. Kôd koji se nalazi u ovom vodiču je prilično jednostavan i neće utjecati na vrijeme učitavanja vaše stranice.

Uputstva

Možda će vam se također svidjeti