Vízszintes menü úsztatással
A technika kiindulási alapja egy navigációs menü egy listából, és lista elemekből felépítve (nav
elemről bővebben itt):
<nav>
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Blog</a></li>
</ul>
</nav>

Első lépésként eltüntetjük a lista elemek pontjait, és a listán lévő külső és belső margót:
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}

Második lépésként balra úsztatjuk a lista elemeket, ennek következtében egy sorba rendeződnek:
nav li {
float: left;
}

A harmadik lépés, hogy a menüpontokat széthúzzuk, belső margó segítségével, ezt az a
elemre tesszük. Ahhoz, hogy a belső margót rá tudjuk tenni az a
elemre, blokkos elemmé kell alakítani, alapesetben szövegközi elem (inline).
nav a {
display: block;
padding: 0 16px;
}

Kész a vízszintes menü, jelen formájában már használható, a következő példában további stílusokkal látjuk el (elemek magassága, szövegszín, háttérszín):

Last updated