Niezależnie od tego, czy menu nawigacyjne Twojej witryny jest poziomym rzędem u góry, czy pionowym rzędem z boku, jest to tylko lista. Podczas projektowania nawigacja internetowa, menu nawigacyjne to grupa łączy. Gdy programujesz nawigację za pomocą XHTML+CSS, możesz utworzyć menu, które jest małe do pobrania (XHTML) i łatwe do dostosowania (CSS).
Pierwsze kroki
Aby zaprojektować listę do nawigacji, musisz użyć listy. Może to być standardowa nieuporządkowana lista, która została zidentyfikowana jako nawigacja. Na przykład:
- Dom
- Produkty
- Usługi
- Skontaktuj się z nami
Patrząc na kod HTML, link Strona główna ma identyfikator.
jesteś tutaj
Pozwala to na stworzenie menu, które identyfikuje aktualną lokalizację dla Twoich czytelników. Nawet jeśli nie planujesz teraz umieszczać tego typu wizualnej wskazówki na swojej stronie, możesz dołączyć te informacje. Jeśli zdecydujesz się dodać wskazówkę później, będziesz mieć mniej kodu na przygotowanie witryny.
Bez Stylizacja CSS
, to menu XHTML wygląda jak standardowa nieuporządkowana lista. Są punktory, a elementy listy są lekko wcięte. Podczas używania linki zastępcze, większość przeglądarek nie wyświetla linków jako klikalnych (podkreślonych i zaznaczonych na niebiesko). Po wklejeniu kodu HTML na stronę internetową nawigacja wygląda tak:- Dom
- Produkty
- Usługi
- Skontaktuj się z nami
To nie wygląda jak menu. Jednak z kilkoma stylami CSS dodanymi do listy, możesz stworzyć menu, z którego będziesz dumny.
Jeśli chcesz uzyskać więcej przykładów menu pionowych, wyszukaj w internecie następujące elementy:
- Stylizowane pionowe menu
- Podstawowy szablon menu pionowego
- Stylizowane pionowe menu z You Are Here
- Podstawowy szablon menu pionowego z You Are Here
Pionowe menu nawigacyjne
Pionowe menu nawigacyjne jest łatwe do napisania, ponieważ wyświetla się w taki sam sposób, jak zwykła lista: w górę iw dół. Pozycje listy są wyświetlane pionowo w dół strony.
Projektując menu, zacznij od zewnątrz i pracuj w środku. Najpierw nadaj styl nawigacji:
ul#nawigacja
Następnie przejdź do elementów i linków. Najpierw określ szerokość menu. Gwarantuje to, że jeśli elementy menu są długie, nie przesuną one reszty układu ani nie spowodują przewijania w poziomie.
ul#navigation { szerokość: 12em; }
Po ustawieniu szerokości pracuj nad elementami listy. Pozwala to ustawić takie rzeczy, jak kolory tła, obramowania, wyrównanie tekstu i marginesy.
ul#nawigacja li {
styl listy: brak;
kolor tła: #039;
brzeg-góra: stały 1px #039;
wyrównanie tekstu: do lewej;
margines: 0;
}
Po ustawieniu podstaw elementów listy popracuj nad wyglądem menu w obszarze łączy. Najpierw nadaj styl nawigacji:
UL#nawigacja LI A
Następnie dostosuj następujące style:
Odp.: link
Odp.: odwiedzone
A: najedź
Odp.: aktywny
W przypadku łączy ustaw łącza jako element blokowy (a nie domyślny wbudowany). Wymusza to, aby linki zajmowały całą przestrzeń LI i działały jak akapity, dzięki czemu łatwiej je stylizować jako przyciski menu. Następnie usuń następujące elementy:
podkreślenie, dekoracja tekstu: brak; tak jak
Dzięki temu przyciski wyglądają bardziej jak przyciski. Twój projekt może być inny.
ul#navigation li a {
Blok wyświetlacza;
dekoracja tekstu: brak;
wypełnienie: .25em;
obramowanie-dół: stałe 1px #39f;
obramowanie po prawej: stałe 1px #39f;
}
Z Blok wyświetlacza; ustawione na łączach, można kliknąć całe pole pozycji menu, nie tylko litery. Jest to również dobre dla użyteczności. Ustaw kolory linków (link, odwiedzone, najechanie i aktywne), jeśli chcesz, aby linki różniły się od domyślnego niebieskiego, czerwonego i fioletowego.
a: link, a: odwiedzony { color: #fff; }
a: najedź, a: aktywny { kolor: #000; }
Możesz również zwrócić uwagę na stan najechania, zmieniając kolor tła.
a: najedź { kolor tła: #fff; }
Menu nawigacji poziomej
Tworzenie poziomych menu nawigacyjnych jest nieco trudniejsze niż pionowych menu nawigacyjnych, ponieważ musisz zrównoważyć fakt, że listy HTML wolą wyświetlać w pionie. Podobnie jak w przypadku menu poziomego, utwórz listę menu nawigacyjnego:
- Dom
- Produkty
- Usługi
- Skontaktuj się z nami
Aby utworzyć menu poziome, postępuj tak samo, jak w przypadku menu pionowego. Zacznij od zewnątrz i pracuj w środku. Aby rozpocząć nawigację w lewym rogu, ustaw ją z lewym marginesem i dopełnieniem 0 i przesuń w lewo.
Nabierz zwyczaju ustawiania szerokości tak, aby menu nie zajmowało więcej lub mniej miejsca niż zamierzasz. W przypadku menu poziomych jest to zwykle pełna szerokość projektu. Możesz również dodać kolor tła do listy, aby ułatwić czytanie.
ul#nawigacja {
pływak: lewy;
margines: 0;
wypełnienie: 0;
szerokość: 100%;
kolor tła: #039;
}
Sekret menu nawigacji poziomej tkwi w elementach listy. Elementy listy są zwykle elementami blokowymi, co oznacza, że te elementy mają znak nowej linii umieszczony przed i po każdym z nich. Przełączając wyświetlanie z blokowego na wbudowane, wymuszasz ułożenie elementów listy poziomo obok siebie.
ul#navigation li { wyświetlacz: inline; }
Traktuj linki dokładnie tak, jak pionowe menu nawigacyjne, z tymi samymi kolorami i dekoracją tekstu. Dodaj górną ramkę, aby wytyczyć przyciski, gdy użytkownik najedzie na przycisk. Następnie usuń Blok wyświetlacza; ponieważ to wstawia z powrotem nowe linie i niszczy menu poziome.
Jesteś tutaj Informacje o lokalizacji
Innym aspektem HTML jest ten identyfikator:
jesteś tutaj
Jeśli chcesz zmodyfikować swoje menu, aby wskazywało bieżącą lokalizację użytkowników, użyj tego identyfikatora, aby zdefiniować inny kolor tła lub inny styl. Przenieś ten identyfikator atrybutu do właściwej pozycji menu na innych stronach, tak aby bieżąca strona była zawsze podświetlona.
Jeśli umieścisz te style razem na swojej stronie, możesz utworzyć poziomy lub pionowy pasek menu, który będzie współpracował z Twoją witryną i można go szybko pobrać i łatwo zaktualizować. Korzystanie z XHTML+CSS zamienia Twoje listy w potężne narzędzie do projektowania.
Jeśli chcesz uzyskać więcej przykładów menu poziomych, poszukaj w internecie następujących informacji:
- Stylizowane menu poziome
- Podstawowy szablon menu poziomego
- Stylowe menu poziome z You Are Here
- Podstawowy szablon menu poziomego z You Are Here