Függőleges CSS menü: csináld magad

Néhány webmester nem akar időt tölteni a fejlődő nulláról egyszerű elemekből, amelyek már léteznek. Úgy vélik, hogy nincs értelme az idejét vesztegeti a valamit, ami már régóta ott. Sőt, azok számára, akik csak mastering HTML és CSS, fontos, hogy magának egy csomó dolog, hogy van egy jó megértése munkájukat. Ez vonatkozik a menüt. Hozzon létre egy függőleges CSS menük. Ez alapulhat csupán HTML és CSS nélkül a Javascript használatát és JQuery. Minden menü egy lista a linkek, melyek oldalt az oldal.

alaplépéseket

Ahhoz, hogy hozzon létre egy egyszerű függőleges menü CSS, amire szükség van a következő lépéseket:

1. Először is, hogy a hivatkozások listáját (a kód HTML), melyek közül a menü lesz. Adj nekik egy nevet, például a következők:

1. Home.
2. Cégünk története.
3. Útmutató.
4. Services.
5. Kapcsolatok.

2. Ezután Styling linkek, ahogy szeretné segítségével CSS.

Írunk a HTML kódot, tartsa my_Vmenu.html fájlt, és látni, hogyan fog kinézni a böngészőben:

Ez az alapja (váz) étlapunkról. # 1, # 2, stb kell cserélni hivatkozunk. Nézze meg, hogyan néz ki egy böngészőben. A kép nem fog tetszeni. Most azt kell leírni az elemek a stílus, hogy egy teljes függőleges CSS menük.

Leírás stílusok

Hozzon létre egy fájlt my_Vmenu.css, amelyek meghatározzák, amire szeretné javítani a megjelenése egy ilyen fontos eleme a helyén. Itt a kód, bevezetése, amelyek újjáéleszteni a függőleges CSS menük. Ez, és írja az új fájlt, majd elvisszük közelebbről értelmében a fő vonalak kapnak.

RÉSZLETES LEÍRÁSA használt stíluslap

Most tekintsük a részleteket a CSS függőleges menü:

list-style-type lehetővé teszi, hogy távolítsa el a listát markerek. Azáltal „0” a margin és padding távolítsa el a felesleges padding a listában. Amint látható, a HTML kódot, étlapunkon megtalálja, és a módok meghatározása CSS segítségével.

ul # my_Vmenu - az általános stílus a teljes listát.

ul # my_Vmenu li a - stílus közötti kapcsolatok a címke li.

ul # my_Vmenu li a: hover - egy leírást a megfontolás tárgyát képező menüpontok egy időben, amikor az egyik lebeg az emberek felett.

ul # my_Vmenu li fesztávú - szöveges leírás (cím menü).

Ne feledje, hogy a fájlok my_Vmenu.css my_Vmenu.html és meg kell őrizni a könyvtárban. Azonban lehetnek más könyvtárakban, de akkor fontos, hogy regisztrálják magukat my_Vmenu.html fájl elérési útját my_Vmenu.css. Legyen óvatos, mert az újonnan erre a problémára gyakran.

Stílus közé kell csatlakoztatni a fej címkék egy html-fájlt. menu_1.png és menu_2.png - ez a kép a kép menüpont a normális állapot, és lebeg.

Sokkal jobb, hogy mentse a képeket egy külön mappát a képek, nevezd meg my_images, de majd állítsa be a CSS kódot. Írja ahol ezek a képek jelennek meg, ők ebben a könyvtárban: url (my_images / menu_1.png) és az url (my_images / menu_2.png).

A többi ismert tulajdonságaival CSS kódot, könnyen megértik. Ezek határozzák meg a megjelenését a menüt. Ez könnyű észrevenni, hogy a szélessége és magassága a megadott tételeket az azonos elemek a normális állapot, és ha lebeg az egeret őket. Betűméret 18px, padding meghatározza a behúzás különböző oldalain helységnevek. kijelző segítségével beállíthatja a kijelző egység beállítani a szélesség és padding.

A függőleges menü

Mint látható, a függőleges CSS menük, hogy könnyen. Az adatok alapján a tudás lesz képes arra, hogy ez a szép és vonzó a látogatók számára, hogy a weboldal! Használd a fantáziád, majd egy elegáns menü kiegészítése a webhelyen.