Niezależnie od tego, czy menu nawigacyjne jest poziomym rzędem u góry, czy pionowym rzędem z boku, wciąż jest to tylko lista. Projektując nawigację internetową, łatwo jest zapomnieć, że menu nawigacyjne to po prostu uwielbiana grupa linków. Ale jeśli programujesz nawigację za pomocą XHTML + CSS, możesz stworzyć menu, które jest małe do pobrania (XHTML) i łatwe do dostosowania (CSS).
Pierwsze kroki
Aby rozpocząć projektowanie listy do nawigacji, musisz użyć listy. Może to być standardowa nieuporządkowana lista, która została określona jako nawigacja:
Jeśli przyjrzysz się HTML, zauważysz, że link "Strona główna" ma również identyfikator
jesteś tutaj. Umożliwi to utworzenie menu identyfikującego bieżącą lokalizację dla czytelników. Nawet jeśli nie planujesz już tego typu wizualnej sygnalizacji w swojej witrynie, możesz uwzględnić te informacje. Jeśli później zdecydujesz się dodać cue, będziesz mieć mniej kodu do przygotowania swojej strony.
Bez stylu CSS to menu XHTML wygląda jak standardowa lista nieuporządkowana. Istnieją punktory, a elementy listy są lekko wcięte. Ponieważ korzystam z łączy zastępczych, większość przeglądarek nie wyświetla linków jako klikalnych (podkreślonych i niebieskich). Jeśli wkleisz powyższy kod HTML na stronę internetową, Twoja nawigacja będzie wyglądać następująco:
- Dom
- Produkty
- Usługi
- Skontaktuj się z nami
Jest to dość nudne i nie przypomina menu. Ale z kilkoma stylami CSS dodanymi do listy możesz stworzyć menu, które sprawi, że będziesz dumny.
Pionowe menu nawigacyjne
Pionowe menu nawigacyjne jest bardzo łatwe do zapisania, ponieważ wyświetla się w taki sam sposób jak normalna lista: góra i dół. Elementy listy są wyświetlane pionowo w dół strony.
Kiedy stylizuję menu, lubię zaczynać od zewnątrz i pracować. To znaczy, że najpierw stylizuję
Nawigacja # ul a następnie przejdź do
li elementy, a następnie odnośniki itd. W tym menu najpierw określasz szerokość menu. Zapewni to, że nawet jeśli pozycje menu będą długie, nie przepchną reszty układu ani nie spowodują przewijania w poziomie.
ul # navigation {width: 12em; }
Po ustawieniu szerokości mogę grać z elementami listy. To pozwala mi ustawić rzeczy takie jak (aby pozbyć się pocisków), kolory tła, granice, wyrównanie tekstu i marginesy.
ul # navigation li {styl listy: brak;kolor tła: # 039;border-top: bryła 1px # 039;text-align: left;margin: 0;} Po ustawieniu podstaw dla elementów listy możesz zacząć grać z wyglądem menu w obszarze łączy. Pierwszy styl UL # navigation LI Aa następnie Odp .: link, Odp .: odwiedzone, Odp .: hover, i Odp .: aktywne (jeśli ich chcesz). W przypadku linków, chciałbym, aby linki były elementem blokowym (a nie domyślnym w linii). Zmusza ich to do zajęcia całej przestrzeni LII działają bardziej jak akapit, co ułatwia ich stylizację jako przycisków menu. Inną rzeczą, którą zawsze robię, jest usunięcie podkreślenia ( dekoracja tekstowa: brak;), ponieważ dzięki temu przyciski wyglądają bardziej jak przyciski do mnie. Ale oczywiście twój projekt może być inny. ul # navigation li a {Blok wyświetlacza;dekoracja tekstowa: brak;dopełnienie: .25em;border-bottom: solid 1px # 39f;border-right: solid 1px # 39f;} Zauważ, że z Blok wyświetlacza; ustawić na linkach, całe pole pozycji menu jest klikalne, a nie tylko litery. Jest to również dobre ze względu na użyteczność. Upewnij się, że ustawiłeś kolory linków (link, odwiedzony, najechany i aktywny), jeśli chcesz, aby różniły się od domyślnego niebieskiego, czerwonego i fioletowego. a: link, a: visited {color: #fff; }a: hover, a: active {color: # 000; } Lubię też nieco uwijać stan wskaźnika, zmieniając kolor tła. a: hover {background-color: #fff; } Jeśli chcesz więcej przykładów pionowych menu, sprawdź poniższą listę. Tworzenie poziomych menu nawigacyjnych jest nieco trudniejsze niż pionowe menu nawigacyjne, ponieważ trzeba zrekompensować fakt, że listy HTML preferują wyświetlanie w pionie. Podobnie jak w przypadku menu poziomego, najpierw utwórz listę menu nawigacyjnego:
Aby utworzyć menu poziome, postępuj tak samo, jak w menu pionowym. Zacznij od zewnątrz i wejdź do środka. Ponieważ chcę, aby moja nawigacja zaczynała się w lewym rogu, ustawiam ją z lewym marginesem i dopełnieniem, a ja unoszę ją w lewo. Powinieneś również przyzwyczaić się do ustawiania szerokości, aby Twoje menu nie zajmowało więcej lub mniej miejsca niż zamierzałeś. W przypadku menu poziomych zazwyczaj jest to pełna szerokość wzoru. Dodałem również kolor tła do całej listy, aby ułatwić czytanie. ul # navigation {float: left;margin: 0;wypełnienie: 0;szerokość: 100%;kolor tła: # 039;} Ale tajemnica poziomego menu nawigacyjnego znajduje się na liście. Elementy listy są zwykle elementami blokowymi, co oznacza, że będą miały znak nowej linii przed i po każdym. Przez przełączenie wyświetlacza z blok do inlinezmuszasz elementy listy do ustawiania się obok siebie poziomo. ul # navigation li {display: inline; } Traktowałem linki dokładnie tak, jak traktowałem je w pionowym menu nawigacyjnym, z tymi samymi kolorami i dekoracją tekstu. Dodałem górną granicę, aby wytyczyć przyciski, gdy są one zawieszone. Usunięto tylko Blok wyświetlacza; ponieważ to przywróci nowe linie i zniszczy menu poziome. ul # navigation li a {dekoracja tekstowa: brak;dopełnienie: .25em 1em;border-bottom: solid 1px # 39f;border-top: bryła 1px # 39f;border-right: solid 1px # 39f;}a: link, a: visited {color: #fff; }ul # navigation li a: hover {background-color: #fff;kolor: # 000;} Innym aspektem HTML jest identyfikator jesteś tutaj. Jeśli chcesz zmodyfikować swoje menu, aby wskazać aktualną lokalizację swoich użytkowników, po prostu użyj tego ID aby zdefiniować inny kolor tła lub inny styl. Przenieś ten atrybut ID do właściwej pozycji menu na innych stronach, tak aby bieżąca strona była zawsze podświetlona. ul # navigation li # youarehere a a {background-color: # 09f; } Jeśli umieścisz te style razem na swojej stronie, możesz utworzyć poziomy lub pionowy pasek menu, który działa z witryną, ale można go szybko pobrać i bardzo łatwo zaktualizować w przyszłości. Używanie XHTML + CSS zamienia twoje listy w potężne narzędzie do projektowania. Jeśli chcesz uzyskać więcej przykładów menu poziomych, zapoznaj się z poniższymi informacjami.
Menu nawigacji poziomej
Jesteś tutaj Informacje o lokalizacji
