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

Kapcsolódó bejegyzések:
  • Alapvetően 2 módja van a CSS alapú lapok tartalmának középre igazításához attól függően, hogy a lap rugalmas vagy fix szélességű.Rugalmas lapszélességEz …

  • A devpapers.com -on találtam egy hasznos leírást, amiben egy olyan kódot mutattak be, mely segítségével egy adott könyvtárból véletlenszerűen lehet képet választ …

  • Az alábbi "color dodge"effektet könnyű használni, látványos hatást érhetsz el vele, szóval érdemes e tutorialra pár perc figyelmet szentelni. :)1. …

  • Most, hogy elérkeztünk a 4. fejezethez (és leraktuk az alapokat), ideje praktikus dolgokat is csinálnunk végre. Első lépésben megoldjuk oldalunk központosított f …

  • CSS alapú legördülő horizontális menü készítését sajátíthatod el a leírás segítségével.Stílus:body { padding: 0px; margin: 0px; behavior: ur …

A cikket beküldte: Harder (http://blog.harder.hu)

1 hozzászólás

  1. Zoli says:

    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!

Szólj hozzá
a Vízszintes menü CSS segítségével c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>