KATEGORIA:

Poziome menu – css

poziome menu css

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:

menu

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:

wysoko

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 paddinglewy i prawy.

Efekt:

rowne

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:

cien

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;
}

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *