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>
Formázatlan menü megjelenése.

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;
}
Lista pontok nélkül.

Második lépésként balra úsztatjuk a lista elemeket, ennek következtében egy sorba rendeződnek:

nav li {
    float: left;
}
Lista elemek vízszintesen rendezve.

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;
}
Ez már egy használható vízszintes menü.

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):

Egy lehetséges menü stílus.

Last updated