Egy lépésről lépésre szóló útmutató
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, akkor észre fogod venni, hogy a "Főoldal" linknek is van egy azonosítója Önnek. 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 akarok kialakítani, szeretek kezdeni és dolgozni. Ezzel azt akarom mondani, hogy először a ul navigációt, majd a li elemeket, majd a linkeket stb. először meghatározza 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 az UL # navigációs LI A, majd az A: link, A: visited, A: lebegő é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 a LI teljes területét elfoglalják, és jobban hasonlítanak egy bekezdésre, ami könnyebbé teszi a menük gombjainak stílusát. A másik dolog, amit mindig csinálok, az az aláhúzás eltávolítása (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;
}
Vegye figyelembe, hogy a kijelzőn: 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.
- Stílusos függőleges menü
- Alapvető függőleges menüsablon
- A stílusos függőleges menü itt van
- Egy alapszintű függőleges menüsablon van itt
Vízszintes navigációs menü
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. Ha a képernyőt a blokkról a vonalra kapcsolja, akkor a listaelemeket arra kényszeríti, hogy vízszintesen egymás mellé álljanak.
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, amit eltávolítottam a 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;
}
Ön itt van Helyinformáció
A HTML egy másik aspektusa az Ön által azonosított azonosító. Ha módosítani szeretné a menüt, hogy jelezze a felhasználók jelenlegi helyét, egyszerűen használja ezt az azonosítót egy másik háttérszín vagy más stílus meghatározásához. Ezt az ID-attribútumot helyezze át más oldalak megfelelő menüelemére, 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.
- Stílusos vízszintes menü
- Alapvető vízszintes menüsablon
- A stílusos vízszintes menü itt van
- Egy alapvető vízszintes menüséma van itt