Hogyan lehet a HTML CSS legördülő listáját

HTML legördülő listája

Hé! Ebben a cikkben vannak példák a legördülő listákra és a CSS menüjére, és akik gondolták volna, html. Ami a JavaScript használatát illeti, nem vagyok biztos benne, próbáld meg anélkül csinálni.

Legördülő menü a html elemek listájával

A webmesterek és a bloggerek rendszeresen szembesülnek a vízszintes menü létrehozásának problémájával, amikor lebegnek a szülők elemeire, amelyeknek a gyermekelemek megmutatják.

Természetesen egy ilyen probléma megoldható sokféleképpen, de javasolnám további JS-kód nélkül (és jquery).

Úgy gondolom, hogy – ha a feladat elméletileg megoldható a HTML és a CSS eszközökkel, Jacquer használatával, akkor meg kell tennie a gyakorlatban. Ha nem tudod, mit kell írni és hol kattintani – ez egy külön probléma, és nem szabad megállnia. Szükség van a Google-ra, tanulni, növekedni, növelni képesítését, mint vertelor és egy FRONTEND fejlesztő – soha nem tudhatják, hogy ezek a készségek hasznosak lesznek.

Nézzük meg a példát. Ne feledje, a közelmúltban volt egy cikk a megjelölt és a számozott listákról? Most ezek a tudás hasznos lesz, mert így fogjuk a menüt. Minta kód:

ULCLASS = MMENUU
liahref = # menü №1 / a
ULCLASS = Ssubmenuu
liahref = # almenüszámot 1 az első menü / A / Li
Ul
/ Li
liahref = # menüszám 2 / a
ULCLASS = Ssubmenuu
liahref = # almenü №2 második menü / A / LI
liahref = # almenü №2 második menü / A / LI
Ul
/ Li
liahref = # menü №3 / a
ULCLASS = Ssubmenuu
liahref = # almenüszámot 3. A harmadik menü / A / LI
liahref = # almenüszámot 3. A harmadik menü / A / LI
Liehref = # A harmadik menü 3. számának almenü / a / li
Ul
/ Li
Ul

Az első lépés a menüben lévő legördülő listánk felé, és ez történt. Eredmény:

MDA. Nem annyira igen? Egy olyan rendes lista), mint ez, mert a menü és az almenü osztályai, amelyeket használtam, és nem írt stílusokat.

Hozzáadok néhány CSS mágiát. Itúra jobb a HTML fájlban – a headstyle / stílus / fej. CSS kód:

Test & #;
/ * Tisztítsa meg a bemélyedést. * /
Margó: 0px;
/ * Tisztítsa meg egy másik bemélyedést. * /
Padding: 0px;
/ * Kérje meg a betűtípust. * /
fontpx’verdana ‘;
& #;
Ul & #;
/ * Tisztítsa meg a jelölőket a listából * /
Lista-stílus: Nincs;
/ * Elemek blokkot teszek. * /
Kijelző: blokk;
/ * Tisztítsa meg a bemélyedést. * /
Margó: 0px;
/ * Tisztítsa meg egy másik bemélyedést! * /
Padding: 0px;
& #;
UL: utána & # után
/ * Elemek blokkot teszek. * /
Kijelző: blokk;
/ * Tisztítsa meg az igazítást. * /
Float: Nincs;
Tartalom: ”;
Tiszta: Mindkettő;
& #;
Hab Li & #;
/ * Az összehangolást és a pozícionálást kérem. * /
Balra lebeg;
/ * A koordinátákat a forráshelyhez viszonyítva tartjuk * /
Pozíció: relatív;
& #;
Hab Li A & #;
/ * Blokk tételek készítése: * /
Kijelző: blokk;
/ * Fehér szín beállítása. * /
Szín: #FFF;
/ * Kérdezzen egy francia 10px. * /
paddingpx;
/ * Tiszta formázás * /
Text-decoration: none;
/ * Kérdezze szín. * /
background-color: #daf;
& #;
Hab Li A: hover & #;
/ * Kérem a színét, amikor lebeg. * /
background-color: #EB;
& #;
Habnuu & #;
Pozíció: abszolút;
widthpx;
Toppx;
Balra: 0px;
/ * Én egy almenü rejtett. * /
Display: none;
/* Fehér szín. * /
Background-color: Fehér;
& #;
Habnuu Li & #;
/ * Blokk helyét elemek * /
Kijelző: blokk;
& #;
Habnuu Li A & #;
/ * I make elemek blokk. * /
Kijelző: blokk;
/ * Tiszta formázás * /
Text-decoration: none;
/ * Kérdezze francia. * /
paddingpx;
/ * Kérdezze szín. * /
Szín: #FFFFFF;
/ * Még szín. * /
background-color: #daf;
& #;
Habnuu Li A: hover & #;
/ * A háttér színe, ha lebeg. * /
background-color: #EB;
/ * Kérdezze aláhúzás * /
Text-dekoráció: kiemelik;
& #;
Hab Li: hover Habnuu & #;
/ * I make elemek blokk. * /
Kijelző: blokk;
& #;

Eredmény:

Azta! Az életben nem látott semmit, szebb, mint ez a minimalista legördülő listából. JavaScript és keringés nélkül szabadúszók!

Legördülő menülista a HTML-en

És újra feltaláljuk a menüt a tiszta CSS-en, anélkül, hogy a JS-t használnánk.

ULID = MENU
LIHEF = # szakasz menü №1 / A / Li
lihref = # szakasz menü №2 / a
Ul
Liehref = # alszakasz №1 Második menü / A / Li
LIHEF = # alszakasz №2 Második menü / A / Li
Ul
/ Li
lihref = # szakasz menü №3 / a
Ul
lihref = # a harmadik menü 1. számának száma / a / li
Liehref = # A harmadik menü 2. pontja / a / li
lihref = # a harmadik menü 3. pontja / a / li
Ul
/ Li
Ul

Figyelembe véve, amit láttál a cikk előző részében, azt hiszem, ígéretesnek tűnik. És annyira? Mert tudjuk, hogyan kell hozzárendelni a “Display: None” stílust, és előírja a CSS-ben, hogy amikor lebegszel, valami hasonló “inline-blokk” volt, ahelyett, hogy “nincs”.

Maradjunk részletesebben a fenti kódban. Benne van az “ID = & #; menü & #;” A fő listát, azaz a teljes legördülő menü. Megtettem, hogy kijelölje a legördülő listák szülő elemeit, és láthatóvá tegye őket.

Messzebb. Az egyes szakaszok már befektetett további listákat UL, amelyek legördülő kapcsolatok (lásd. is, hogyan kell beszúrni egy linket a html). Úgy jelenik meg, ha lebeg.

Térjünk át CSS. Kód:

Stílus
/ * Nullázása francia és eltávolítás markerek listák. * /
UL LI & #;
margin: 0;
Kitöltés: 0;
List-style-type: none;
& #;

/ * Állítsa be a paramétereket a fő, szülő blokk, a menü a legördülő listából. * /
# Menü & #;
Kijelző: blokk;
Pozíció: abszolút;
Toppx;
leftpx;

& #;

/ * Vázlat stílusok blokkok legördülő listából. * /
#Menu Li & #;
Kijelző: inline-block;
Magasságpx;
/ * Úgy gondoljuk, a vonatkozó koordinátákat a forrás. * /
Position: relative;
& #;

/ * Vázlat stílusok, hogy elrejtse a gyermek blokk a legördülő listából. Nos, díszíteni egy kicsit. * /
#Menu Li Ul & #;
Pozíció: abszolút;
Toppx;
leftpx;
Display: none;
Background-color: krémleves;
Border-Radius: 5px;
widthpx;
font-sizepx;
Párnázás;
& #;

/ * Szóval mielőtt rejtett része látható – ha lebeg a kurzor. * /
#Menu li: Hover ul & #;
Kijelző: blokk;
& #;
/ Stílus

Eredmény:

Amit meg akarok ünnepelni.

“#Menu> li” azt jelenti, hogy a stílusokat csak a gyermekelemekre alkalmazzák az “UL # menü” címke tekintetében, és nem mindenkinek, mint néhány. Gondosan!

“Pozíció: relatív;” – Számítja a koordinátákat a fő listán szereplő partíciók szögéből, ahonnan a gyermek elemek esnek ki.

Utolsó: legördülő listája a HTML feletti példa szerint (lásd. Emellett a HTML funkciók) és a CSS a webhely menüjének kialakításában egy kényelmes dolog. PC-re és asztali számítógépekre. A mobileszközökön és a tablettákon nincs egér és kurzorok, így ez az opció nem megfelelő.

Így a felhasználók részt a weboldalon a mobil eszközök lesz szüksége külön végrehajtása a menüből a legördülő listából. Ez valószínűleg minden a cikk ezen részében.

Hűvös legördülő menü létrehozása

Harmadik Ready, Simple és Funkcionális megoldás egy gyönyörű vízszintes menü létrehozásához számos elem legördülő listájával.

Koncepció, mint korábban, a lélek mélységei egyszerű. Horizontális hierarchiát készítünk a részek nélküli nem mért listán, majd a gyönyörű stílusokban csomagolunk.

A stílusok segítenek elrejteni az elemeket, és a kurzort lebegnek.

Kód:

ulid = nnavv
Li
Ahref = # cím = itt link az elsődleges / a
/ Li
Li
Ahref = # cím = itt Céginformáció US / A
Ul
Liehref = # SuperFoods / A / Li
Lihref = # szuper a / li
Ul
/ Li
Li
ahref = # cím = itt lesz a szolgáltatásai / a
Ul
Liehref = # hűvös szolgáltatás №1 / A / Li
Liehref = # Cool szolgáltatás száma 2 / A / Li
Liehref = # hűvös szolgáltatás №3 / A / Li
Ul
/ Li
Li
ahref = # cím = itt Helyezzünk linkeket a termékeire:
Ul
Lihref = # szuper szolgáltatás száma 1 / a / li
Lihref = # szuper szolgáltatás száma 2 / a / li
Liehref = # Super Suite №3 / A / Li
Liehref = # Super Suite №4 / A / Li
Ul
/ Li
Li
Ahref = # cím = Itt írja be a kapcsolattartó kulcsát / a
Ul
Lihref = # munkaidő / a / li
Liehref = # Hely / A / Li
lihref = # legördülő lista 10/10!/ A / Li
Ul
/ Li
Ul

Egy kicsit meg akartam kommentálni, igen, újra megváltoztattam a fejemben a kódot – tiszta, tiszta, szép. Úgy tűnik, mindennek világosnak kell lennie.

Most karjait a stílusok varázslatokkal – a CSS I Transform All Series befektetett UL listák hűvös és könnyen használható legördülő menüvel több elem.

A CSS-kódra való áttérés. Valami unatkoztam ott, és itt futok, ezért megjegyeztem, hogy a stílusokban. És kényelmesebb lesz az Ön számára, ha élvezed ezt a megoldást.

CSS kód a fej oldalakba helyezve:

# nnavv & #;
/ * A bal szélen igazítsa! * /
Balra lebeg;
/ * Ante. * /
margó alsó;
/ * Ass Ask Width. * /
widthpx;
/ * Tisztítsa meg a markereket * /
Lista-stílus: Nincs;
/ * Betűtípus – zsír * /
Betűtípus: merész;
& #;
#Nnavv li & #;
/ * Igazítás! * /
Balra lebeg;
/ * Elemek blokkot teszek. * /
Kijelző: blokk;
/ * Ante. * /
margó jobb;
/ * Helymeghatározás a forráshoz képest! * /
Pozíció: relatív;
& #;
#Nnavv li a & #;
/ * Háttérszín. * /
Háttér: #;
/ * I make elemek blokk. * /
Display: block;
/ * Behúzást. * /
Kitöltés: 5;
/ * Link színe. * /
Szín: #FFF;
/ * Text formázás * /
Text-decoration: none;
/ * Set lekerekített szögek 2 pixel * /
-MOZ-szegély sugara: 2;
-WebKit-border-radius: 2;
Border-radius: 2;
/ * Árnyék a vizuális szöveg emelő * /
Szöveges árnyék: 1px1px1pxrgba (0,0,0);
& #;
#Nnavv li a: Hover & #;
/ * Hangsúlyozza a linket, amikor lebegnek * /
Szöveges dekoráció: aláhúzás;
/ * Háttérbe állítja. * /
Háttér: # 6b0c33;
/ * A link színe ugyanaz marad * /
Szín: #FFF;
Háttér: RGBA (, 13,53,); / * áttetszőnek tűnik! * /
& #;
/ * A legördülő elemek konfigurálása!!! * /
#Nnavv ul & #;
/ * Tisztítsa meg a markereket a legördülő listából * /
Lista-stílus: Nincs;
balL PX; / * Távolítsa el a képernyőn túlzottan (azt mondják, hogy 95% -kal jobb, mint a “kijelző: nincs;”, t.Nak nek. A nem egyes programok figyelmen kívül hagyása). * /
Opacity: 0; / * az átláthatóság segítségével az ul elrejtése. * /
/ * Azt, hogy a WebKit simán megmutassa pop-up elem a legördülő listából, ha lebeg. * /
-Webkit-átmenet lineáris átlátszatlanság;
Pozíció: abszolút;
& #;
#Nnavv ul li & #;
/ * Itt kérem egy bemélyedést az LT; ligt elemek között;. Ez szükséges a menüelemek elválasztásához, nem volt a cikk előző részében (csak elfelejtett) * /
Padding-Top: 1px;
Float: Nincs;
& #;
#Nnavv ul a & #;
/ * Elemek blokkot teszek. * /
Kijelző: blokk;
/ * Megtiltom a szövegszúrások átadását egy új karakterlánchoz, hogy hozzon létre egy többsoros legördülő listát. * /
Fehér tér: mostrap;
& #;
#Nnavv li: Hover Ul & #; / * Hozzon létre egy legördülő pontot, amely akkor jelenik meg, amikor lebeg. * /
Bal: 0; / * Visszaadja vissza a felhasználó képernyőjére, – ha szüksége van rá. * /
Opacity: 1; / * tiszta átláthatóság * /
& #;
#NNAVV LI: HOVER A & #; / * Ebben a stílusban telepítem a Top-Lint elemek tulajdonságait – egyszerre a legördülő listát megjelenik. * /
/ * Stressz * /
Szöveges dekoráció: aláhúzás;
/ * Áttetsző. * /
Háttér: RGBA (15,53,);
Háttér: # 6b0c36;
& #;
#NNAVV Li: hover UL A & #; / * megváltozott néhány stílus az első szint, amikor a legördülő elem jelenik meg. * /
/ * Ubala formázás * /
Szöveges dekoráció: Nincs;
-Webkit-átmenet: -Webkit-transzformációs lineáris;
& #;
#Nnavv li: Hover Ul Li A: Hover & #; / * Itt kérdezem stílusokat konkrét legördülő pontokra, amikor lebegíted a kurzort – hogy eltérjenek azoktól az elemektől, ahol a kurzor nem esik * /
-Moz-transzformáció: skála ();
-Webkit-transzformáció: skála ();
/ * Beállítja a legördülő elem háttérszínét * /
Háttér: #;
Háttér: RGBA (50.50.50,); / * áttetsző. * /
Szöveges dekoráció: aláhúzás;
& #;

Kész! Végeredmény:

Bónusz – szuperírási legördülő listája a HTML és a TSSS-en

Negyedik és utolsó ma. Fáradt vagyok, fáradt vagy – azt hiszem, a négy legördülő menü elég lesz ahhoz, hogy kiválassza a legoptimálisabb lehetőséget.

Mi is készítünk egy listát a hivatkozások, amikor lebegnek. Nincsenek animációk, divatos kirándulások, villogó – csak egy tiszta böngésző kód, egyszerű és hatékony. Ahelyett, hogy “display: none;” Használom az „Balra: PX”;. Nos, ott fogod látni.

HTML kód:

Ulclass = Ddropdownn
Liclass = ddropdownn-top
aclass = ddropdownn-tophref = / Krasnoyarsk Terület / a
Ulclass = ddropdownn-inside
liahref = / Minuszinszki / a / li
liahref = / Achinsk / A / Li
Liahref = / Krasznojarszk / A / Li
Liahref = / Zheleznogorsk / A / Li
Liahref = / Kansk / A / Li
Liahref = / Norilsk / A / Li
/ UL
/ LI

Liclass = DDROPDOWNN-TOP
Aclass = ddropdownn-tophref = / Szverdlovszk régióban / a
ULCLASS = DDROPDOWNN-INSIDE
Liahref = / Ekaterinburg / A / LI
Liahref = / Top Pyshma / A / Li
Liahref = / Alsó Tagil / A / Li
Liahref = / Pervouralsk / A / Li
Liahref = / Asbest / A / Li
Liahref = / Kamensk-Ural / A / Li
/ UL
/ LI
/ UL

Screenshot az eredmény:

CSS kódot, amit elhelyezett Fej:

Habownn Li & #; / * Úgy gondoljuk, a vonatkozó koordinátákat a forrás. * / Position: relative; & #;
Habownn, Habownn-Inside & #;
/ * Behúzást zéró. * /
Padding: 0;
/ * Markers eltávolítja. * /
Lista-stílusú típus: Nincs;
& #;
habownn-belsejében & #;
/ * Hide leányvállalatai legördülő listából. * /
leftpx;
Pozíció: abszolút;
& #;
Habownn Habownn-top & #;
/ * Kis francia bekezdés. * /
marginpx00;
/ * Baloldali igazítás. * /
Balra lebeg;
Kijelző: inline;
& #;
Habownn Habownn-Top A & #;
/ * Elemek blokkot teszek. * /
Kijelző: blokk;
/ * Ismét francia bekezdés. * /
Padding: 3px10px4px;
& #;
Habownn habownn-top & #; / * háttérszín. * / háttér: #efefef; & #;
Habownn Habownn-Top: Hover & #; * francia bekezdések. * / Padding: 3px10px4px; & #;
Habownn habownn-top: habownn-inside & #;
balra: 0;
/ * Elemek blokkot teszek. * /
Kijelző: blokk;
& #;
Habownnn-Inside & #; / * színes háttér. * / Háttér: #FFFFFF; & #;
Habownn-Inside A: Hover & #; / * A háttérszín megváltoztatja a lebegést. * / háttér: #efefef; & #;

Eredmény (a kurzor lebegése nélkül):

Eredmény (a kurzor lebegése esetén):

Eredmények: Letöltés Ready HTML + CSS kódja a legördülő listából

Mivel meg tudná győződni arról, hogy a fenti példák, a legördülő listát anélkül, hogy bármilyen probléma merülne fel a szokásos HTML-en.

Remélem, az egyik lista díszíti a projekt menüjét, vagy legalábbis az alapként fogják használni.

Készítettem neked egy archívumot, amelyet letölthet. Ott minden 4 legördülő lista – HTML kód és CSS stílusok közvetlenül a fájlban. Azt hiszem, kitaláljuk.

A fájl tartalmának előnézete:

Letöltés:

Hab (2,97kb)

P.S. Nos, ha hirtelen kimaradt a keresésnek, és nem ott (én nem találja, amit keres), ne csüggedjetek – Van egy pár videót, ahol kiesnek legördülő listák segítségével beállításához válassza az Html. Videó 1:

2 videó: