Legördülő menü html. CSS függőleges legördülő menü az egérmutatón és a réteges menükön. Hogyan készítsünk vízszintes legördülő menüt

27.10.2019 Internet

Jó napot, kedves olvasók. Ma megvitatjuk a témát hogyan készítsünk vízszintes menüt html és css segítségével". A menü általában az oldal fejlécében található, és a legfontosabb oldalakra mutató hivatkozások listája, más néven főmenü. A felhasználók folyamatosan kattintanak ezekre a linkekre. Az elrendezésük és a menü megjelenésének módja befolyásolja a felhasználói viselkedést, a konverziót, a webhely általános élményét és természetesen a .

HTML kód a vízszintes menühöz

Réges-régen az oldal főmenüjét képekre, táblázatokra, flashre, esetleg másra is készítették, de manapság a legkedveltebb és leghelyesebb módja a menükészítésnek a “list” címkékkel.

A címkék menük létrehozására szolgálnak.
,
és .

Példa a html címkék használatával menü létrehozására az alábbi kódban:

itthon
Szolgáltatások
Árak
Kapcsolatok

Szabványos CSS-stílusok a vízszintes menühöz

ul ( lista-stílus: nincs; /*listajelölők eltávolítása*/ margó: 0; /*remove padding*/ padding-left: 0; /*remove padding*/ ) a ( szövegdekoráció: nincs; /*aláhúzás eltávolítása link szövege*/ ) li ( float:left; /*A menü megvalósításához helyezze el a listát vízszintesen*/ margó-jobbra:5px; /*A menüelemek behúzása*/ )

A fejlécben egy kész felső menüt kapunk, különösebb stílusok és csengettyűk nélkül, ezt nevezhetjük leendő gyönyörű menüjének keretének. Ha kimásolod és beilleszted ezt a html-t és css-t, akkor így fog kinézni.

Példa keretre (sablonra) a jövőbeli menühöz

Minden nagyon egyszerűen alakult, természetesen azonnal gyönyörű főmenüt akarsz, de az alapok megértése nélkül egyszerűen nem tudsz jó menüt létrehozni html és css hibák nélkül.

Számos más CSS-módszer is létezik a menük vízszintessé tételére a float:left; , például display:inline-block; vagy display:flex; , de javasolt a fent leírt módszer alkalmazása.

Töltsük meg menüsablonunkat különféle stílusokkal, és készítsük el szép.

Példák egy webhely gyönyörű vízszintes menüjére

Most adok néhány kész példát egy kész vízszintes menü kialakítással.

Az összes "szép dolgot" saját maga is létrehozhatja, és nem kereshet az interneten. Ennek legegyszerűbb módja az alábbi példák egyikén alapul.

Egyszerű kék menü külön elemekkel

CSS-stílusok a „felső” menühöz

Az alábbiakban a menü stílusai láthatók. A HTML ugyanaz marad, mint a "csontváz" menüben.

Ul (lista-stílus: nincs; /*listajelölők eltávolítása*/ margó: 0; /*remove padding*/ padding-left: 0; /*remove padding*/ margin-top: 25px; /*behúzás tetejére*/ ) a ( szövegdekoráció: nincs; /*hivatkozás szöveg aláhúzásának eltávolítása*/ háttér:#30A8E6; /*háttér hozzáadása a menüelemhez*/ color:#fff; /*hivatkozás színének módosítása*/ kitöltés:10px; /*kitöltés hozzáadása */ font-family: arial; /*betűtípus módosítása*/ border-radius:4px; /*kerekítés hozzáadása*/ -moz-transition: mind 0,3s 0,01s könnyű; /*do sima átmenet*/ -o-átmenet: minden 0,3 s 0,01 s könnyű; -webkit-átmenet: minden 0.3s 0.01s könnyű; ) a:hover ( background:#1C85BB;/*Lebegő effektus hozzáadása*/ ) li ( float:left; /*A menü megvalósításához helyezze el a listát vízszintesen*/ margin-right:5px; /*Kitöltés hozzáadása a menüelemekhez* / )

A főmenü egy színes vonalon található, piros háttérrel

css stílusú menü színes vonalon

ul ( lista-stílus: nincs; /*listajelölők eltávolítása*/ margó: 0; /*remove padding*/ padding-left: 0; /*remove padding*/ margin-top: 25px; /*behúzás a tetejére*/ háttér :#FF4444; /*háttér hozzáadása a teljes menühöz (a paraméter lecserélésével a teljes menü színe megváltozik)*/ magasság: 50px; /*magasság beállítása*/ ) a ( szövegdekoráció: nincs; /* távolítsa el a hivatkozás szövegének aláhúzását* / background:#FF4444; /*háttér hozzáadása a menüelemhez (a beállítás lecserélésével az összes menüpont színe megváltozik)*/ color:#fff; /*a hivatkozás színének módosítása* / padding:0px 15px; /*kitöltés hozzáadása*/ font-family: arial; /*betűtípus módosítása*/ line-height:50px; /*menü függőleges igazítása*/ megjelenítés: blokk; jobb szegély: 1px szilárd # F36262; /*szegély hozzáadása a jobb oldalra*/ -moz-transition : minden 0,3 s 0,01 s egyszerű; /*zökkenőmentes átmenet*/ -o-átmenet: minden 0,3 mp 0,01 mp egyszerű; -webkit-transition: minden 0,3 s 0,01 mp egyszerű menü*/ )

Legördülő menü HTML+CSS-ben

A megvalósításhoz további legördülő (legördülő) menü az oldalon bármely menüpontnál a vízszintes menü bármely hivatkozásához egy további elemlistát kell hozzáadnunk a HTML-kódhoz, és módosítanunk kell a CSS-stílusokat. A stílusoknál egy egyszerű trükköt alkalmazunk - a legördülő menü megjelenítését a felső menüben a kívánt elemre állítjuk. Vegyük például a „szolgáltatások” tételt.

Példa egy egyszerű legördülő menü létrehozására

A legördülő menü HTML kódja

itthon
Szolgáltatások
- Szolgáltatás 1
- Hosszú szolgálat 2
- Szolgáltatás 3
Árak
Kapcsolatok

Legördülő CSS-stílusok

ul ( lista-stílus: nincs; /*listajelölők eltávolítása*/ margó: 0; /*remove padding*/ padding-left: 0; /*remove padding*/ margin-top:25px; /*behúzás a tetejére*/ háttér :#819A32; /*háttér hozzáadása a teljes menühöz*/ magasság: 50 képpont; /*magasság beállítása*/ ) a ( szövegdekoráció: nincs; /*a hivatkozás szövegének aláhúzásának eltávolítása*/ háttér:#819A32 ; /*háttér hozzáadása a menüelemhez*/ color:#fff; /*hivatkozások színének módosítása*/ padding:0px 15px; /*kitöltés hozzáadása*/ font-family: arial; /*betűtípus módosítása*/ sormagasság :50px; /*menü igazítása függőlegesekhez*/ megjelenítés: blokk; jobb oldali szegély: 1 képpont tömör #677B27; /*szegély hozzáadása jobbra*/ -moz-transition: minden 0,3 mp 0,01 mp egyszerű; /*egy sima átmenet*/ -o-transition: minden 0,3 mp 0,01 mp könnyű; -webkit-transition: minden 0,3 mp 0,01 mp könnyű :left; /*A lista vízszintes elhelyezése a menü megvalósításához* / position:relative; /*pozicionálás pozíciójának beállítása*/ ) /*A rejtett legördülő menü stílusai* / li > ul ( pozíció:abszolút; felső:25px; display:none; ) /*A rejtett rész láthatóvá tétele*/ li:hover > ul ( display:block; width:250px; /*A legördülő menü szélességének beállítása*/ ) li:hover > ul > li ( float:none; /* Távolítsa el a vízszintes elhelyezést* / )

És annak megértéséhez, hogy pontosan milyen szolgáltatásokkal és kategóriákkal kell rendelkeznie, azt javaslom, hogy ismerkedjen meg az anyaggal:.

Igyekeztem a lehető legrövidebben elmesélni, hogyan készítsünk vízszintes főmenüt, készítsünk néhány sablont, hogyan tegyünk bele egyszerű stílusokat és hogyan tegyük szebbé, hogyan készítsünk legördülő menüt az oldalunkhoz. A kényelem kedvéért az összes fent bemutatott menüt egy html fájlba gyűjtöttem össze, amelyet lent letölthet. Így néz ki a képernyőképen:

Köszönöm a figyelmet.

Vízszintes menü a webhely szakaszainak listája, ezért logikusabb az elemen belüli jelölés

Vízszintes menü készítése: jelölési és tervezési példák

HTML jelölés és alapvető stílusok a vízszintes menühöz

Alapértelmezés szerint az összes listaelem megtalálható függőlegesen, amely a tárolóelem teljes szélességére kiterjed, ami viszont átfogja a tárolóblokk teljes szélességét.

HTML jelölés a vízszintes navigációhoz

Menü tétel
Menü tétel
Menü tétel

Ezenkívül a címke belsejében elhelyezett vízszintes menü is elhelyezhető az elemen belül

...

további lehetőség

Elhelyezésük többféleképpen lehetséges vízszintesen. Először vissza kell állítania a navigációs elemek alapértelmezett böngészőstílusait:

Ul (lista-stílus: nincs; /*eltávolítja a lista jelölőit*/ margó: 0; /*eltávolítja az 1em felső és alsó margóját*/ padding-left: 0; /*eltávolítja a 40 képpontos bal oldali kitöltést*/ ) a (szövegdekoráció: nincs; /*a linkszöveg aláhúzásának eltávolítása*/)

1. li módszer (megjelenítés: soron belüli;)

Tegye sorba a listaelemeket. Ennek eredményeként vízszintesen helyezkednek el, a jobb oldalon 0,4 em-nek megfelelő hézagot adnak közéjük (a betűmérethez viszonyítva). Az eltávolításhoz adjon hozzá egy negatív jobb margót a li li-hez (margin-right: -4px;) . Ezután alakítsa ki a hivatkozásokat tetszés szerint.

2. módszer. li (lebegtetés: balra;)

A lista elemeit lebegővé tesszük. Ennek eredményeként vízszintesen vannak elrendezve. Az ul konténerblokk magassága nulla lesz. A probléma megoldására hozzáadjuk (túlcsordulás: rejtett;) az ul -hoz, kibővítve azt, és így lehetővé teszi, hogy lebegő elemeket tartalmazzon. A hivatkozásokhoz adjon hozzá egy (megjelenítés: blokk;) és stílusát tetszés szerint.

3. li módszer (megjelenítés: inline-block;)

Listaelemek készítése inline-block. Vízszintesen vannak elrendezve, a jobb oldalon rés keletkezik, mint az első esetben. A hivatkozásokhoz adjon hozzá egy (megjelenítés: blokk;) és stílusát tetszés szerint.

4. módszer ul (megjelenítés: flex;)

Az ul lista rugalmas tárolóvá tétele a . Ennek eredményeként a lista elemei vízszintesen vannak elhelyezve. Adjon hozzá egy (megjelenítés: blokk;)-t a hivatkozásokhoz, és stílusa szerint alakítsa őket.

1. Reszponzív menü aláhúzással, ha egy hivatkozás fölé viszi az egérmutatót

2. Reszponzív menü esküvői weboldalhoz

3. Reszponzív menü fésűkagylóval

4. Reszponzív szalagmenü

5. Reszponzív menü logóval a közepén

6. Reszponzív menü logóval a bal oldalon

Régóta szerettem volna egy cikket írni arról, hogyan kell elkészíteni almenü a css-ben. Sokan csinálják jQueryés egész jól kiderül azonban az alkotás egész alapelve almenü a css-ben itt bemutatom. És már tovább, ebből az alapból kiindulva tovább fejlesztheti az almenüt.

Azonnal hozom CSS kód:

* html ul li (
balra lebeg;
}
* html ul li a (
magasság: 1%;
}
ul(
border-bottom: 1px solid #000;
lista-stílus: nincs;
margó: 0;
párnázás: 0;
szélesség: 100 képpont
}
ul li (
pozíció: relatív;
}
ul li a (
display:block;
keret: 1px tömör #000;
keret-alsó: 1px;
kitöltés: 5px
szöveg-dekoráció: nincs;
}
li ul (
kijelző: nincs;
bal: 99px;
pozíció: abszolút;
felső: 0;
}
li:hover ul (
display:block;
}

A legfontosabb itt a választó " li: lebeg az ul". Valójában a menü tartalmát mutatja. Alapértelmezés szerint " kijelző: nincs", és ha az egérmutatót egy menüelem fölé viszi, az almenü a következő lesz: " kijelző: blokk", azaz látható. Ez a legfontosabb. Az első két szelektorban is (ami * ) megy CSS hack számára AZAZ, különben semmi sem fog működni ebben a böngészőben nélküle. Minden más az megjelenés amin persze lehet változtatni.

hozom és HTML kód:

itthon

1. menü
- 1. almenü
- 2. almenü
- 3. almenü

2. menü
- 4. almenü
- 5. almenü
- 6. almenü
- 7. almenü
- 8. almenü

Ha alaposan átgondolja ezt a szerkezetet, minden nagyon világos lesz. Címke ul- menüt hoz létre. Ha egy ul egy másik belsejében van ul, akkor ez már egy almenü. Egy címke li egy adott menüpontért felelős.

Természetesen a menü a legegyszerűbb, mind logikailag, mind szerkezetileg, mind pedig a dizájn tekintetében. Természetesen használhatod jQuery sima nyílást készíteni. A kialakítást is megváltoztathatja, de az egész elv ugyanaz marad, mint ebben CSS-ben és HTML-ben írt almenü.

Üdvözlet! Ha kezdő tördelő vagy, akkor előbb-utóbb rájössz, hogy szeretnéd valahogy felpezsdíteni az oldalaidat, legalább egy kicsit interaktívvá tenni. A lehető legjobban a CSS-animációk segíthetnek itt. De tudnia kell, hogy hol és hogyan alkalmazza őket.

Ma elmondom hogyan készítsünk legördülő menüt a tisztáncssés hogyan adjunk hozzá simaságot CSS animációk segítségével. Ha nem tudja, itt az ideje, hogy megismerkedjen az alapokkal.

A HTML + CSS menü beírása

Először is, hogy legyen mit dolgozni, készítsünk egy egyszerű, egyszintű menüt. Nem fogunk sokat foglalkozni a tervezéssel, az egyértelműség kedvéért ennyi elég:

Amink van? A leghétköznapibb rendezetlen lista a "top_menu" azonosítóval és pont ennek a lista elemeibe burkolt hivatkozásokkal. Minden elcsépelt és egyszerű. Lebegés közben a menüpontok színe megváltozik... ennyit már tudsz és értesz (remélem).

Második szintű menü hozzáadása

Réteges menü létrehozásához fel kell adnunk egy második rendezetlen listát az elsőbe. Azt hiszem, valahol az első leckéken vetted. És azt is, hogy nem csak a listánkba kell beilleszteni, hanem a listaelembe, azaz a címkébe " li", közvetlenül a záró "a" címke után.

A beágyazott listák elhelyezése abszolút a következőhöz képest li' amelybe be vannak ágyazva. És minden " li» a legfelső szinthez képest ( relatív). Annak érdekében, hogy a legördülő menü AZONNAL a legfelső szintű menünk után legyen, azt (legördülő - “ belső_menü”) be kell állítani

pozíció: abszolút; felső: 100%;

Ez azt jelenti, hogy a szülő felső határának behúzása megegyezik a szülő magasságával. Nagyon logikus szerintem.

A pozicionáláson kívül a legördülő menüt a legfelső szintű menüvel azonos stílusban kell megadni. Alma az almafáról, ahogy mondják...

Amint látja, a legördülő menünk még nem úgy néz ki, mint egy legördülő menü, hanem leesett és lóg. De nem baj, hamarosan megoldjuk.

Hogyan készítsünk egy legördülő menüt igazán legördülővé

Nincs is könnyebb! Ahhoz, hogy a beágyazott listánk legördülő menü legyen, csak el kell rejtenie! És csak akkor nyissa meg, ha az egérmutató a legördülő menüt tartalmazó legfelső szintű menüelem felett söpör. Lehet, hogy kissé bonyolultan hangzik, de valójában néhány sornyi kóddal megoldható.

Hozzáadás a legördülő menühöz:

kijelző: nincs;

És a megjelenítéséhez regisztrálnia kell:

#top_menu > li:hover > ul (megjelenítés: blokk; )

Mit üzen nekünk ez a rengeteg válogató? A végétől olvasunk. Stílusokat (láthatóságot) állítunk be a második szintű listához, ami az első szintű listaelemen belül található, de ezek a stílusok csak akkor működnek, ha az egeret az elem fölé visszük.li", amely második szintű listánkat tartalmazta.

Remélem érthetően fejeztem ki magam. Ha nem, próbálja meg néhányszor elolvasni. Még jobb, ha megérti a kódot. Lássuk, mit kaptunk:

Igen, úgy tűnik, elértük, amit szerettünk volna – csináltunk egy legördülő menüt, egy igazi legördülő menüt, a fenébe is! De valami hiányzik neki. Tudod mit? Simaság! Hiszen minden úgy néz ki, mintha a menü nem esik ki, hanem egyszerűen megjelenik. És nagyon élesen, akár azonnal, mondhatnám.

Nos, játsszunk vele még egy kicsit.

A sima legördülő menü egyszerű

Tehát készítsünk egy sima legördülő menüt tiszta CSS. Miért csinálja? Mert az emberek szeretik, ha minden sima és puha... és gyönyörűen néz ki. Ez előnyt jelent a webhely használhatósága szempontjából. Gyerünk!

Ne feledje, hogy csak pontos matematikai értékeket animálhat, például 50 képpont és 300 képpont, 0 és 100%, 0,5 és 1,0 stb. Esetünkben nem tudjuk animálni a legördülő menü két állapotát ( display:none;és display:block;).

De helyettesíthetjük őket átlátszósággal - opacitás:0 és átlátszatlanság:1. És állítsa be azt az időt, ameddig a menünk átlátszó állapotból megjelenik. Igen, működik, de nem egészen az a hatás, mint amire számíthat. Tehát nehezítsük meg egy kicsit. De megéri, higgy nekem.

Az animáció gördülékenyebbé és kiszámíthatóbbá tételéhez fix magasságot kellett beállítanunk a legördülő menüpontokhoz, bár ezt meg is tudtuk tenni. Nagyon sok módszer létezik, csak találj ki kombinációkat és oldd meg a problémákat.

Ahogy a kódból is látható, animáltuk a legördülő elemek magasságát és átlátszóságát. Ez elégnek bizonyult ahhoz, hogy szép legyen sima animáció legördülő menü.

Mire van szükségünk az animációhoz? Menüpontjaink két állapota, valamint az átmeneti tulajdonság, amely ezeket az állapotokat interpolálta, vagyis kitöltötte az összes köztes értéket a megadott időtartamra. Ez minden!

A jQuery használatával még egyszerűbben is meg lehetne csinálni, de először megegyeztünk, hogy ma tiszta CSS-sel fogunk dolgozni. És még szebbet lehetne csinálni, ha Bezier-görbéket adunk az animációkhoz, de ez a téma kicsit túlmutat a mai kor keretein. De később biztosan visszatérünk rá.

Következtetés:

Mostantól dicsekedhet barátaival és családjával, hogy tudja, hogyan készíthet legördülő menüt tiszta CSS-sel. Ez egy igazán hasznos készség, amelyre többször is szüksége lesz. Nos, ítélje meg maga, hány webhelyet látott statikus menüvel? Nem, a legtöbb webhely rendelkezik legördülő menüvel.

Egyébként ez volt az első CSS oktatóprogramom. Írd le, hogy tetszik? Mindent világosan elmagyarázott, vagy részletesebben kell belemennie? És egyáltalán megéri-e továbbra is cikkeket írni a CSS-ben való life hackek témájában?

Köszönöm a figyelmet és hamarosan találkozunk!

A végére olvastad?

Hasznos volt ez a cikk?

Nem igazán

Pontosan mi nem tetszett? A cikk hiányos vagy valótlan?
Írja meg kommentben, és ígérjük, hogy javítunk!

Ebben az oktatóanyagban egy klasszikus vízszintes menüt készítünk tiszta CSS-ben. Ikonok vannak a listákban. Ha egy elem fölé viszi az egérmutatót, simán megváltoztatja a gomb és a szöveg színét, és árnyékot ad hozzá. A legördülő listák többszintűvé tehetők, és ami a legfontosabb, mindez egyszerűen megvalósítható a tiszta CSS3-ban.

A leckében a következőket fogjuk használni:

display:flex;
használja az átmenetet ;
pozíció segítségével pozícionáljuk az elemeket.

A vízszintes menü HTML szerkezete

Először is írjuk meg a vízszintes menü jelölését. Megnyitjuk a fejlesztői környezetünket, az én esetemben ez a PhpStorm, hozzunk létre egy index.html fájlt, írjuk meg a html:5 keretrendszert, cseréljük le a lang-ot ru-ra.

A kódoláson kívül minden meta törlöm, megírom a címem " tom menü».

A törzs közé írjuk a header tag-et, és benne van egy blokk a .dws-menu osztállyal, amelyben a menünk fog elhelyezkedni. Továbbá a felépítés a következő lesz, listákat készítünk öt darabos mennyiségben. Minden listához tartozik egy hivatkozás a href="#" attribútummal. Aztán lesz egy I ikon a .fa .fa- osztállyal.

Kattintson az Alkalmaz gombra.

Írjuk be a menüpontok nevét ( Kezdőlap, Termékek, Szolgáltatások, Hírek, Kapcsolatok).

Ezután válassza ki és csatlakoztassa az ikonokat. Megyünk a Font Awesome webhelyre, és kiválasztjuk az alábbi menüelemek ikonjait:

Az archívumot az oldalról ikonokkal letöltjük, tartalmát kibontjuk a számítógépünkre, a fonts mappát és a css mappát a fejlesztői környezetünkbe másoljuk.

A betűtípusok mappa ikon-betűtípusokat, a css mappa pedig azok stílusát tartalmazza. A tömörített stílusokat a font-awesome.min eltávolíthatja, beleértve a tömörítetlen font-awesome.css fájlt is.

Az index.html-ben összekapcsolunk ikonokat, és minden elemnek előírjuk a saját ikonstílusát ( itthon, bevásárlókocsi, fogaskerekek, th-lista, boríték-nyitott).

Elkészítettük a főkeretet, a főstílus leírása után kialakítjuk az almenüt, most pedig készítünk egy fájlt, ahol a style.css vízszintes menü főbb stílusait írjuk le és az index.html-hez kapcsoljuk. A stílusok összekapcsolásának ellenőrzésére létrehozok egy img mappát, amelyben egy tetszőleges képet helyezek el a háttér. Írjuk meg a kép kapcsolatát a háttér segítségével.

Body( background-image: url(../img/ep_naturalwhite.png"); )

CSS-stílusok leírása a vízszintes menüben

Először is állítsuk vissza az összes behúzást, amelyet a különböző böngészők alapértelmezés szerint beállíthatnak:

Dws-menu *( margó: 0; kitöltés: 0; )

Állítsuk a fejlécet 200 pikk-re. és rendelje hozzá a letölthető és az oldalához külön-külön csatlakoztatható Cuprum betűtípust, minden esetre írunk további betűtípusokat.

Fejléc (margó: 200 képpont; betűcsalád: Cuprum, Arial, Helvetica, serif nélkül; )

Rejtsük el a jelölőket a listákból:

dws-menu ul, .dws-menu ol( lista-stílus: nincs; )

Jelenítsük meg a listákat vízszintesen a display: len , és tegyük középre:

Dws-menu > ul(megjelenítés: flex; justify-content: center; )

A fejlécben csak felülről húzzunk be, írjuk a margin-top .

Fejléc( margó felső: 200 képpont; font-család: Cuprum, Arial, Helvetica, sans-serif; )

Tervezzük meg étlapunkat, állítsuk be a gombok színét, betűtípusát stb.

Dws-menu > ul li a( kijelző: blokk; háttér: #ececed; kitöltés: 15px 30px 15px 40px; betűméret: 14px; szín: #454547; szövegdekoráció: nincs; szövegátalakítás: nagybetűs; )

Ezután pozícionáljuk az ikonokat, hozzárendeljük a listák pozícióját: relatív; az ikonok további középre helyezéséhez:

dws-menu > ul li( pozíció: relatív; )

dws-menu > ul li > a i.fa(pozíció: abszolút; felső: 15 képpont; balra: 12 képpont; betűméret: 18 képpont; )

Rendeljünk szegélyelválasztót a listákhoz, jelöljük ki az első LI elemet, és állítsuk be a szegélyt. Kijelöljük az utolsó LI elemet, és hozzárendeljük egy hasonló szegélyt.

Dws-menu > ul li:first-child( border-bal: 1px solid #b2b3b5; ) .dws-menu > ul li:last-child( border-right: 1px solid #babbbd; )

Elválasztók készítése LI listákhoz:

.dws-menu > ul li( pozíció: relatív;

szegély-jobb: 1px tömör #c7c8ca;

A menü elnyerte a kinézetét, majd lebegtetve elkezdheti a stílusok leírását.

Animálja a vízszintes menüt az egérmutatóval

Dws-menu li a:hover(háttér: #454547; szín: #ffffff; box-shadow: 1px 5px 10px -5px fekete; átmenet: minden 0,3 másodperccel egyszerű; )

És hogy ez a hatás zökkenőmentesen eltűnjön, add hozzá ezt a stílust a nyugalmi hivatkozáshoz:

.dws-menu > ul li a( kijelző: blokk; háttér: #ececed; kitöltés: 15px 30px 15px 40px; betűméret: 14px; szín: #454547; szövegdekoráció: nincs; szövegátalakítás: nagybetűs;

A főmenü elkészült, és megkezdheti az almenük és almenük leírását.

A CSS/HTML legördülő menü leírása

Megnyitjuk az index.html-t és hozzáadunk például egy további menüt a termékekhez. Az LI listák közé beszúrjuk az UL -t, ebben öt listát helyezünk el, amelyekben a herf=”#” attribútumú hivatkozások lesznek.

ul>li*5>a

Kattintson az Alkalmaz gombra, írja be az elemek nevét ( Ruházat, Elektronika, Élelmiszer, Eszközök, Élet. kémia).

ruházat
Elektronika
Étel
Eszközök
Gen. kémia

Ezután megnyitjuk a style.css-t, és leírjuk az almenü stílusait.

Válassza ki a második listát, és adja meg a pozícióját: abszolút; , állítsa a minimális szélességet 150 képpontra.

/*almenü*/ .dws-menu li ul( pozíció: abszolút; min-szélesség: 150 képpont; )

Írjuk a listákba 1 csúcs határát.

Dws-menu li > ul li(szegély: 1px szilárd #c7c8ca; )

Az almenü hivatkozásainál állítsa a kitöltést 10 képpontra, távolítsa el a szövegátalakítást, és tegye a hátteret néhány árnyalattal sötétebb hátteret: #e4e4e5; .

Dws-menu li > ul li a( kitöltés: 10px; szövegátalakítás: nincs; háttér: #e4e4e5; )

Ezután létrehozunk egy másik beágyazott menüt. Menjünk a jelölőfájlhoz, és például az "Elektronikában" analógia útján alakítjuk ki a menüt, ahogy korábban is tettük. Írja le a bekezdések címsorait ( Fényképezőgépek, számítógépek, telefonok) és mentse el.

Elektronika
- kamerák
- Számítógépek
- Telefonok

Megjelennek, de rejtve a főmenü alatt, most pozíció: abszolút; beágyazott UL, és tolja el 150 csúccsal. oldalra:

Dws-menu li > ul li ul(pozíció: abszolút; jobbra: -150px; felül: 0; )

/*almenü*/ .dws-menu li ul( pozíció: abszolút; min-szélesség: 150 képpont;

Megjelenésükhöz pedig kijelöljük a listákat, és megjelenítjük a display segítségével: blokk; .

dws-menu li:hover > ul( display: block; )

Mostantól többszintű menüket is hozzáadhat az UL blokk egyszerű másolásával és elemeinek megváltoztatásával.

itthon
Termékek
- ruházat
  - Cipők
  - Dzsekik
  - Nadrág
- Elektronika
  - kamerák
  - Számítógépek
  - Telefonok
    - Samsung
    - Flf
    - alma
- Étel
- Eszközök
- Gen. kémia
Szolgáltatások
- Szolgáltatás 1
- 2. szolgáltatás
- Szolgáltatás 3
hírek
Kapcsolatok

Ezután díszítsük a gombokat az utolsó lépések hozzávalójával. CSS generátort használok, több előre beállítottam van, létrehozhat sajátot, az én esetemben csak másolom adott kódotés helyezze a helyére a hátteret, amit korábban írtam.

.dws-menu > ul li a( display: block;

/* Permalink – a színátmenet szerkesztéséhez és megosztásához használja: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98,757577+100;Egyéni+3 */ háttér: #c9c9c9 ; /* Régi böngészők */ háttér: -moz-linear-gradient(top, #c9c9c9 0%, #f6f6f6 2%, #c4c5c7 98%, #757577 100%); /* FF3.6-15 */ háttér: -webkit-linear-gradient(top, #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); /* Chrome10-25,Safari5.1-6 */ háttér: lineáris gradiens(lefelé, #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ szűrő: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c9c9c9", endColorstr="#757577",GradientType=0); /* IE6-9 */

padding: 15px 30px 15px 40px; betűméret: 14 képpont; szín: #454547; szöveg-dekoráció: nincs; text-transform:nagybetűs; átmenet: minden 0,3 s könnyű; )

/* Permalink – a színátmenet szerkesztéséhez és megosztásához használja: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 */ háttér: #e0e1e5; /* Régi böngészők */ háttér: -moz-linear-gradient(top, #e0e1e5 0%, #454547 2%, #454547 98%, #e0e1e5 100%); /* FF3.6-15 */ háttér: -webkit-linear-gradient(top, #e0e1e5 0%,#454547 2%,#454547 98%,#e0e1e5 100%); /* Chrome10-25,Safari5.1-6 */ háttér: linear-gradient(lefelé, #e0e1e5 0%,#454547 2%,#454547 98%,#e0e1e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ szűrő: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e0e1e5", endColorstr="#e0e1e5",GradientType=0); /* IE6-9 */

szín: #ffffff; box-shadow: 1px 5px 10px -5px fekete; átmenet: minden 0,3 s könnyű; )

Ha szükséges ezt a menüt az oldalon meg tudod alakítani a hozzád illő stílust, elég egyszerű színt generálni és lecserélni a kódban. Az eredmény egy egyszerű és egyben szép vízszintes menü tiszta CSS-sel.

sushiandbox.ru A számítógép elsajátítása - Internet. Skype. Közösségi hálózatok. Leckék a Windowsról.

Legördülő menü html. CSS függőleges legördülő menü az egérmutatón és a réteges menükön. Hogyan készítsünk vízszintes legördülő menüt

HTML kód a vízszintes menühöz

Szabványos CSS-stílusok a vízszintes menühöz

Példa keretre (sablonra) a jövőbeli menühöz