Informacje o nowych artykułach oraz akcjach edukacyjnych prosto na Twojej skrzynce e-mail!

Menu w formie zakładek

Często spotykanym rozwiązaniem w projektowaniu menu strony jest tworzenie go w formie zakładek. Poniższe menu składa się z nieuporządkowanej listy ułożonej poziomo.

<!DOCTYPE html>
<html>
<head>
    <title> Menu w formie zakładek </title>
    <style>
        li.menu {
            display: inline;}
        li.menu a {
            background-image: url(tab.gif);
            width: 138px;
            text-align: center;
            color: #2c2c2c;
            text-decoration: none;
            border-bottom: 1px black solid;
            float: left; }
        li.menu a:hover {
            background-image: url(tabhover.gif);
            text-decoration: none;
            font-weight: bold; }
    </style>
</head>
<body>
<p>
<ul>
    <li class="menu"><a href="#">Odsyłacz 1</a></li>
    <li class="menu"><a href="#">Odsyłacz 2</a></li>
    <li class="menu"><a href="#">Odsyłacz 3</a></li>
</ul>
</p>
</body>
</html>

Zapisz poniższe obrazki na dysku:

tabhover
tabg

Przykład:

menu_zakladki_css

Spodobało się?

Jeśli tak, to zarejestruj się do newslettera aby otrzymywać informacje nowych artykułach oraz akcjach edukacyjnych. Gwarantuję 100% satysfakcji i żadnego spamowania!

, , , ,

Dodaj komentarz

Odpowiedz

Twój adres e-mail nie zostanie opublikowany.

Pin It on Pinterest