Függetlenül attól, hogy a navigációs menü egy vízszintes sor, vagy egy függőleges sor az oldalán, ez még mindig csak egy lista. A webes navigáció tervezésénél gyakran könnyű elfelejteni, hogy a navigációs menü csak egy dicsőített linkcsoport. De ha a navigációt az XHTML + CSS használatával programozod, létrehozhatsz egy olyan menüt, amely kicsi a letöltéshez (XHTML) és könnyen testreszabható (CSS).
Elkezdeni
Ha el szeretné kezdeni a navigációs lista létrehozását, listát kell használnia. Lehetséges, hogy egy szabványos rendezetlen lista lett a navigációnak:
Ha alaposan megnézed a HTML-t, észre fogod venni, hogy a "Home" linknek van egy azonosítója is
Ön itt van. Ez lehetővé teszi, hogy hozzon létre egy menüt, amely azonosítja az olvasók jelenlegi helyét. Még akkor is, ha nem tervezi, hogy ilyen típusú vizuális cue-t jelenít meg a webhelyén, ezeket az információkat is beillesztheti. Ha később úgy dönt, hogy később hozzáadja a cue-ot, kevesebb kódot kap a webhely elkészítéséhez.
CSS-stílus nélkül, ez az XHTML menü normál rendezetlen listának tűnik. Golyók vannak, és a listaelemek kissé behajlottak. Mivel helyőrző hivatkozásokat használok, a legtöbb böngésző nem fogja kinyomtatni (aláhúzott és kék) a hivatkozásokat. Ha beilleszti a fenti HTML-t egy weboldalba, a navigáció így fog kinézni:
- itthon
- Termékek
- Szolgáltatások
- Lépjen kapcsolatba velünk
Ez elég unalmas és nem hasonlít a menühöz. De csak néhány CSS stílus hozzáadásával hozhat létre egy olyan menüt, amely büszke rá.
Függőleges navigációs menü
A függőleges navigációs menü nagyon egyszerűen írható, mert ugyanúgy jelenik meg, mint egy normál lista: fel és le. A listaelemek függőlegesen jelennek meg az oldalon.
Amikor menüt tervezek, szeretnék kívülről kezdeni és dolgozni. Ezzel úgy értem, hogy először a
ul # navigáció majd lépjen a
li elemeket, majd a hivatkozásokat, stb. Ehhez a menühöz először meg kell határoznia a menü szélességét. Ez biztosítja, hogy még ha a menüpontok is hosszúak, akkor nem tolják túl az elrendezés többi részét, vagy vízszintes görgetést okoznak.
ul # navigation {width: 12em; }
Amint megkaptam a szélességet, játszhatok a listaelemekkel. Ez lehetővé teszi számomra, hogy olyan dolgokat állítsak be (mint a golyók megszabadulása), a háttérszíneket, a határokat, a szövegbeillesztést és a margókat.
ul # navigation li {lista-stílus: nincs;háttérszín: # 039;szegélyléc: szilárd 1px # 039;text-align: left;margin: 0;} Miután beállította a listaelemek alapjait, elkezdheti játszani a menüt a linkek területén. Először a UL # navigáció LI Amajd a Egy link, A: látogatott, A: hover, és A: aktív (ha akarod őket). A linkekhez szeretem a linkeket blokkelemként (az alapértelmezett in-line helyett) létrehozni. Ez arra kényszeríti őket, hogy vegyék fel az egész teret a LIÉs jobban hasonlítanak egy bekezdéshez, ami könnyebbé teszi a menük gombjainak stílusát. A másik dolog, amit mindig csinálok, az, hogy távolítsa el a hangsúlyt ( text-decoration: none;), mivel ez a gombok jobban hasonlítanak a gombokhoz. De természetesen a terved más lehet. ul # navigation li a {kijelző: blokk;text-decoration: none;párnázás: .25em;határ-alsó: szilárd 1px # 39f;határ-jobb: szilárd 1px # 39f;} Figyeljük meg, hogy a kijelző: blokk; a hivatkozásokra állítva, a menüelem teljes mezője kattintható, nem csak a betűk. Ez a használhatóság szempontjából is jó. Győződjön meg róla, hogy beállítja a link színeit (hivatkozás, látogatás, lebegés és aktív), ha azt szeretné, hogy eltérjenek az alapértelmezett kék, vörös és lila színtől. a: link, a: visited {color: #fff; }a: hover, a: aktív {szín: # 000; } Szeretnék egy kicsit nagyobb figyelmet fordítani a lebegő állapotra a háttérszín megváltoztatásával. a: ugrás {háttér-szín: #fff; } Ha több példát szeretne látni a függőleges menükről, olvassa el az alábbi listát. A vízszintes navigációs menük létrehozása kissé nehezebb, mint a függőleges navigációs menük, mert el kell távolítania azt a tényt, hogy a HTML-listák inkább függőlegesen jelennek meg. A vízszintes menühöz hasonlóan először hozza létre a navigációs menü listáját:
Vízszintes menü létrehozásához ugyanúgy működjön, mint a függőleges menüvel. Kezdjünk a külsõ és a munka be. Mivel szeretném, hogy a navigáció induljon a bal sarokban, beállítottam 0 bal margóval és kitöltéssel, és balra úsztam. Azt is meg kell szokni, hogy beállítsa a szélességet úgy, hogy a menü nem igényel több vagy kevesebb helyet, mint szándékában áll. A vízszintes menüknél ez általában a teljes szélesség. A teljes listához háttérszínt is hozzáadtam, hogy könnyebben olvasható. ul # navigáció {balra lebeg;margin: 0;párnázottság: 0;szélesség: 100%;háttérszín: # 039;} De a horizontális navigációs menü titka a listában szerepel. A listaelemek általában blokkelemek, ami azt jelenti, hogy mindegyikük előtt és után helyeznek el egy új sort. A kijelző átváltásával Blokk nak nek Sorban, akkor a listaelemeket vízszintesen egymás mellé rendeli. ul # navigation li {display: inline; } A linkeket pontosan úgy kezeltem, mintha a függőleges navigációs menüben kezelném őket, ugyanolyan színekkel és szövegdekorációval. Hozzáadtam egy felső határt, hogy kijelölje a gombokat, amikor lebegnek. Az egyetlen dolog eltávolítása az volt kijelző: blokk; mivel ez visszaszorítja az újvonalakat és elpusztítja a vízszintes menüt. ul # navigation li a {text-decoration: none;párnázás: .25em 1em;határ-alsó: szilárd 1px # 39f;határtalan: szilárd 1px # 39f;határ-jobb: szilárd 1px # 39f;}a: link, a: visited {color: #fff; }ul # navigation li a: ugrás {háttérszín: #fff;szín: # 000;} A HTML egy másik aspektusa az azonosító Ön itt van. Ha módosítani szeretné a menüt, hogy jelezze a felhasználók jelenlegi helyét, egyszerűen használja ezt ID más háttérszín vagy más stílus meghatározásához. Mozgassa ezt az attribútumot ID a más oldalak megfelelő menüpontjára, hogy az aktuális oldal mindig kiemelve legyen. ul # navigation li # akkor egy {háttérszín: # 09f; } Ha ezeket a stílusokat összerakja az oldalon, létrehozhat egy vízszintes vagy függőleges menüsávot, amely a webhelyével működik, de gyorsan letölthető és nagyon könnyen frissíthető a jövőben. Az XHTML + CSS használata a listákat egy nagyon hatékony eszközévé teszi. Ha több példát szeretne látni a vízszintes menükről, olvassa el az alábbiakat.
Vízszintes navigációs menü
Ön itt van Helyinformáció
