4

html5

css3

Menu poziome

html5 css3

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>
</nav>
</section>
</body>

</html>

Efekt dotychczasowej pracy prezentuje się następująco.

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;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 0px 2px 3px gray;
-moz-box-shadow: 0px 2px 3px gray;
-webkit-box-shadow: 0px 2px 3px gray;
}

li a:hover {
color: blue;
background: aqua;
border: 1px solid blue;
}

Efekt

comments powered by Disqus

Do góry