Kada veličina ekrana ne dozvoljava da se prikazuju stavke menija horizonatalno, meni se može zameniti dugmetom, meni ikonom. Klikom na ovo dugme pojaviće se padajući meni sa stavkama.
Izgled dugmeta je realizvoan pomoću css i html koda. U css-u klasa menielement definiše izgled jedne crtice iz ikone za meni
.menielement {
width: 30px;
height: 4px;
background-color: #eee;
margin: 4px;
border-radius:8px;
}
Ovo je HTML deo, u kom su crtice organizovane u celinu
<div class="meniikona" onclick="meni()">
<div class="menielement"></div>
<div class="menielement"></div>
<div class="menielement"></div>
</div>
Kada korisnik klikne na dugme poziva se javascript funkcija meni, koja prikazuje/sakriva stavke padajućeg menija.
Kliknite na Test koda koji vas vodi na stranicu sa primerom. Ukoliko je širina prozora veća od 480px, biće prikazan horizontalni meni. Kada se širina prozora smanji ispod 480px prikazaće se meni kao dugme. @Media upit je korišćen u CSS-u za prepoznavanje različitih dimenzija ekrana. Rec !important je dodata kod osobine display, da bi meni bio vidljiv kada se dimezija prozora poveća.
@media only screen and (min-width: 481px){
#meni{
display: block!important;
background-color: #000077;
}
}