Forum Komputerowe Info-PC :: [html +css]Proste Pionowe Menu Rozwijane

milosz0010 · Dołączył: 25 Mar 2008 Posty: 3

Witam

Dzisiaj tak sobie siedzę i bawię się w css'ie i wymyśliłem proste menu rozwijane operte na divach

. A więc zaczynamy:

Najpierw HTML

1. Tworzymy głównego diva:

Kod:

2. Dopisujemy do środka poprzedniego diva nagłówek menu oraz następnego diva:

Kod:

3. Pod nagłówkiem wstawiamy liste(wykaz):

Kod:

<div id="glowny">
<div id="naglowek"><h2>Menu</h2></div>

<ul>
<li><a href="#">Podmenu</a></li>
<li><a href="#">Podmenu</a></li>
<li><a href="#">Podmenu</a></li>
<li><a href="#">Podmenu</a></li>
<li><a href="#">Podmenu</a></li>
</ul>

</div>

Teraz CSS

1.W tagu HEAD dopisujemy:

Kod:

2.Dodajamy do srodka css'a:

Kod:

#glowny{
height:20px;
width:100px;
overflow:hidden;}

Początkowo ustalamy małą wysokość (height). Ustalamy przepełnienie elementu, tak aby było schowane(overflow:hidden).

3.Ustalamy właściwość najechania na element(hover):

Kod:

#glowny:hover{
height:200px;
width:100px
}

Teraz wysokość głównego jest powiększona.

4. Ustawiamy właściwości listy (ul):

Kod:

#glowny ul{
padding:0px;
list-style:none;
display:block;
margin:0px;
}

Akapity, marginesy są wyzerowane, styl listy jest też zerowy(nie ma żadnego), display - element będzie wyświetlony w bloku (odstęp z góry i z dołu).

5. Ustawiamy właściwości nagłówka(h2 i #naglowek):

Kod:

#naglowek{
height:20px;width:100px;background:#0078ff;
color:#fff;}

h2{
font-size:20px;
padding:0;
text-align:center;
}

5. Na koniec można jeszcze ustawić globalne akapity i marginesy:

Kod:

*{
padding:0px;
margin:0px;
}

Myślę, że wszystko ładnie opisałem i nawet bardzo początkujący da sobie rade =]

Jeszcze dam cały kod:

Kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled</title>
<style type="text/css">
#glowny{
height:20px;
width:100px;
overflow:hidden;
}
#glowny:hover{
height:200px;
width:100px
}

#glowny ul{
padding:0px;
list-style:none;
display:block;
margin:0px;
}
#naglowek{
height:20px;width:100px;background:#0078ff;
color:#fff;}

h2{
font-size:20px;
padding:0;
text-align:center;
}
*{
padding:0px;
margin:0px;
}
</style>
</head>

<body>

<div id="glowny">
<div id="naglowek"><h2>Menu</h2></div>

<ul>
<li><a href="#">Podmenu</a></li>
<li><a href="#">Podmenu</a></li>
<li><a href="#">Podmenu</a></li>
<li><a href="#">Podmenu</a></li>
<li><a href="#">Podmenu</a></li>
</ul>

</div>

</body>
</html>

Jeśli ktoś zauważył jakieś błędy to pisać =]