NASLOV Vežbe*
CSS padajući menu
PROLOG
Autor*
Katarina Kaplarski
Kategorizacija*
Nizo težine*
IM-lD-UVD-V10
Osnovni
Ključne reči*
Ko sluša?*
OAS student
Vreme učenja*
40 min
Komentari autora
SADRŽAJ
Apstrakt
Cilj *
Kreiranje padajućeg menija uz pomoć CSSa
Uvodne napomene o vežbi
Naslov sekcije
Sadržaj (telo) sekcije
DEMO link – samo MENU 2 i 4 imaju padajuću strukturu
http://ad420.metropolitan.ac.rs/demo/dropmenu.html
HTML:
Kreiraćete neuređeni listu sa koja ima id "menu" i i nekoliko neuređenih listi sa klasom "submenu"
<ul id="menu">
<li>
<a href="#">Menu 1</a>
</li>
<li><a href="#">Menu 2</a>
<ul class="sub-menu">
<li>
<a href="#">Sub Menu 1</a>
</li>
<li>
<a href="#">Sub Menu 2</a>
</li>
<li>
<a href="#">Sub Menu 3</a>
</li>
<li>
<a href="#">Sub Menu 4</a>
</li>
</ul>
</li>
<li><a href="#">Menu 3</a>
</li>
<li><a href="#">Menu 4</a>
<ul class="sub-menu">
<li>
<a href="#">Sub Menu 1</a>
</li>
<li>
<a href="#">Sub Menu 2</a>
</li>
<li>
<a href="#">Sub Menu 3</a>
</li>
<li>
<a href="#">Sub Menu 4</a>
</li>
</ul>
</li>
<li>
<a href="#">Menu 5</a>
</li>
</ul>
CSS
/*Postavka menija*/
ul#menu, ul#menu ul.sub-menu {
padding:0;
margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li {
list-style-type: none;
display: inline-block;
}
/*Izgled linkova*/
ul#menu li a, ul#menu li ul.sub-menu li a {
text-decoration: none;
color: #fff;
background: #666;
padding: 5px;
display:inline-block;
}
/*Načinite parent element podmenija relativnim*/
ul#menu li {
position: relative;
}
/*pod-meni , sub-menu*/
ul#menu li ul.sub-menu {
display:none;
position: absolute;
top: 30px;
left: 0;
width: 100px;
}
ul#menu li:hover ul.sub-menu {
display:block;
}
Kreirali smo menu u neuređenoj listi i ubacili smo pod menu unutar liste jer je u pitanju blok element – a blok
elementi mogu da sadrže unutar elementa bilo koji drugi blok ili inline element.
Po difoltu pod-meni je sakriven uz pomoć propertija display:none i pokazuje se samo kada je kursor
iznad parent elementa u listi.
RELEVANTNI LINKOVI
Opis
URL
REČNIK
Termin
Opis
POD-OBJEKTI ZNANJA (Slučajevi korišćenja, Procedura korak po korak, Referentne liste)
Naziv pod-objekta znanja
Telo pod-objekta znanja
Naziv procedure korak po korak
1. korak
akcija
očekivani rezultat
2. korak
akcija
očekivani rezultat
3. korak
......
DRUGI PREDLOŽENI SADRŽAJI AUTORA
Naslov
Telo
Download

CSS padajući menu IM-lD-UVD-V10 http://ad420.metropolitan.ac.rs