Padajući meni

Dragan Filipović Kurs, Treći deo - Skripta Comments (1)

Guglajući dropdown vertical menu script našao sam skriptu na strani

http://www.javascriptkit.com/script/script2/verticalmenu.shtml

Pripremite vašu stranu, obrišite elemente koje imate u levoj koloni (tekst ili listu…). Ukoliko ste imali listu u levoj koloni , nakon brisanja u Design delu, proverite kod da li ste obrisali svaki deo liste. Ukoliko je ostao neki deo obrišite ga. Snimite stranu kao levi_meni.html ili nešto slično.

1. Preuzmite fajlove cssverticalmenu.css , cssverticalmenu.js i tri grafike potrebne za formatiranje, glossyback.gif  glossyback2.gif i arrow.gif. Ove fajlove možete kopirati iz foldera dropdown_meni u dodatnim materijalima.

2. Napravite ili kopirajte ponuđeni HTML kod i stavite ga u vašu web stranu u delu koji želite.

Kod postavite u okviru div-a u levu kolonu unutrašnje tabele. Nakon brisanja prethodnog sadržaja ubacite div tag, kako bi tu ubacili naš meni. Na ovaj način lakše kontrolišemo nove elemente na našoj strani. Znači ceo kod za meni ubacite u okviru novog div taga u levoj koloni.

<td>
<div>
 Naslov levo
 </div>
<div>
 Ovde ubaciti HTML kod za meni.
 </div>
</td>

Meniji se uglavnom prave od listi. Napravite 3 paragrafa, od njih napravite listu. Od svake stavke liste napravite neki link ( # za neodređene linkove).

<ul>
 <li><a href="#">prvi red</a></li>
 <li><a href="#">drugi red</a></li>
 <li><a href="#">treći red</a></li>
</ul>

Ovakvu listu kopirajte i stavite je u okviru stavke u kojoj želite da dobijete padajući meni.

<ul>
 <li><a href="#">prvi red</a></li>
 <li><a href="#">drugi red</a>

 <ul>
 <li><a href="#">prvi red</a></li>
 <li><a href="#">drugi red</a></li>
 <li><a href="#">treći red</a></li>
 </ul>

 </li>
 <li><a href="#">treći red</a></li>
</ul>

Ne zaboravite da sredite kod i koristite komentare.

3. Povežite fajlove – CSS i JS u HEAD delu.

<link rel="stylesheet" type="text/css" href="cssverticalmenu.css" />
<script type="text/javascript" src="cssverticalmenu.js"></script>

Na sajtu na kome smo preuzeli skriptu zahtevaju da stavimo komentar o autoru:

<script type="text/javascript" src="cssverticalmenu.js">
/***********************************************
* CSS Vertical List Menu- by JavaScript Kit (www.javascriptkit.com)
 * Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy-vertical-menu/
 * This notice must stay intact for usage
 * Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/
</script>

4.   Ukoliko ste kopirali kod sa sajta izmenite putanje linkova kako bi odgovarali vašoj strukturi foldera.

npr: href=“cssverticalmenu.css“ promenite u href=“css/cssverticalmenu.css“ jer ste tamo stavili ovaj css fajl.

src=“cssverticalmenu.js“ promenite u src=“js/cssverticalmenu.js“

5.  Ukoliko ste kopirali kod sa sajta potrebno je promeniti i stavke menija, koje su trenutno povezane za sajt sa kojeg smo skinuli meni.

<li><a href=“http://www.javascriptkit.com/“>JavaScript Kit</a></li>

npr. promenimo u <li><a href=“index.html„>Početna strana </a></li>

ili <li><a href=“#„>Neka nova strana </a></li>

Znak # umesto putanje za link pravi tzv. prazan link, odnosno klik na takav link nigde ne vodi, a link tag ipak postoji, pa ga kasnije možete promeniti u potreban link.

Ovde vidite strukturu ovog menija. Linkovi se nalaze u okviru liste, odnosno između li tagova. A sekundarni elementi se nalaze u novoj listi. Nova lista je ubačena u okviru jednog li taga. Ta nova lista će predstavljati sekundarne elemente za odabrani li tag.

6. Poslednji korak je aktivacijaskripte. Uglavnom u prvom tagu HTML dela, odnosno ovde dodamo

id=“verticalmenu“  class=“glossymenu“ prvom <ul> tagu.

<ul id="verticalmenu"  class="glossymenu">
 <li><a href="link.html">Prvi link </a></li>
 <li><a href="link2.htmll" >Drugi link </a></li>
<li><a href="link3.html">Treći link </a>
<ul>
 <li><a href="link3-1.html">Prvi sekundarni link </a></li>
 <li><a href="link3-2.html">Drugi sekundarni link </a></li>
 <li><a href="link3-3.html">Treći sekundarni link </a></li>
 </ul>
</li>
</ul>

Pošto smo prethodno celi meni ubacili u novi div, sada možemo dodatno da ga formatiramo, npr udaljimo ga od desne ivice i od vrha. Napravimo stil u našem CSS-u sa ovim formatom.

/* Levi padajući meni */
.levi_meni {
 margin-left:20px;
 margin-top:20px;
 }

Naravno, sada ovaj meni možemo dodatno da formatiramo kroz CSS, izmenama u cssverticalmenu.css, možemo promeniti zelenu pozadinu, veličinu delova menija, fontove i sl.

Comments (1) Trackback from your site.

Dragan Filipović

Predavač na Kursu Web Dizajna - Web edukator.

Komentara (1)

Ostavi komentar

Morate biti prijavljeni da biste dodali komentar.