Menu pionowe
Aby je stworzyć musimu napierw zrobić listę.
<ul> <li><a href="#">Opcja 1</a></li> <li><a href="#">Opcja 2</a></li> <li><a href="#">Opcja 3</a></li> </ul>
Nastęnie pozbywamy się z naszego menu kropek po lewej stronie, podkreślenie oraz zmieniamy sposób wyświetlania na block tak by można było dodać szerokość, wysokość, kolor tła.
ul{
list-style-type: none;
}
li{
display: block;
}
a{
display: block;
text-decoration: none;
padding: 10px;
width: 200px;
background-color: #30BCED;
border: 3px solid #F0EFF4;
color: #F0EFF4;
}
Edytujemy też a:hover by elementy po najechaniu kursorem zmieniły troche swój wygląd
a:hover{
background-color: #F0EFF4;
border: 3px solid #30BCED;
color: #30BCED;
}
Nasze menu wygląda tak
Menu poziome
Aby powstało menu poziome należy tylko lekko zmodyfikować poprzedni kod. wartość display zmieniamy na inline oraz inline-block, tak jak poniżej.
ul{
list-style-type: none;
}
li{
display: inline;
}
a{
display: inline-block;
text-decoration: none;
padding: 10px;
width: 200px;
background-color: #30BCED;
border: 3px solid #F0EFF4;
color: #F0EFF4;
}
Efekt