Vízszintes menü CSS segítségével

CSS segítségével könnyen és gyorsan lehet a későbbiekben pillanatok alatt módosítható vízszintes menüt készíteni. Első körben a HTML (vagy PHP) oldal HEAD részébe illeszd be az alábbi CSS kódot (Természetesen ez a CSS külső fájlban is lehet!)

1
2
3
4
5
6
7
8
9
10
11
12
13
#navcontainer ul {
float:left;
width:100%;
margin:0;
padding:0;
font-size:11px;
font-family:verdana, arial, helvetica, sans-serif;
color:#fff;
background:#ccc;
}
#navcontainer ul li {
display:inline;
}

Amint ezzel megvagy, a <body> </body> tag-ek közé illeszd be az alábbi listát oda, ahol majd a menüt szeretnéd látni.

1
2
3
4
5
6
7
<div id="navcontainer">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

Tulajdonképpen ezzel meg is vagy, ha mented a fájlt és megnézed egy böngészőben, fent egy vízszintes menüt fogsz szürke háttérrel látni.

… és egy kis magyarázat a fentiekhez:

A "#navcontainer ul" rész tartalma fogja formázni a "<div id="navcontainer">"-en belüli részeket. A szélessége 100% lesz, így a div teljes szélességében kitölti a rendelkezésére álló területet.

A "#navcontainer ul li" rész fogja formázni a lista elemeit (home, product, contact). A "display:inline" rész felel azért, hogy a lista elemei 1 sorban jelenjenek meg a szokásos függőleges elrendezés helyett.

Illusztrálandó, hogy milyen flexibilis a menü alakíthatósága, a fenti CSS kódrészletet cseréld le az alábbira:

1
2
3
4
5
6
7
8
9
10
11
12
#navcontainer ul li a {
float:left;
padding:5px 10px;
background:#ccc;
color:#fff;
text-decoration:none;
border-right:1px solid #fff;
}
#navcontainer ul li a:hover {
color:#fff;
background:#69c;
}

Rögtön más lett a leányzó fekvése, ugye..? :) Egyből jobban hasonlít a menü a hagyományos "gomb" stílusra.

Forrás: devpapers.com

Hugyecz Görgy (Harder)
20+ éve munkám és hobbim is az online világhoz köt. Az utóbbi 10+ évben leginkább keresőopimalizálás (SEO) témában tevékenykedem, mellette pedig Google Ads és Facebook PPC fronton is segítem ügyfeleimet. Korábban 10+ évig webgrafika, sitebuild, weboldal készítés témakörben mozogtam.

1 hozzászólás

  1. Sziasztok!

    Valaki tudna nekem segíteni? A problémám az lenne, hogy készítettem egy vízszintes css menüt, teljesen egyszerű. Dreamweaver cs5-tel. Minden tökéletesen működik, csak amikor átméretezem a böngészőt, a vízszintes menűből függőlegesen egymás alá rendeződnek a menüpontok. Mivel lehetne fix vízszintbe tartani függetlenül a felbontástól vagy a böngészőablak méretétől? Válaszotokat és segítségeteket előre is köszönöm!

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét