Jednoduché css menu

Jednoduché CSS menu, ktorým sa v článku budeme zaoberať bude vytvorené za pomoci zoznamov(XHTML) a za pomoci kaskádových štýlov CSS.

Na dnes si zoberieme menu, ktoré si postupne naštýlujeme cez CSS. Ako základ nám budú postačovať dva tagy <ul> a <li> - čiže zoznamy, ktoré sa používajú pre navigačné menu. Dobrým základom menu je XHTML oddelená štruktúra od štýlov a inak tomu nebude ani teraz. Najprv si urobíme štruktúru.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN"

"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">

<html>

<head>

<meta http-equiv="content-language" content="sk" />

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

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

<meta name="robots" content="all" />

<title>Titulok</title>

</head>

<body>



<ul class="menu">

<li><a href="/">Hlavná stránka</a></li>

<li><a href="/">Zoznam rubrík</a></li>

<li><a href="/">Download</a></li>

<li><a href="/">Ankety</a></li>

<li><a href="/">Weblinks</a></li>

</ul>



</body>

</html>

Štruktúra je hotová. Nemožno si nevšimnúť už dopredu priradenú triedu(class="menu") k tagu <ul>. Teraz nám už len chýba to CSS pomocou, ktorého si css menu naštýlujeme. CSS budeme teraz definovať iba pre menu. Takže budem definovať iba triedu "menu". Tu je:

 ul.menu {

font-family: "Trebuchet MS",sans-serif;

font-size: 1em;

width: 200px;

padding: 0; margin: 0;

list-style-type: none;

border-bottom: 1px solid #d9d9d9;

border-left: 1px solid #d9d9d9;

border-right: 1px solid #d9d9d9;

}

.menu li a:link, .menu li a:visited {

display: block;

height: 100%;

border-top: 1px solid #d9d9d9;

border-left: 2em solid #efefef;

background: #ffffff;

padding: 0.5em;

color: #444444;

text-decoration: none;

}

.menu li a:hover, .menu li a:active {

display: block;

height: 100%;

border-top: 1px solid #d9d9d9;

border-left: 2em solid #d9d9d9;

background: #efefef;

padding: 0.5em;

color: #444444;

text-decoration: none;

}

CSS kód si buď zadefinujeme do stránky alebo ako externý súbor. Teraz si skúste výsledok vo vašom webovom prehliadači a ak sa vám nechce písať náš kód stačí navštíviť hotový príklad tu. Všetkým selektorom a deklaráciám by ste mali rozumieť. Nič zložité. Pseudotriedy sú zoradené podľa poradia, takže vaše tlačidlá budú fungovať správe. Nič viac k tomu. Skúste ešte trochu preštýlovať niektoré tlačidlá aj s obrázkami. Má to omnoho krajší efekt. css menu je oveľa praktickejšie ako menu robené pomocou JavaScriptu. Ak by ste ešte mali záujem o viac css menu stačí navštíviť Google[css menu].

Test: FF 1.0.4, MSIE 6, Opera 8

Alternatívne verzie:

Autor: PaBi3 · Kategória: Webdesign · Dátum: 16.06.2005 16:02

Komentáre

#1 shuster Web

15.01.2006 22:27

Dobra stranka pre zaciatocnikov (je tu sice more gramatickych chyb), ale nieco som sa tu priucil.
Bohuzial je tu toho malo pre cloveka, co by chcel prejst z tabulkoveho layoutu na plne css pozicovanie, ako som ja.
CSS pouzivam uz dlho ale mam stale problem vytvorit v nom cely layout.
Inac v IE sa aktualne tento clanok rozpada.
V poslednej dobe vidam dost vela webov, kde jednoducho kaslu na IE.
Niektori si asi neuvedomuju ze ci tak, alebo onak je IE stale najpouzivanejsi browser a ani Firefox nedodrziava vsetky standardy na 100% (pripomeniem napriklad taky ALT v IMG).

IP adresa: 213.151.254.24

[Reagovať]

#2 admin Web E-mail

15.01.2006 22:35

V budúcnosti niečo napíšem aj o prechode z table do css layoutu. V MSIE sa článok nerozpadá (mne osobne nie).

Omyl - Firefox je práve ten čo dodržuje alt a title u obrázkov správne.

IP adresa: skrytá

[Reagovať]

#3 Shuster Web

15.01.2006 22:55

Tak teraz na to cumim v 5.5-ke a je to rozbite.
DIV s clankom sa ti zobrazuje az pod tymi na pravo.
V ostatnych clankoch to funguje, len v tomto a par dalsich sa to rozbija.
Podobne veci sa stavaju aj mne pri css layoutovani a neviem to riesit.

Inac, co tak toto:
<textarea name='content'><?echo $_POST["content"]?></textarea>

?
som zadal zle bezpecnostny kod a musel som to vypisovat znova :-(

IP adresa: 213.151.254.24

[Reagovať]

#4 anonym

16.01.2006 13:13

MSIE 5.5 sa už nepoužíva! Žiadny človek to nepoužíva na normálne surfovanie [shy].

IP adresa: 213.81.187.201

[Reagovať]

#5 shuster Web

21.01.2006 12:34

Potreboval som dropdown menu v UL a nasiel som jedno celkom zaujimave tu:
http://www.htmldog.com/articles/suckerfish/dropdowns/example/

IP adresa: 213.151.254.24

[Reagovať]