Akár a webhely navigációs menüje egy vízszintes sor a tetején, vagy egy függőleges sor az oldalán, ez csak egy lista. Tervezéskor webes navigáció, a navigációs menü a linkek csoportja. Amikor a navigációt XHTML + CSS segítségével programozza, létrehozhat egy kicsi, letöltésre alkalmas menüt (XHTML) és könnyen testreszabható (CSS) menüt.
Elkezdeni
A navigációs listák megtervezéséhez fel kell használni egy listát. Lehet, hogy ez egy szokásos rendezetlen lista, amelyet navigációként azonosítottak. Például:
- itthon
- Termékek
- Szolgáltatások
- Lépjen kapcsolatba velünk
A HTML megtekintésekor a Főoldal link azonosítója:.
Ön itt van
Ez lehetővé teszi egy olyan menü létrehozását, amely azonosítja az olvasók aktuális helyét. Még akkor is, ha nem tervezi, hogy ilyen típusú vizuális jelzés legyen a webhelyén, felveheti ezeket az információkat. Ha később úgy dönt, hogy hozzáadja a jelet, akkor kevesebb kódolással kell elkészítenie webhelyét.
Anélkül CSS stílus, ez az XHTML menü úgy néz ki, mint egy szokásos rendezetlen lista. Vannak golyók, és a listaelemek kissé behúzottak. Használat során
helyőrző linkek, a legtöbb böngésző nem jeleníti meg a linkeket kattinthatóként (aláhúzva és kékkel). Amikor beilleszti a HTML-t egy weboldalra, a navigáció a következőképpen néz ki:- itthon
- Termékek
- Szolgáltatások
- Lépjen kapcsolatba velünk
Ez nem nagyon hasonlít egy menüre. Néhány CSS-stílus hozzáadásával azonban létrehozhat egy menüt, amely büszke lesz.
Ha több függőleges menüre szeretne példát, végezzen webes keresést az alábbiak szerint:
- Stílusos függőleges menü
- Alapvető függőleges menüsablon
- Stílusos függőleges menü az Itt vagy
- Egy alapvető függőleges menüsablon az Itt vagy
Függőleges navigációs menü
A függőleges navigációs menü könnyen írható, mert ugyanúgy jelenik meg, mint egy normál lista: fel és le. A listaelemek függőlegesen jelennek meg az oldalon lefelé.
A menük stílusának kialakításakor kezdje el kívülről és dolgozzon be. Először állítsa be a navigációt:
ul # navigáció
Ezután lépjen az elemekre és a linkekre. Először határozza meg a menü szélességét. Ez biztosítja, hogy ha a menüelemek hosszúak, akkor az elemek nem tolják át az elrendezés többi részét, és nem okoznak vízszintes görgetést.
ul # navigation {szélesség: 12em; }
Miután beállította a szélességet, dolgozzon a listaelemekkel. Ez lehetővé teszi a háttérszín, a szegélyek, a szöveg igazítása és a margók beállítását.
ul # navigation li {
list-style: nincs;
háttérszín: # 039;
border-top: szilárd 1px # 039;
text-align: balra;
margó: 0;
}
Miután megadta a listaelemek alapjait, dolgozzon a menü kinézetén a hivatkozások területen. Első stílus a navigáció:
UL # navigáció LI A
Ezután formázza a következőket:
Egy link
V: meglátogatott
V: lebeg
V: aktív
A linkeknél tegye a linkeket blokkelemekké (az alapértelmezett soros helyett). Ez arra kényszeríti a linkeket, hogy az LI teljes területét elfoglalják, és úgy működnek, mint egy bekezdés, megkönnyítve a linkek menügombként történő formázását. Ezután távolítsa el a következőket:
aláhúzás, szövegdíszítés: nincs; mint
Ezáltal a gombok jobban hasonlítanak a gombokra. Előfordulhat, hogy más a kialakítása.
ul # navigation li a {
kijelző: blokk;
szövegdíszítés: nincs;
párnázás: .25em;
alsó-alsó: szilárd 1px # 39f;
jobb-jobb: szilárd 1px # 39f;
}
A... val kijelző: blokk; a linkeken beállítva a menüpont teljes mezője kattintható, nemcsak a betűk. Ez a használhatóságnak is jó. Állítsa be a link színeit (link, meglátogatott, lebegő és aktív), ha azt szeretné, hogy a linkek eltérjenek az alapértelmezett kéktől, pirostól és lilától.
a: link, a: meglátogatott {color: #fff; }
a: lebeg, a: aktív {color: # 000; }
A háttérszín megváltoztatásával a lebegő állapotra is lehet egy kis figyelmet fordítani.
a: lebeg {háttér-szín: #fff; }
Vízszintes navigációs menü
A vízszintes navigációs menük létrehozása valamivel nehezebb, mint a függőleges navigációs menük, mert ellensúlyozni kell azt a tényt, hogy a HTML-listák inkább függőlegesen jelenítenek meg. A vízszintes menühez hasonlóan hozza létre a navigációs menü listáját:
- itthon
- Termékek
- Szolgáltatások
- Lépjen kapcsolatba velünk
Vízszintes menü létrehozásához ugyanúgy járjon el, mint a függőleges menünél. Kezdje a külsővel, és dolgozzon. A navigáció elindításához a bal sarokban állítsa 0 bal margóval és kitöltéssel, és lebegtesse balra.
Szokás, hogy úgy állítja be a szélességet, hogy a menüje ne foglaljon el több vagy kevesebb helyet, mint szándékozik. A vízszintes menüknél ez általában a tervezés teljes szélessége. Hozzáadhatja azt is háttérszín a könnyebb olvashatóság érdekében a listára.
ul # navigation {
balra lebeg;
margó: 0;
párnázás: 0;
szélesség: 100%;
háttérszín: # 039;
}
A vízszintes navigációs menü titka a listaelemekben található. A listaelemek általában blokkelemek, ami azt jelenti, hogy ezeknek az elemeknek mindegyik előtt és után új sor kerül. Ha a kijelzőt blokkról inline-ra váltja, akkor a listaelemeket vízszintesen egymás mellé kell állítani.
ul # navigation li {display: inline; }
A linkeket pontosan úgy kezelje, mint a függőleges navigációs menü, ugyanazokkal a színekkel és szövegdekorációval. Adjon hozzá egy felső szegélyt a gombok kijelöléséhez, amikor a felhasználó egy gomb fölé viszi az egeret. Ezután távolítsa el kijelző: blokk; mivel ez visszahelyezi az új sorokat és tönkreteszi a vízszintes menüt.
Itt vagy a helyinformációkról
A HTML másik aspektusa ez az azonosító:
Ön itt van
Ha módosítani szeretné a menüt, hogy jelezze a felhasználók aktuális tartózkodási helyét, használja ezt az azonosítót egy másik háttérszín vagy más stílus meghatározásához. Helyezze az attribútumazonosítót a többi oldal megfelelő menüpontjába, hogy az aktuális oldal mindig kiemelve legyen.
Ha ezeket a stílusokat összerakja az oldalán, létrehozhat egy vízszintes vagy függőleges menüsort, amely a webhelyével működik, gyorsan letölthető és könnyen frissíthető. Az XHTML + CSS használatával a listák hatékony eszközzé válnak a tervezéshez.
Ha további példákat szeretne a vízszintes menükre, keresse meg az interneten a következőket:
- Stílusos vízszintes menü
- Alapszintű vízszintes menüsablon
- Stílusos vízszintes menü az Itt vagy
- Egy alapszintű vízszintes menüsablon az Itt vagy