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
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!