Navigációs sávok CSS használatával. Nagyon egyszerű vízszintes navigációs sáv Hogyan készítsünk weboldalt css navigációval
Kezdjük egy tipikus HTML-struktúra bemutatásával. Itt van egy diagram egy tipikus navigációs sávról, amely számos hivatkozást tartalmaz.
A HTML kód rendkívül egyszerű: benne egy div blokk és egy rendezetlen lista. Mint azt bizonyára tudja, bevezették a HTML5 specifikációt új elem(nav), amely a navigációs sávot azonosítja. A navigációs címke helyettesíti az általános div címkét, de amint az alábbiakban látható, a navigációs sáv általános szerkezete nem változik.
A navigációs sáv rendezetlen lista (ul) használatával mindig jó gyakorlat, különösen akkor, ha összetettebb interakciókat kell megszerveznie a fő hivatkozások és az almenük között.
Veled szemben HTML példa a navigációs panel elrendezése almenükkel.
CSS javaslatok
Most nézzünk meg három dolgot, amelyek jobbá teszik a CSS-kódot. A li címke magasságának meg kell egyeznie a rendezetlen lista magasságával (ul).
A tökéletes függőleges szövegigazítás érdekében állítsa a line-height tulajdonságot az ul címke magasságára.
A webhelyen való könnyű navigáció érdekében minden oldalon egy menüt használnak, hogy a felhasználó megértse, mi és hol van. Szinte mindig az oldal tetején (a fejlécben) van vízszintes menü a webhely szakaszai (kategóriái) szerint, a függőleges menü pedig az oldalsávba van írva (egy oszlopban), és a cikkek közötti navigálásra szolgál.
A cikkből megtudhatja, hogyan kell menüt készíteni egy html webhelyhez, mit kell írnia ahhoz, hogy vízszintes és függőleges menüt kapjon css-ben, vagy menüt legördülő listával.
A menü elkészítéséhez (bármilyen) fogjuk használni pontozott lista, amelyhez közvetlenül hozzárendeljük a saját osztályunkat, és ehhez az osztályhoz írjuk a paramétereinket a szükséges értékekkel.
Például egy menü létrehozásához használunk egy listát a class="menu" karakterlánccal (bármilyen osztálynév, csak latin betűk), és a html kód így fog kinézni:
BAN BEN stílus a menühöz Megadtam a szükséges tulajdonságokat a szükséges értékekkel:
Kötelező CSS-paraméterek és értékek
- margó: 0; - távolítsa el az összes behúzást a listáról, ellenkező esetben a böngésző lecseréli az alapértelmezett 20 képpontos értéket;
- list-style-type: nincs; - távolítsa el a jelölőket a menüpontokról, különben a böngésző pontokat vagy számokat fog hozzáadni.
Így készül a menü html oldalak, és most térjünk át egy vízszintes menü létrehozására, és nézzünk meg mindent példákkal.
Hogyan készítsünk vízszintes menüt CSS-sel
Vízszintes menü megjelenítéséhez lista segítségével, csak egy paramétert kell hozzáadnunk a fenti kódhoz: display: inline; hogy a menüpontok egy sorba igazodjanak és vízszintesen kövessék egymást. A margó segítségével kitöltést is adunk a menüelemek közé.
És így fog kinézni:
Elkészült a vízszintes menü, már csak szépíteni kell kinézet.
Adjunk meg minden elemet a vízszintes menüben szegélykeretés ferde élűvé kell tenni, kitölteni egy bizonyos háttérszínnel (háttér hozzáadása a menüponthoz), és megváltoztatni a hivatkozás megjelenését.
A vízszintes menü a következőképpen jelenik meg:
Mivel a legtöbb esetben vízszintes menüt írnak a webhely fejlécébe, a példában a menü hátterét adtam hozzá, amelyet a fejléc színének megfelelően módosíthatunk.
Az érthetőség kedvéért a menüelemeket a text-align: center; tulajdonság segítségével középre helyeztem. , amely eltávolítható (automatikusan balra igazítható), vagy szövegigazításra állítható: jobbra; és a jobb szélen megjelenik a vízszintes menü.
Egyébként te is használhatod, amit ott a saját szemeddel láthatsz és ingyen letölthetsz.
Hogyan készítsünk függőleges menüt CSS-sel
Függőleges menü a CSS-ben az oldalon szinte ugyanúgy készül és van kialakítva, mint a vízszintes, csak itt a .menu-2 li-ben változtatják meg (... paraméter az értékkijelzéssel: blokk; (blokk elemet jelöl), ami azt adja a menüelemek függőleges megjelenítése.
És még egy kiegészítés a függőleges menühöz: mivel a legtöbb esetben az oldal oldaloszlopában található, aminek fix szélessége van, kénytelenek vagyunk beállítani szélesség szélesség: 100%; függőleges menünket úgy, hogy az teljesen elfoglalja az oszlop teljes szélességét.
Nézzük a függőlegest CSS menü Például:
A függőleges menü így fog megjelenni az oldalon:
Légy óvatos!
Hogyan készítsünk legördülő menüt CSS-sel
Készítsen legördülő menüt a segítségével CSS használatával nagyon egyszerű. Csak néhány paramétert adunk hozzá a függőleges menü meglévő kódjához, amely a menüelemek legördülő listájáért lesz felelős.
Feltétlenül emlékezzen!
Annak érdekében, hogy a legördülő menü szigorúan a vezető hivatkozással szemben jelenjen meg, be kell írnia a pozíciót: relatív; a CSS-be ahhoz a li címkéhez, ahol ez a hivatkozás található. , és a legördülő menü pozíciójához: abszolút;
Írjunk html kódot a CSS legördülő menüjéhez.
Tekintse meg, hogyan fog kinézni a CSS-t használó legördülő menü az oldalon.
A legördülő menü pontosan ugyanúgy van megírva a vízszintes navigációs elrendezéseknél. Az egyetlen dolog, hogy ne felejtse el megváltoztatni a felső és a bal oldali paraméterek értékét (felső és bal oldali behúzás).
Néz!
A CSS mindössze 3 módosításával hogyan válik a legördülő menüvel rendelkező függőleges navigációs elrendezés vízszintes navigációs elrendezéssé legördülő menüvel.
CSS változások a legördülő menüben
- Csere a .saitbar-ban - szélesség: 240 képpont; szélességen: 100%;
- Csere a .menu-4-ben li - kijelző: blokk; a kijelzőn:inline-block;
- Csere a .menu-4-ben ul.podmenu - felső: 0; felül: 34 képpont;
- Csere itt: .menu-4 ul.podmenu - balra: 214px; bal oldalon: 7px;
A weboldal egyik legnehezebben adaptálható része a navigáció. Ez a rész nagyon fontos a weboldal használhatósága szempontjából, hiszen ez az egyik módja annak, hogy a felhasználók oldalról oldalra mozogjanak.
Számos módja van a reszponzív webhelynavigáció létrehozásának, és több jQuery beépülő modul akár azonnal is megteheti.
Jelentkezés helyett azonban kész megoldás Ebben az oktatóanyagban végigvezetjük az egyszerű navigáció felépítésének folyamatát a semmiből CSS3 médialekérdezések segítségével, és egy kicsit annak megfelelő megjelenítését egy kis képernyőn, például egy okostelefonon.
Szóval, kezdjük.
HTML
Stílusok
Ebben a részben stílusokat alkalmazunk a navigációhoz. A stílus itt tisztán dekoratív, bármilyen színt választhat. De ebben az esetben a test finom krémszínű lesz.
Test ( háttérszín : #ece8e5 ; )
A navigációt meghatározó navigációs címke 100%-ban teljes szélességben jelenik meg a böngészőablakban, míg a főmenü linkjeinket tartalmazó ul 600 képpont széles lesz.
Nav ( magasság : 40 képpont ; szélesség : 100 % ; háttér : # 455868 ; betűméret: 11 pont; font-család: "PT Sans", Arial, sans-serif; betűsúly: félkövér; pozíció: relatív; keret-alsó : 2 képpont tömör # 283744 ; ) nav ul ( kitöltés : 0 ; margó : 0 automatikus ; szélesség : 600 képpont ; magasság : 40 képpont ; )
Ezután egy bal oldali float tulajdonságot alkalmazunk a menühivatkozásokra, hogy azok vízszintesen legyenek elrendezve egy sorban, de ha ezt a tulajdonságot egy elemre alkalmazzuk, akkor a szülőelem összeomlik.
Nav li (megjelenítés: inline; float: balra;)
Ha a fenti html jelölésből észrevette, már a nav és az ul osztálytulajdonságához adtunk clearfixet, hogy felszabadítsa a helyet, amikor „lebegő” elemeket helyezünk el benne a CSS clearfix hack segítségével. Tehát adjuk hozzá a következő stílusszabályokat a stíluslaphoz.
Clearfix :before, .clearfix :after ( tartalom : " " ; kijelző : táblázat; ) .clearfix :after ( törlés : mindkettő ; ) .clearfix ( *nagyítás: 1 ; )
Mivel hat menühivatkozásunk van, és a konténernek is 600 képpont szélességet adtunk, minden menülink 100 képpont széles lesz.
Nav a ( szín : #fff ; kijelző : soron belüli blokk ; szélesség : 100 képpont ; szövegigazítás : középre ; szövegdekoráció : nincs ; vonalmagasság : 40 képpont ; szövegárnyék : 1px 1px 0px # 283744 ; }
A menü hivatkozásait 1 képpontos jobb oldali szegély választja el, kivéve az utolsót. Emlékezve a legutóbbi bemutató dobozmodelljére, a menühivatkozás szélessége a szegély hozzáadása miatt 1 képponttal megnövekszik, így 101 képpont lesz, így itt a dobozméretes modellt border-box-ra változtatjuk, hogy a menü megmaradjon. link szélessége 100 képpont.
Nav li a ( szegély jobbra : 1 képpont tömör # 576979 ; box-sizing:border-box ; -moz-box-sizing:border-box ; -webkit-box-sizing:border-box ; ) nav li:last-child a ( border-right : 0 ; )
Nav a:hover , nav a:active ( háttérszín : #8c99a4 ; )
Nav a#pull ( kijelző : nincs ; )
Ezen a ponton csak stílusokat alkalmazunk a navigációs blokkra, és semmi sem fog történni, amikor átméretezzük a böngészőablakot. Tehát folytassuk a következő lépéssel.
Médialekérdezések
Menü kimenet
Ekkor a menü továbbra is rejtve marad, és csak szükség esetén lesz látható, a Menü hivatkozás megérintése vagy kattintása után, ezt a hatást pedig a jQuery slideToggle() segítségével érhetjük el.
$(function() ( var pull = $("#pull" ) ; menu = $("nav ul" ) ; menuHeight = menu.height () ; $(pull).on ("click" , function(e) ( e.preventDefault ( ) ; menu.slideToggle ( ) ; ) ; ) ) ;
Ha azonban közvetlenül a menü megtekintése és elrejtése után egy kis képernyőn átméretezi az ablakot, a menü el lesz rejtve, mert a jQuery által generált display: none stílus továbbra is érvényesül az elemre.
Tehát el kell távolítanunk ezt a stílust az ablak átméretezésekor:
$(window).resize (function() ( var w = $(window).width () ; if(w > 320 && menu.is (":hidden" ) ) ( menu.removeAttr ("stílus" ) ; ) ) ) ;
Ennyi, csak ennyi kódra van szükségünk, most megtekinthetjük a navigációs blokkot a következő hivatkozások segítségével, és azt javasoljuk, hogy tesztelje egy olyan reszponzív tervezőeszközzel, mint a Responsinator, hogy láthassa különböző változatok szélessége egyben.
Bónusz: alternatív módszer
Amint az oktatóanyagban korábban említettük, ennek más módjai is vannak, és a SelectNav.js JavaScript-könyvtár használata az egyik legegyszerűbb módszer. Ez tiszta JavaScript, és nem függ más harmadik fél könyvtáraitól, például a jQuery-től.
Alapvetően ez megkettőzi a menülistát, és átalakítja azt
A módszer egyik előnye, hogy nem kell aggódnunk a navigációs sáv stílusával, hiszen a menü
Fordítás – Ügyeleti szoba
A navigáció minden jó webhelyen megtalálható, még akkor is, ha az egyoldalas. A helyzettől függően a navigációs hivatkozások a webhely különböző részeihez vezethetnek, vagy az aktuális oldalon található könyvjelzőhöz (horgonyhoz) küldhetők. A navigáció hozzáértő tervezése, amelyben a felhasználó nem esik összezavarodva, bizonyos ismereteket és tapasztalatokat igényel. A navigációs sáv tervezését is okosan kell elkészíteni, és ebben az oktatóanyagban megmutatjuk, hogyan hozhat létre felhasználóbarát navigációs menüt.
Navigáció létrehozása
Mi a navigáció? Ez a hivatkozások gyűjteménye, gyakran jelentés szerint rendezve és csoportosítva. A navigációs menüt gyakran HTML listacímke használatával hozzák létre
- , ahol minden ponton
- egy hivatkozást tartalmaz . A HTML5-ben külön címkét vezettek be a navigációhoz