Menu to nieodzowny element nawigacyjny każdej strony internetowej. W tym kursie przygotujemy menu poziome, które później będzie można wstawić na swoją stronę i dowolnie zmodyfikować.
Struktura menu w HTML
<!DOCTYPE html>
<html>
<head>
<title>Menu poziome</title>
</head>
<body>
<section>
<nav>
<ul>
<li><a href="link">Przycisk 1</a></li>
<li><a href="link">Przycisk 2</a></li>
<li><a href="link">Przycisk 3</a></li>
<li><a href="link">Przycisk 4</a></li>
</ul>
</nav>
</section>
</body>
</html>Efekt dotychczasowej pracy prezentuje się następująco. Przykład
Styl dla menu w CSS
Jak sama nazwa wskazuje – menu poziome, czyli przyciski muszą być obok siebie.
ul {
float: left;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
}
li a {
display: block;
float: left;
text-align: center;
font-size: 1.2em;
width: 130px;
text-decoration: none;
color: aqua;
background-color: blue;
padding: 10px 15px;
margin: 0px 1px 1px 0px;
border: 1px solid navy;
border-radius: 3px;
box-shadow: 0px 2px 3px gray;
}
li a:hover {
color: blue;
background: aqua;
border: 1px solid blue;
}