W tym artykule dowiesz się, jak stworzyć estetyczne i funkcjonalne menu nawigacyjne w HTML, które zdecydowanie wpłynie na to, czy użytkownik zostanie na stronie, czy ją opuści. Przystępność i atrakcyjność menu nawigacyjnego to kluczowe aspekty każdej strony internetowej.
Listy w HTML
Tworzenie menu nawigacyjnego zaczyna się od zrozumienia tagów listy, które umożliwiają łatwe zbudowanie struktury menu. Użyjemy tutaj list nieuporządkowanych z tagiem <ul> dla głównego kontenera menu i tagów <li> dla poszczególnych elementów menu. Możesz użyć tagu <ul>, domyślnie używanego dla list punktowanych oraz <ol> dla list numerycznych.
<ul>
<li><a href="#">Strona główna</a></li>
<li><a href="#">Tutoriale</a></li>
<li><a href="#">Kursy</a></li>
<li><a href="#">Szkolenia</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
W każdym elemencie <li> znajduje się link (<a>), który prowadzi do określonej strony lub sekcji. Możesz używać elementu <a href="#"> do wstawiania linków wewnętrznych i zewnętrznych.
Takie menu możesz dodać np. do Twojego artykułu na blogu, a następnie umieścić kotwice w tekście, do których użytkownik zostanie przeniesiony po kliknięciu pozycji z menu. Możesz też, co pokażemy dalej, rozbudować swoje menu o styl CSS, dzięki czemu zmienić jego wygląd, a także będziesz mógł go używać w innych sytuacjach, np. jako menu na stronie WWW.
Budowanie struktury menu w HTML
Gdy struktura listy jest gotowa, należy ją umieścić w odpowiedniej sekcji strony, używając tagu <nav>, który jest przeznaczony do strukturyzowania nawigacji:
<header>
<nav>
<ul>
<li><a href="#1">Strona główna</a></li>
<li><a href="#2">Tutoriale</a></li>
<li><a href="#3">Kursy</a></li>
<li><a href="#4">Szkolenia</a></li>
<li><a href="#5">Kontakt</a></li>
</ul>
</nav>
</header>
Tak przygotowane menu jest jeszcze bez stylów i domyślnie wyświetla się w pionie.
Stylizacja menu nawigacyjnego za pomocą CSS
Ostatnim krokiem jest dodanie stylów CSS, które uczynią menu bardziej atrakcyjnym wizualnie i funkcjonalnym. Zacznijmy od podstawowego formatowania:
header {
background: rgba(0, 0, 0, 0.7);
width: 100%;
position: fixed;
z-index: 100;
}
nav {
float: left;
}
nav ul {
list-style: none;
overflow: hidden;
}
nav ul li {
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
nav ul li a {
display: block;
padding: 20px;
color: #fff;
text-decoration: none;
}
nav ul li:hover {
background: #eca023;
}
Za pomocą tych stylów:
headerjest umieszczony na stałe na górze strony (position: fixed), z ciemnym półprzezroczystym tłem.- Elementy listy (
li) są ustawione w rzędzie (za pomocąfloat: left), mają jednolitą czcionkę i są wyraźnie oddzielone od siebie dzięki ustawieniom marginesu. - Linki (
a) są wyświetlane jako bloki, co umożliwia dodanie marginesów, oraz mają białą czcionkę bez podkreślenia. - Dodatkowo, po najechaniu kursorem na element listy, jego tło zmienia kolor na złoty, co dodaje interaktywności.
Wynik
Stworzyliśmy podstawowe, ale funkcjonalne i estetycznie atrakcyjne menu nawigacyjne w HTML i CSS, które będzie służyć jako efektywny element nawigacyjny na każdej stronie internetowej. To tylko podstawy, ale zawsze można rozszerzyć te techniki o dodatkowe funkcje i style, aby dopasować menu do bardziej zaawansowanych potrzeb.
