html css trikovi vertikalna response navigacija


Akcija traje do 01.08.2019 - Besplatni online kurs web dizajna

Nastavna jedinica: Vertikalna response navigacija


Nazad


Vertikalna response navigacija


Pored standarne horizontalne navigacije, često kod web sajtova (najčešće kod Web Shop-ova) nalazi se i vertikalna navigacija sa kategorijama artikala. Primer u nastavku daje jedan jednostavan HTML kod sa pratećim CSS stilovima koji renderuju vertikalnu navigaciju odredjene širine u pixelima ili u procentima sa efektom menjanja boje prelaskom miša preko linkova.

Stilovi koji se nalaze u HEAD sekciji stilizuju div tag klase class="menu menu-vertical". U tom div tagu, koji se pojavljuje u BODY odeljku, nalaze se linkovi. Stilovi stilizuju navigaciju po pitanju širine navigacije, boje navigacije, boje na hover efekat, širinu svakog polja itd.

Vertikalna navigacija može da ima širinu (Width) u pixelima, ali ukoliko se div tag klase class="menu menu-vertical" ubaci u bilo koji div tag koji poziva Bootstrap stilove, preporučuje se širina bude u procentima čime će vertikalna navigacija da bude response (videti nastavne jedinice koje opisuju rad sa Bootstrap stilovima).

Implementacija vertikalne navigacije ide veoma jednostavno.

U CSS fajl se ubace stilovi sa svojim svojstvima dok se u HTML kod u BODY deo ubaci kompletan div tag klase class="menu menu-vertical” u odredjeni div tag gde je planirana vertikalna navigacija.

1) U HEAD sekciju ili poseban CSS fajl


 

2) U BODY odeljak - div tag sa navigacijom

       

Prikaz navigacije u Browser-u

 

NOVO - DOPUNITE ZNANJE - WEB PROGRAMIRANJE (PHP, SQL)

Posle pređenih svih nastavnih jedinica u okviru Besplatne online obuke za web dizajn, obuku možete nadograditi odnosno dopuniti svoje znanje tako što će naučiti i web programiranje - PHP, SQL - izrada dinamičkih sajtova, online prodavnica. Kurs prati napisana skripta, izvorni kodovi i nekoliko desetina video nastavnih jedinica gde polaznik hronološki uči pisanje koda u PHP-u, testiranje skripti, korišćenje i rad sa Local serverom.

Cena obuke