Osmi čas – Padajući meni

Dragan Filipović Korak po korak, Kurs Comments (0)

Padajući meni – Dropdown menu, ćemo praviti na strani O meni.

 

1. Pronađemo skriptu i preuzmemo fajlove – ovde. Skriptu sam preuzeo sa sajta http://www.javascriptkit.com/script/script2/verticalmenu.shtml

 2. Svaki fajl stavimo u svoj folder 

3.Povežemo fajlove (css i js), attach stylesheet i insert-html-script object -script (ili insert ikona u novijoj verziji DW)

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

 4. Napravimo HTML. Padajući meni predstavlja listu u listi. Navigaciju uvek pravimo pomoću listi, a padajući meni će biti nova lista unutar jedne stavke.

U levoj koloni strane napravimo nekoliko redova teksta, pretvorimo ih u listu, i od nje napravimo linkove (#).

      <ul>
        <li><a href="#">Prvi</a></li>
        <li><a href="#">Drugi</a></li>
        <li><a href="#">Treći</a></li>
        <li><a href="#">Četvrti </a></li>
      </ul>

 Kako ne bi pravili novu listu kopiraćemo postojeću (u kodu) i ubacićemo je unutar jedne stavke., pre kraja izabrane stavke (pred < /li >

      <ul>
        <li><a href="#">Prvi</a></li>
        <li><a href="#">Drugi</a></li>
        <li><a href="#">Treći</a>
        
      <ul>
        <li><a href="#">Prvi</a></li>
        <li><a href="#">Drugi</a></li>
        <li><a href="#">Treći</a></li>
        <li><a href="#">Četvrti </a></li>
      </ul>
        
        </li>
        <li><a href="#">Četvrti </a></li>
      </ul>

 

 5. Aktivacija skripte. Ukoliko nemamo uputstvo kako aktivirati skriptu, pogledamo kod strane na kojoj skripta radi (već je aktivirana). Deo za aktivaciju se uglavnom nalazi na samom početku HTML-a za koji koristimo skriptu.

U ovom slučaju to je

<ul id="verticalmenu" class="glossymenu">

6. Promenimo izgled. Navigacija je previše široka za našu levu kolonu, pa je potrebno promeniti širinu. Promenu izgleda radimo u CSS fajlu ( cssverticalmenu.css

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 150px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}

.glossymenu li ul{ /*SUB MENU STYLE*/
position: absolute;
width: 100px; /*WIDTH OF SUB MENU ITEMS*/
left: 0;
top: 0;
display: none;
}

.glossymenu li ul a{
width: 90px; /*WIDTH OF SUB MENU ITEMS - 10px padding-left for A elements */
}

 

Pogledajte Vaš sajt.

Comments (0) Trackback from your site.

Dragan Filipović

Predavač na Kursu Web Dizajna - Web edukator.

Ostavi komentar

Morate biti prijavljeni da biste dodali komentar.