Tiszta CSS / HTML legördülő menü

  1. Tiszta CSS / HTML legördülő menü Ebben a bemutatóban klasszikus vízszintes menüt készítünk a tiszta...
  2. A vízszintes menüt animálás közben mutatjuk be.
  3. Ismertesse a CSS / HTML legördülő menüt

Tiszta CSS / HTML legördülő menü

Ebben a bemutatóban klasszikus vízszintes menüt készítünk a tiszta CSS-en. A listában ikonok vannak. Ha egy elemre mutat, fokozatosan megváltoztatja a gomb és a szöveg színét, hozzáad egy árnyékot. A legördülő listák többszintűek lehetnek, és a fő dolog mindössze egyszerűen megvalósítható a tiszta CSS3-on.

A lecke folytatása itt - 2. rész MOBIL VERSION vízszintes menü ”.

Lásd a tollat POyzbW Denis ( @Dwstroy ) on CodePen .

A lecke használatában:

  • kijelző: flex;
  • az átmenet használata;
  • pozícionálja az elemeket.

HTML vízszintes menüstruktúra

Először írja be a jelölést a vízszintes menü alatt. Az én esetünkben nyitjuk meg fejlesztési környezetünket, ez a PhpStorm, hozzon létre egy index.html fájlt, írja fel a html: 5 keretet, cserélje ki a lang-ot a ru-val.

Minden meta törlődik a kódolás kivételével, a „ Tom menü ” címét regisztrálom.

A test között írjuk a fejléc címkét, és benne van egy blokk a .dws menüvel, amely tartalmazza a menüünket. Ezután a struktúra a következő lesz, listákat készítünk öt darab mennyiségben. Minden listában egy kapcsolat lesz a href = "#" attribútummal. Ezután az .fa .fa- osztályú ikonra megyek

<header> <nav class = "dws-menu"> ul> li * 5> a [href = "#"]> i.fa.fa- </ nav> </ header>

Nyomja meg, hogy alkalmazzuk.

Írjuk fel a menüelemek nevét ( Otthon, Termékek, Szolgáltatások, Hírek, Kapcsolatok ).

Ezután válassza ki és csatlakoztassa az ikonokat. Ugrás a webhelyre, kiválasztjuk ezeket a menüpontokat:

<i class = "fa fa home "> </ i> <i class = "fa fa- bevásárlókosár "> </ i> <i class = "fa fa"> </ i> <i osztály = "fa fa -lista "> </ i> <i class = "fa fa -open-open "> </ i>

<i class = fa fa home > </ i> <i class = fa fa- bevásárlókosár > </ i> <i class = fa fa> </ i> <i osztály = fa fa -lista > </ i> <i class = fa fa -open-open > </ i>

Töltse le az archívumot a webhelyről ikonok, kivonja a tartalmát a számítógépére, másolja a betűtípusok mappáját és a css mappát a fejlesztési környezetbe.

A betűtípusok mappa ikon betűtípusokat tartalmaz, és a css mappa tartalmazza a stílusokat. A tömörített stílusok eltávolíthatók a font-awesome.min-ről, összekapcsoljuk a tömörítetlen font-awesome.css-t.

Az index.html-ben ikonokat kapcsolunk össze, és minden egyes elemet saját ikonstílussal regisztrálunk ( otthon , bevásárlókosár , fogaskerekek , lista , boríték nyitva ).

Készítettük a fő keretet, létrehoztunk egy almenüt a főstílus leírása után, és most létrehozunk egy fájlt, ahol leírjuk a horizontális menü style.css főbb stílusait, és csatlakoztatjuk az index.html-hez. A stílusok csatlakoztatásának ellenőrzéséhez hozzon létre egy img mappát, benne tetszőleges képet helyezek a háttérre. Írjunk háttérképet a képhez.

body {background-image: url ("../ img / ep_naturalwhite.png"); }

Ahogy látjuk, mindent megmutattunk, majd folytatjuk a stílusok leírását.

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

.dws-menü * {margó: 0; párnázás: 0; }

Állítsa a fejlécet 200 csúcsra. és hozzárendelje, melyiket töltheti le és külön-külön csatlakozhat magához a webhelyen, minden esetben írjon további betűtípusokat.

fejléc {margó: 200px; font-család: Cuprum, Arial, Helvetica, sans-serif; }

A listák jelölőinek elrejtése:

.dws-menu ul, .dws-menu ol {list-style: nincs; }

A listák vízszintesen jelennek meg a kijelzőn: len, és ezt a központban fogjuk tenni:

.dws-menu> ul {kijelző: flex; indokolja a tartalmat: központ; }

A fejlécben csak a tetejét fogjuk bevinni, majd egy margó tetejét írunk.

fejléc { margin-top: 200px; font-család: Cuprum, Arial, Helvetica, sans-serif; }

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

Válasszon linkeket nav> ul li, és blokkolja azokat. Állítsa be a menü hátterét, írja be a szövegrészeket, adja meg a méretet, a színt, távolítsa el az aláhúzást, és tegye a fejléceket nagybetűvel.

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

Ezután helyezze el az ikont, hozzárendelje a listákat: relatív; az ikonok további összehangolásához:

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

Ezután kijelöljük az ikont, helyezzük el őket abszolút helyzetben, tesszük a bemélyedést felülről 15 csúcsra, a bal 12 csúcsról, növeljük a méretet 18 csúcsra.

.dws-menu> ul li> a i.fa {pozíció: abszolút; top: 15px; balra: 12px; betűméret: 18px; }

Adja meg a szeparátort a listák határának formájában, válassza ki az első LI elemet, állítsa be a szegélyt. Kiválasztjuk az utolsó LI elemet, és hozzárendeljük egy hasonló határhoz.

.dws-menu> ul li: első gyermek {bal oldali: 1px szilárd # b2b3b5; } .dws-menu> ul li: utolsó gyermek {határ-jobb: 1px szilárd #babbbd; }

LIT-listák határolóinak készítése:

.dws-menu> ul li {pozíció: relatív; jobbra: 1px szilárd # c7c8ca; }

A menü megjelenése megtörtént, majd folytathatja a stílusok leírását a lebegés közben.

A vízszintes menüt animálás közben mutatjuk be.

Válassza ki a linkeket, és rendeljen hozzá egy színt a blokkhoz, és adja meg a hivatkozás színét az ikonnal fehérre. Adjunk hozzá még egy sötét árnyékot. Az átmenet segítségével 0,3 másodperc alatt sima megjelenést fogunk elérni:

.dws-menu li a: lebeg {háttér: # 454547; szín: #ffffff; doboz-árnyék: 1px 5px 10px -5px fekete; átmenet: mindegyik 0,3-as; }

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

.dws-menu> ul li a {kijelző: blokk; háttér: #ececed; párnázás: 15px 30px 15px 40px; betűméret: 14px; szín: # 454547; szöveg-dekoráció: nincs; szöveg-átalakítás: nagybetűs; átmenet: mindegyik 0,3-as; }

A főmenü befejeződött, és folytathatja az almenü és az azokba ágyazott almenük leírását.

Ismertesse a CSS / HTML legördülő menüt

Körülbelül megnyitjuk az index.html fájlt, és például hozzáadunk egy további menüt a termékekhez. Helyezze be az UL-t az LI listák közé, és helyezzen bele öt listát, ami a herf = ”#” attribútummal rendelkező linkeket tartalmazza.

ul> li * 5> a [href = "#"]

Megnyomjuk, hogy alkalmazzuk, írjuk meg az elemek nevét ( Ruházat, elektronika, élelmiszer, eszközök, élet. Kémia ).

<ul> <li> <a href="#"> Ruházat </a> </ li> <li> <a href="#"> Elektronika </a> </ li> <li> <a href = "#"> Élelmiszer </a> </ li> <li> <a href="#"> Eszközök </a> </ li> <li> <a href="#"> Élet. kémia </a> </ li> </ ul>

Ezután nyissa meg a style.css fájlt és írja le az almenü stílusait.

Kiválasztjuk a második listát, és hozzárendeljük: abszolút; , állítsuk be a minimális szélességet 150 csúcsra.

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

Írjunk a határlistákhoz egy csúcson.

.dws-menu li> ul li {border: 1px szilárd # c7c8ca; }

Az almenüben lévő hivatkozásoknál 10 csúcsot fogunk megadni., Távolítsuk el a szövegátalakítást, és a háttér pár tónusúvá váljunk sötétebb háttérrel: # e4e4e5; .

.dws-menu li> ul li a {padding: 10px; szöveg-átalakítás: nincs; háttér: # e4e4e5; }

Ezután hozzon létre egy másik almenüt. Menjen a jelölőfájlhoz, és például az "Elektronika" űrlapon analógiás menüben, mint korábban. Leírjuk a tételek fejlécét ( kamerák, számítógépek, telefonok ) és mentjük.

<li> <a href="#"> Elektronika </a> <ul> <li> <a href="#"> Fényképezőgépek </a> </ li> <li> <a href="#"> Számítógépek </a> </ li> <li> <a href="#"> Telefonok </a> </ li> </ ul> </ li>

Őket kivitték, de elrejtették a főmenü alatt, most a helyzet: abszolút; beágyazott UL-t és a 150 csúcsra mozgatja. oldalra:

.dws-menu li> ul li ul {pozíció: abszolút; jobbra: -150px; top: 0; }

Ezután az almenü jelenik meg, amikor a főmenü főbb elemeit célozza meg, ehhez hozzáadjuk a kijelzőt: nincs; és ezáltal elrejti az összes belső pontot.

/ * almenü * / .dws-menu li ul {pozíció: abszolút; min-szélesség: 150px; kijelző: nincs; }

A megjelenésükhöz kijelöljük a lebegő listákat és megjelenítjük őket a kijelzőn: block; .

.dws-menu li: hover> ul {kijelző: blokk; }

Most már többszintű menüket is hozzáadhat egyszerűen az UL blokk másolásával, az elemek megváltoztatásával.

<ul> <li> <a href="#"> <i class = "fa fa-home"> </ i> Kezdőlap </a> </ li> <li> <a href="#"> < i class = "fa fa-shopping-cart"> </ i> Termékek </a> <ul> <li> <a href="#"> Ruházat </a> <ul> <li> <a href = "#"> Cipők </a> </ li> <li> <a href="#"> Kabátok </a> </ li> <li> <a href="#"> Nadrágok </a> < / li> </ ul> </ li> <li> <a href="#"> Elektronika </a> <ul> <li> <a href="#"> Fényképezőgépek </a> </ li> <li> <a href="#"> Számítógépek </a> </ li> <li> <a href="#"> Telefonok </a> <ul> <li> <a href="#"> Samsung </a> </ li> <li> <a href="#"> Flf </a> </ li> <li> <a href="#"> Apple </a> </ li> < / ul> </ li> </ ul> </ li> <li> <a href="#"> Élelmiszer </a> </ li> <li> <a href="#"> Eszközök </ h a> </ li> <li> <a href="#"> Gen. kémia </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-cogs"> </ i> Szolgáltatások </a> <ul > <li> <a href="#"> 1. szolgáltatás </a> </ li> <li> <a href="#"> 2. szolgáltatás </a> </ li> <li> <a href = "#"> Szolgáltatás 3 </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-th-list"> </ i> Hírek </a> </ li> <li> <a href="#"> <i class = "fa fa-boríték-nyitva"> </ i> Kapcsolatok </a> </ li> </ ul>

Ezután fejezzük be a gombokat a gombokkal. Használom, több előkészítést készítettem, létrehozhatod a sajátodat, az én esetemben csak ezt a kódot másolom, és azt a háttérbe helyezem, amit korábban írtam.

.dws-menu> ul li a {kijelző: blokk; / * Permalink - ez a színátmenet: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98.757577+100;Custom+3 * / háttér: # c9c9c9 ; / * Régi böngészők * / háttér: -moz-lineáris gradiens (felső, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * FF3.6-15 * / háttér: -webkit-lineáris gradiens (felső, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * Chrome10-25, Safari5.1-6 * / háttér: lineáris gradiens (alul, # 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 * / párnázás: 15px 30px 15px 40px; betűméret: 14px; szín: # 454547; szöveg-dekoráció: nincs; szöveg-átalakítás: nagybetűs; átmenet: mindegyik 0,3-as; } .dws-menu li a: hover {/ * Permalink - ez a színátmenet: 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-lineáris gradiens (felső, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * FF3.6-15 * / háttér: -webkit-lineáris gradiens (felső, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * Chrome10-25, Safari5.1-6 * / háttér: lineáris gradiens (alul, # 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; doboz-árnyék: 1px 5px 10px -5px fekete; átmenet: mindegyik 0,3-as; } dws-menu> ul li a {kijelző: blokk;  / * Permalink - ez a színátmenet: http://colorzilla

Ha szeretné, ezt a menüt olyan stílusra tervezhetjük, amelyet az Ön számára megfelelő a webhelyen, elég csak egy szín létrehozására és a kódba helyezésére. Egy egyszerű és ugyanakkor szép vízszintes menü lett, amely tiszta CSS-ben készült.

Hagyjon megjegyzést: