FLOAT: LEFT
Kiedy mamy przygotowaną nawigację w HTML, musimy dodać odpowiednie style, aby z domyślnego pionowego, przekształcić je w poziome menu.
Przedstawiam przykładowe menu w html:
<nav>
<ul>
<li><a href="#">START</a></li>
<li><a href="#">O STRONIE</a></li>
<li><a href="#">OFERTA</a></li>
<li><a href="#">KONTAKT</a></li>
</ul>
</nav>
Tak ono wygląda w przeglądarkach:
Aby otrzymać menu poziome, wystarczy w pliku css dodać do <li>
następujące cechy:
li{
float: left;
width: 25%;
text-align: center;
}
JAK ZMIENIĆ DOMYŚLNE STYLE LINKÓW
Znaczniki <a>
są domyślnie niebieskie, podkreślone a po kliknięciu stają się fioletowe. W kodzie css można szybko ustawić swoje własne wartości, np. w taki sposób:
a{
text-decoration: none;
color: black;
}
a:hover, a:focus{
color: green;
}
Więcej na ten temat w artykule Zmiana domyślnego stylu linków css.
JAK DODAĆ TŁO NAWIGACJI?
Aby tło było szerokie na całą stronę, należy usunąć domyślne marginesy dla <body>
oraz określić wysokość nawigacji.
Efekt:
nav ul{
background: gray;
height: 50px;
}
body{
margin: 0;
}
JAK WYRÓWNAĆ NAWIGACJĘ W POZIOMIE?
Generalnie menu wygląda dobrze, ale przyciski są zbyt wysoko. Aby to poprawić, należy użyć cechy padding
.
li{
padding: 15px 0;
}
Pierwsza wartość: 15px
odpowiada za padding
górny i dolny, druga wartość: 0
odpowiada za padding
lewy i prawy.
Efekt:
JAK DODAĆ CIEŃ DO MENU?
Teraz można już zadbać o estetykę naszego menu. Dodamy do niego cień oraz zmienimy kolor na jaśniejszy
nav ul{
background: lightgray;
height: 50px;
box-shadow: 0px 0px 20px 2px #000;
}
Efekt:
Teraz menu wygląda całkiem dobrze. Wszystko to dzięki kilku linijkom tekstu w pliku css. Poniżej przedstawiam cały zewnętrzny arkusz stylów. Można dodać do niego jeszcze bardzo wiele elementów, które urozmaicą nawigację na stronie.
body{
margin: 0;
}
nav ul{
background: lightgray;
height: 50px;
box-shadow: 0px 0px 20px 2px #000;
}
li{
float: left;
width: 25%;
text-align: center;
list-style-position: inside;
color: black;
padding: 15px 0;
}
a{
text-decoration: none;
color: black;
}
a:hover, a:focus{
color: green;
}