Létrehozása menük használata CSS és HTML

előző ◈ a következő

Ha a weboldal nem korlátozódik egyetlen weboldal, meg kell gondolni, hozzátéve, egy navigációs sáv (menü). Menü - részben a weboldal célja, hogy segítse a látogatók navigálni az oldalon. Minden menü egy lista a kapcsolatok vezető belső oldalt az oldal. A legegyszerűbb módja annak, hogy adjunk egy navigációs sáv a helyszínen, hogy hozzon létre egy menü CSS és HTML.

függőleges menü

Az első lépés a létrehozását a létesítmény egy felsorolás a függőleges menü. Továbbá, meg kell, hogy képes legyen azonosítani a listán, így ehhez hozzátesszük, hogy ez az id attribútum a „Navbar” azonosítót. minden elem

  • A lista tartalmazza az egyik kapcsolat:

    A következő feladat az, hogy állítsa vissza a stílus listában létrehozott alapból. Meg kell távolítani a külső és belső párnázás a nagyon listán, és markerek a tételek listáját. Akkor majd állítsa be a kívánt szélesség:

    Most itt az ideje, hogy a stílus maga a kapcsolat. Mi lesz hozzá neki a háttér színét, változtassa meg a szöveg színét, méretét és súlyát font, vegye aláhúzás, adjunk hozzá egy kis padding, és újra a kijelző elem a sort a blokk. Ezen felül, a bal alsó és keretek a listához terméket adtak hozzá.

    A legfontosabb része a változások újrafogalmazása a sor elemeinek a blokkban. Most a linkeket vegye fel az összes rendelkezésre álló helyet elemek listáját, amely követi a linket, akkor már nem kell mozgatni az egeret pontosan a szöveget.

    Ötvöztük az összes kódot, a fent leírt módon, az egyik példában most próbálja gombra kattintva ugorhat az oldalra, és példát mutat az eredmény:

    Amikor az egérrel a kurzort a menü megjelenése változhat, vonzza a figyelmet a felhasználó. Készítsen egy ilyen hatás, akkor a pszeudo-osztály: lebeg.

    Térjünk vissza a fenti példában a függőleges menü és adjunk a stíluslap a következő szabály:

    vízszintes menü

    Hozhat létre egy vízszintes menüt hajformázó egy egyszerű lista. Az ingatlan megjelenítéséhez elemek

  • meg kell rendelni egy értéket inline, felsorolni példány elhelyezve egymás mögött.

    Írja pár listánkat szabályok mentesítő stílust használjuk az alapértelmezett listákat és listatételek újra a blokkot a kisbetűs:

    Most csak az maradt hátra, hogy meghatározza a stílusát a vízszintes menü:

    Legördülő menüben

    A menü, amely azt fogja létrehozni lesz a fő navigációs linkeket, található a vízszintes navigációs sáv, és albekezdés, hogy csak akkor jelennek meg, ha az egérmutató a menüpont, amelyre a albekezdés alkalmazandó.

    Először létre kell hoznunk HTML-szerkezetének Étlapunkon. A fő navigációs hivatkozások teszünk egy felsorolás:

    Alpontokban fogunk helyezni egy külön listán, amivel azt a sejtben

  • , amely tartalmazza a linket a szülő tekintetében alpontokban. Most van egy világos szerkezet jövőnk navigációs sáv:

    Ezután meg kell győződnünk arról, hogy a legördülő almenü nem tolja a tartalmat a navigációs sáv alatt le. Ehhez kérjük a pontok listáját position: relative;. és válogatott az al-helyzetben: abszolút; és adjunk hozzá egy felső ingatlan értéke 100%, hogy egy abszolút pozicionált almenü jelenik csak alul a link.

    A magassága a szülő lista került kifejezetten mivel a böngészők nem tekintik tartalom, mint egy úszó elem tartalma, anélkül, hogy a magassága a lista figyelmen kívül fogja hagyni a böngésző és követő tartalom lista kerületi Étlapunkon.

    Most kell stilizálhatja mindkét listán, és legördülő menü lesz kész:

    • előző ◈ a következő