Spustni meni z zaobljenimi robovi

Spletne strani z veliko vsebine so najbolj pregledne s spustnim menijem, saj je prikazanih veliko povezav na enem majhnem prostoru tj. v spustnem meniju.

Spodnji spustni meni sem našel na spletni strani CSS play in je po mojem mnenju eden najboljših, ki jih najdete na internetu. Narejen je izključno s CSSjem, brez kakršnegakoli Javascripta. Meni sem rahlo predelal in objavil na spletni strani moje-mesto.com.


Moje predelave spustnega menija:

- Odstranil sem slike za zaobljene robove in vstavil kodo, ki to naredi namesto njih. Več o tej CSS kodi si lahko pogledate v tem vodiču: Zaobljeni robovi.

- Obliko glavnih možnosti (Moje-Mesto, Vodiči, ... ) sem poenotil. Glavne možnosti nadzirajo stili .one, .two, .three, .four.

- Spremenil sem obliko zadnjih, spustnih možnosti, tako, da se vsak del spustnega menija konča z zaobljenimi robovi; tudi takrat, ko greste z miško čez (hover) .


HTML in CSS koda

PRENOS - Download


Navodila za uporabo spustnega menija:


Skupno:

1. Širina stolpcev: Spremenite width: v vrstici #menu li in #menu dl.

2. Kako odstranim zaobljene robove: Poglejte si vodič Zaobljeni robovi in odstranite tam omenjeno kodo.

3. Pisava: Spremenite font-family: v vrstici #menu


Glavne možnosti:

1. Barva ozadja: Spremenite background: v vrstici #menu .one, #menu .two, #menu .three, #menu .four. Vsaki možnosti lahko nastavite svojo barvo ozadja, lahko tudi slikico.

2. Velikost pisave: Spremenite font-size: v vrstici #menu dt.

3. Barva besedila: Spremenite color: v vrstici .gallery dt a.

4. Višina: Spremenite padding: v vrstici #menu dt.



Spustne možnosti:

1. Barva ozadja: Spremenite background: v vrstici .gallery dd a.

2. Velikost pisave: Spremenite font-size: v vrstici #menu dd.

3. Barva besedila: Spremenite color: v vrstici .gallery dd a.

4. Višina: Spremenite padding-top: v vrstici #menu dd.

5. Kako odstranim oz. spremenim puščice: Zbrišite url(pus.gif) oz. url(pus2.gif) iz kode. Če želite dodati svoje majhne slikice pa le nadomestite pus.gif in pus2.gif s potjo do svojih slikic.

6. Kako urejam čisto zadnjo možnost: Spreminjajte vrednosti v vrstici #menu dd.last in dd.last a:hover.

Drugo:

Kako dodati nov stolpec?
Označite <li> ... </li> v kodi in pritisnite Ctrl+C. Pojdite na konec vrstice, pritisnite Potrdi (Enter) in nato pritisnite še Ctrl+V.

Kako dodati novo spustno možnost?
Označite <dd> ... </dd> v kodi in pritisnite Ctrl+C. Pojdite na konec vrstice, pritisnite Potrdi (Enter) in nato pritisnite še Ctrl+V.

Kaj pomeni <base target=«_blank«> v glavi ?
Pomeni, da se bodo vse kliknjene povezave odprle v novem oknu.

Ali mora biti DOCTYPE nujno v HTML dokumentu?
Da! Če ga ne bi bilo, meni ne bi deloval v Internet Explorerju.


*Zaobljeni robovi ne delujejo v IE
*CSS kodo, ki je sedaj v glavi lahko kopirate v posebno CSS datoteko in jo nato uvozite v HTML dokument. Kako se to naredi si lahko ogledate tukaj: Uvoz CSS v HTML
*Vse datoteke za spustni meni lahko najdete med Prenosi


Zaključek: Spustni meni je odlično dopolnilo naše spletne strani, če ga znamo pravilno grafično integrirati v našo spletno stran. Drop down menu izboljša navigacijo po vaši spletni strani, poleg tega pa s svojimi zaobljenimi robovi popestri vašo stran, zato Vam ga resnično priporočam za uporabo.