Hogyan lehet létrehozni egy érzékeny navigációt

Az egyik legnehezebb rész responsified egy weboldalon “a navigáció”, ez a rész valóban fontos a weboldal elérhetőségéhez, mivel ez az egyik módja annak, hogy a látogatók átugorják a weboldalakat.

Valójában sokféleképpen lehet létrehozni az érzékeny webhely navigációt, és még néhány jQuery plugin is rendelkezésre áll, hogy ezt egy másodperc alatt elvégezhesse.

Ahelyett, hogy azonnali megoldást alkalmaznánk, ebben a bejegyzésben végigmegyünk hogyan lehet építeni egy egyszerű navigációt a földről és a CSS3 média lekérdezések és egy kis jQuery használatával megjelenítheti azt egy kis képernyőméretben, mint az okostelefonok.

Szóval, kezdjük el.

Demó
Letöltés forrása

HTML

Először is, adjuk hozzá a meta nézetablakot a fej címke. Ez meta nézetablak a címke szükséges ahhoz, hogy oldalunk megfelelően méretezhesse a képernyőt, különösen a mobil nézetablakban.

… És ezután hozzáadjuk a következő részletet a navigációs jelölőn belül test címke.

   itthon
 Hogyan kell
 Ikonok
 Tervezés
 Web 2.0
 Eszközök
 
 Menü

Amint a fentiekben láthatjuk, hat elsődleges menüpontunk van, és egy további linket adtak hozzá. Ezt az extra linket használják Húzni a menü navigációja, ha egy kis képernyőn rejtett.

További irodalom: Ne felejtsük el a nézetablak metatagját.

Stílusok

Ebben a részben kezdjük el a navigációt. A stílus csak dekoratív, tetszés szerint bármilyen színt választhat. De ebben az esetben (én személy szerint) szeretném test puha és krémes színe van.

 test háttérszín: # ece8e5;

A nav a navigációt meghatározó címke lesz 100% a böngészőablak teljes szélessége, míg a ul ahol ez tartalmazza az elsődleges menüpontokat 600px a szélességhez.

 nav magasság: 40px; szélesség: 100%; háttér: # 455868; betűméret: 11pt; font-család: 'PT Sans', Arial, sans-serif; font-súly: félkövér; pozíció: relatív; szegély alsó: 2px szilárdság # 283744;  nav ul padding: 0; margin: 0 auto; szélesség: 600px; magasság: 40px;

Akkor majd úszó a bal oldali menüpontok, így vízszintesen egymás mellett jelennek meg, de az elem lebegése is a szülő összeomlását okozhatja.

 nav li display: inline; balra lebeg;

Ha a fenti HTML-jelölőnégyzetet észleli, már hozzáadtuk clearfix ban,-ben osztály attribútum mind a nav és ul hogy tisztázzuk a dolgokat, amikor lebegjük a benne lévő elemeket a CSS clearfix hack segítségével. Szóval, adjuk hozzá a következő stílusszabályokat a stíluslaphoz.

 .clearfix: előtt, .clearfix: content: "" után; kijelző: táblázat;  .clearfix: után clear: mindkettő;  .clearfix * zoom: 1;

Mivel hat menüpontunk van, és a konténert is megadtuk 600px, minden menü hivatkozás lesz 100px a szélességhez.

 nav a color: #fff; kijelző: inline-block; szélesség: 100px; szöveg-igazítás: központ; szöveg-dekoráció: nincs; vonalmagasság: 40px; szöveg-árnyék: 1px 1px 0px # 283744;

A menüpontok elválaszthatók 1 képpont jobbra, az utolsó kivételével. Ne felejtsük el a korábbi, postafiókos modellt, a menü szélessége bővül 1 képpont így 101px mint a határ kiegészítés, így itt változtatjuk meg box-méretezése modell border-box a menü megtartása érdekében 100px.

 nav li a border-right: 1px szilárd # 576979; box-méretezés: border-box; -moz-box-méretezés: border-box; -webkit-box-méretezése: border-box;  nav li: utolsó gyermek a határ-jobb: 0;

Ezután a menü fényesebb lesz, amikor be van kapcsolva :lebeg vagy :aktív állapot.

 nav a: hover, nav a: aktív háttérszín: # 8c99a4;

… És végül, az extra link rejtve lesz (az asztali képernyőn).

 nav a # pull kijelző: nincs;

Ezen a ponton csak a navigációt tervezzük, és semmi nem fog történni, ha átméretezzük a böngészőablakot. Tehát ugorjunk a következő lépésre.

További irodalom: CSS3 Box-méret (Hongkiat.com)

Média lekérdezések

A CSS3 média lekérdezések segítségével meghatározható, hogy a stílusok hogyan fognak eltolódni bizonyos bizonyos pontoknál vagy kifejezetten az eszköz képernyőméretein.

Mivel a navigáció kezdetben 600px fix-szélesség, először definiáljuk a stílusokat, amikor azt megtekintjük 600px vagy alacsonyabb képernyőméret, így gyakorlatilag, ez az első töréspontunk.

Ebben a képernyőméretben két menüpont mindegyike egymás mellett jelenik meg, így a ulitt a szélessége lesz 100% a böngészőablakban, miközben a menü hivatkozások lesznek 50% a szélességhez.

 @media képernyő és (max-width: 600px) nav magasság: auto;  nav ul szélesség: 100%; kijelző: blokk; magasság: auto;  nav li szélesség: 50%; balra lebeg; pozíció: relatív;  nav li a border-bottom: 1px szilárd # 576979; jobbra: 1px szilárd # 576979;  nav a text-align: left; szélesség: 100%; szöveg-francia bekezdés: 25px;

… És aztán meghatározzuk, hogyan jelenik meg a navigáció, amikor a képernyő kisebb lesz 480px vagy alacsonyabb (így ez a második töréspontunk).

Ebben a képernyőméretben a korábban hozzáadott extra link láthatóvá válik, és a linket is megadjuk a “Menü” ikon a jobb oldalon a :után pszeudoelem, míg az elsődleges menüpontok elrejtésre kerülnek, hogy több függőleges teret menthessenek a képernyőn.

 @media only screen és (max-width: 480px) nav határ-alsó: 0;  nav ul kijelző: nincs; magasság: auto;  nav a # pull display: block; háttérszín: # 283744; szélesség: 100%; pozíció: relatív;  nav a # pull: után content: ""; háttér: url ('nav-icon.png') nem ismételhető; szélesség: 30px; magasság: 30px; kijelző: inline-block; pozíció: abszolút; jobb: 15px; top: 10px;

Végül, amikor a képernyő kisebb lesz 320 és csökkentse a menüt függőlegesen, felülről lefelé.

 @media only screen és (max-width: 320px) nav li display: block; úszó: nincs; szélesség: 100%;  nav li a border-bottom: 1px szilárd # 576979;

Most megpróbálhatja átméretezni a böngészőablakot. Most már képesnek kell lennie a képernyő méretének módosítására.

További irodalom: Média lekérdezések a normál eszközökhöz.

A menü megjelenítése

Ezen a ponton a menü még mindig rejtett marad, és csak akkor látható, ha az szükséges, ha megérinti vagy rákattint “Menü” a jQuery segítségével elérhetjük a hatást slideToggle ().

 $ (függvény () var pull = $ ('# pull'); menü = $ ('nav ul'); menuHeight = menu.height (); $ (pull) .on ('click', funkció (e) e.preventDefault (); menu.slideToggle ();););

Ha azonban a böngészőablak átméretezése után azonnal megtekintette és elrejtette a menüt egy kis képernyőn, a menü elrejtve marad, mint a kijelző: nincs A jQuery által létrehozott stílus még mindig az elemben van.

Tehát az ablak átméretezése után el kell távolítanunk ezt a stílust:

 $ (ablak) .resize (függvény () var w = $ (ablak) .width (); ha (w> 320 && menu.is (': rejtett')) menu.removeAttr ('style'); );

Rendben, ez az összes kód, amire szükségünk van, most a következő linkekből tekinthetjük meg a navigációt, és azt javasoljuk, hogy tesztelje azt egy érzékeny tervezési teszteszközben, például a Responsinatorban, hogy egyszerre megtekinthesse azt különböző szélességben.

Demó
Letöltés forrása

Bónusz: Alternatív út

Amint már említettük ezt a bejegyzést, vannak más módszerek is, és egy JavaScript-könyvtár használatával SelectNav.js az egyik legegyszerűbb út. Ez egy tiszta JavaScript, amely nem támaszkodik egy másik harmadik fél könyvtárára, mint a jQuery.

Alapvetően a lista menüjét megismétli, majd a A menü a saját kezelőfelületét fogja használni.

Kérjük, forduljon a hivatalos dokumentációhoz a további végrehajtáshoz.

Következtetés

Mindent megtettünk, hogy érzékeny navigációt hozzunk létre a semmiből. Ez az, amit itt hoztunk létre, csak egy példa, és amint azt korábban említettük, és a fentiekben bemutattuk, sok más megoldás is megoldható. Tehát most hagyja el döntését, hogy melyik gyakorlatot választja a legjobban a követelményeknek és a webhely navigációs szerkezetének.