Horizontálne CSS menu

V dnešnom článku si priblížime jeden zo spôsobov ako vytvoriť CSS menu, ktorého položky sú zoradené horizontálne. Uvidíte, že nejde o nič ťažké.

Ako začať?

Prvým krokom bude asi priblíženie štruktúry menu a využitie vhodných tagov pre jeho konštrukciu. Najvhodnejšie by bolo, ak by ste už teraz mali preštudovaný článok HTML pre začiatočníkov - zoznamy, 6.diel. Stačí ak si preštudujete tú časť, ktorú momentálne potrebujeme, čiže tag <ul>. Po ňom bude nasledovať niečo čo musíte poznať - CSS.

Napíšeme si menu

Menu zapíšeme nasledovne:

<ul class='menu'>

   <li><a href="web.xhtml" title="web">web</a></li>

   <li><a href="obrazky.xhtml" title="obrázky">obrázky</a></li>

   <li><a href="skupiny.xhtml" title="skupiny">skupiny</a></li>

   <li><a href="katalog.xhtml" title="katalóg">katalóg</a></li>

</ul>

Nič zložité pokiaľ si nevšimnete v menu triedu menu. Táto trieda bude odkazovať na CSS štýly, ktoré budeme potrebovať pre vizuálne okrášlenie menu. Ak ešte máte problémy s rozlišovaním tried a identifikátorov, preštudujte si článok CSS - triedy, identifikátory a komentáre, 3.diel.

Zapisovanie CSS kódu

Nastal čas si štýly aj napísať a nie len o nich básniť a preto hneď aj začneme.

a { font-weight:bold; }

a:link { text-decoration:underline; }

a:visited { text-decoration:underline; }

a:hover { text-decoration:none; }

a:active { text-decoration:underline; }


ul.menu { width:100%; height:1.2em; list-style-type:none; padding:0; margin:0; background:#526f91; border:1px dotted #efefef; }

ul.menu li { float:left; display:block; border-right:1px dotted #ffffff; }

ul.menu li a { display:block; color:#ffffff; padding:0 1.5em 0 1.5em; }

ul.menu li a:hover { color:#ffffff; background:#7198bc; }

Úvod už určite poznáte a tak viete, že hypertextové odkazy budú podčiarknuté a budú narozdiel od obyčajného textu vyznačené hrubým písmom. Máte šancu si teraz všimnúť aj nápaditý tag ul, ktorý štýlujeme nasledovne ul.menu { /*css*/ }. Celé horizontálne menu v podstate tkvie na položke zoznamu <li>, ktorá bola zarovnaná na ľavú stranu zoznamu <ul> (pomocou zápisu float:left).

Celý kód menu a hotový príklad

Celý kód XHTML vrátane CSS nájdete tu:

<?xml version="1.0" encoding="iso-8859-2" ?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd1">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sk">

 <head>

  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-2" />

  <meta name="author" content="PaBi3, http://www.pabi3.com/" />

  <style type="text/css">

   a { font-weight:bold; }

   a:link { text-decoration:underline; }

   a:visited { text-decoration:underline; }

   a:hover { text-decoration:none; }

   a:active { text-decoration:underline; }

   ul.menu { width:100%; height:1.2em; list-style-type:none; padding:0; margin:0; background:#526f91; border:1px dotted #efefef; }

   ul.menu li { float:left; display:block; border-right:1px dotted #ffffff; }

   ul.menu li a { display:block; color:#ffffff; padding:0 1.5em 0 1.5em; }

   ul.menu li a:hover { color:#ffffff; background:#7198bc; }

  </style>

  <title>Horizontálne menu</title>

 </head>

 <body>


   <ul class='menu'>

    <li><a href='web.xhtml' title='web'>web</a></li>

    <li><a href='obrazky.xhtml' title='obrázky'>obrázky</a></li>

    <li><a href='skupiny.xhtml' title='skupiny'>skupiny</a></li>

    <li><a href='katalog.xhtml' title='katalóg'>katalóg</a></li>

   </ul>


 </body>

</html>

Určite očakávaný hotový príklad nájdete na tejto linke :-). Rozumiem, ak ešte poznáte lepší spôsob na vytvorenie podobného menu a aj chápem, že takých spôsobov je nespočetné množstvo, čiže bude zbytočné písať do diskusií o tom akoby sa to dalo vyrobiť lepšie. Opakujem spôsobov je veľa ale to neznamená, že toto je ten zlý :-).

Alternatívne verzie:

Autor: PaBi3 · Kategória: Webdesign · Dátum: 10.10.2005 17:51

Komentáre

#1 smiko

00.00.0000 00:00

nadherna vec, myslim, ze sa to da pouzit. ja by som videl este jeden sposob blokovania a to hlavne pre tych co do internetu nevedia tak dobre a to cez cookies. tym sa da dynamicke IP adresy celkom dobre zablokovat.nehcel by si do clanku doplnit aj ako sa to da cez cookies ?

IP adresa: 127.0.0.1

[Reagovať]

#2 admin Web E-mail

00.00.0000 00:00

Nerozumiem ako cez cookies? Po vymazaní cookies užívateľ bude mať opäť prístup na stránku. IP adresa sa mi vidí ako lepší spôsob [laugh].
Cookies ako BAN == nezmysel [tongue]!

IP adresa: skrytá

[Reagovať]

#3 smiko

00.00.0000 00:00

no, ale primerny uzivatel nevie kde sa taketo veci vymazavaju. aj ked, prave ma napadlo ako ten cookies zapisat vsak bez toho aby sme vedeli na koho sa to ma pouzit :) ehm, no tak teda tadeto cesta nevedie... sekol som sa :)

IP adresa: 127.0.0.1

[Reagovať]

#4 Los.Pavlos E-mail

00.00.0000 00:00

Loool přes cookies.... to je mnohem lepší než blokace IP.... při bloknutí ip bych musel hledat nějakou proxinu ale při bloknutí podle cookies mi stačí dvě kliknutí aby se mi smazalo to cookie (Miscellaneous/Delete domian cookies) [amazed].

IP adresa: 127.0.0.1

[Reagovať]

#5 smiko

00.00.0000 00:00

o to nejde, priemerny uzivatel, ktorych je hodna kopa, nevie co je cookies, kde sa vymazavaju to vie viac ludi. ale myslis, ze by ich to napadlo, ze to moze byt priamo s tym suvysle ? :)som uz povedal, ze s tym cookies som sa pomylil, lebo si fakt neviem predstavit ako to spravit bez predchadzajucej detekcie. jedine ze by sa niekde priamo zaznamenavalo informacie, ktore sa uzivatelovi zapisuju do cookies a podla casov nejako vyhodnotit toho neprajnika :)

IP adresa: 127.0.0.1

[Reagovať]

#6 admin Web E-mail

00.00.0000 00:00

Ja osobne si myslím, že drvivá väčšina ľudí, ktorí chodia na stránky podobného zamerania ako je táto vie cookies vymazať rovnako dobre ako bolo napísané v [4] príspevku [wink].

IP adresa: skrytá

[Reagovať]

#7 Hunter13

00.00.0000 00:00

smiko: musis ratat aj z uzivatelmi, ktori niesu na urovni hojdacieho konika [laugh].

IP adresa: 127.0.0.1

[Reagovať]

#8 shuster Web

15.01.2006 23:14

Tak toto horizontalne menu cez UL je fakt dobra vychytavka.
Ja to stale riesim cez tabulky (ako vsetko ostatne).

IP adresa: 213.151.254.24

[Reagovať]