html css trikovi padajuci div tag ovi


Besplatni online kurs web dizajna

Nastavna jedinica: Trick 4 - Padajući Div tag-ovi


Nazad


"Padajući" Div tag-ovi


"Padajući" div tagovi koji uz pomoć JS i Jquery biblioteke klikom miša na odredjeni div tag animirano prikazuju sadržaj div taga. Js u Head sekciji uz pomoć linka koji poziva Jquery biblioteku iz foldera JS, omogućava da se veoma pregledno da lista pitanja gde se klikom na svako pitanje pojavljuje odgovor - što je i najčešća primena ove skripte. Takodje, unutar div tag-ova nalaze se sličice slova Q (Question - pitanje) i A (Answer - odgovor) koje se mogu nalaziti u folderu images. Te ikonice se mogu Photoshopu posebno izdizajnirati.

Head


<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  $('.pitanja dd').hide();           // Sve što je dd unutar klase pitanja se ne pojavljuje pri učitavanju stranice (HIDE)
  // Dodaje se klasa HOVER kad je HOVER (PRELAZ MIŠEM) preko klase dt hover
  $('.pitanja dt').hover(function(){$(this).addClass('hover')},function(){$(this).removeClass('hover')}).click(function(){ 
  $(this).next().slideToggle('normal');     // Kada se na klikne na ide pomerajući gore-dole slide 
  }); 
});
</script>
<style type="text/css">
.pitanja-i-odgovori { margin:30px; border:1px solid #92cdec; background:#d7e7ff; padding:30px 30px 30px 30px }
.pitanja dt {
 font-weight:bold;
 background:url(images/q.gif) 0 2px no-repeat;    /*  pozicija ikonice pitanja Q (Question) */
 padding:0px 0 0px 30px;
 position:relative;
 color:#FFF;
}
.pitanja dt:hover { cursor:pointer }
.pitanja dd {
 background:url(images/a.gif) 0 2px no-repeat;   /*  pozicija ikonice odgovora A (Answer) */
 padding:0 0 5px 30px;
 position:relative;
 color:#FFF;
}
.pitanja .hover { color:#990000; text-decoration:none}
</style>

Body


<div class="pitanja-i-odgovori">
  <dl class="pitanja">
 <dt>
  <h3 style="color:#FFF";>Šta je tag &lt;dl&gt; koji se nalazi u HTML kodu ovog fajla ?</h3>
  </dt>
  <dd>Tag <strong>&lt;dl&gt;</strong> je tag (oznaka) dolazi od reči &quot;<strong>description list</strong>&quot; gde se daje naznaka HTML kodu da se u nastavku tog taga unosi lista opisa. Naravno, svaki TAG &quot;<strong>dl</strong>&quot; ima otvarajući i zatvarajući Div tag odnosno <strong>&lt;dl&gt; ... &lt;/dl&gt;.</strong> Ovaj kompletan <strong>PANEL</strong> je u stvari <strong>DT (Descritption List).</strong></dd>
  <dt>
  <h3 style="color:#FFF";>Šta je tag &lt;dt&gt; koji se nalazi u HTML kodu ovog fajla ?</h3>
  </dt>
  <dd>Tag <strong>&lt;dt&gt;</strong> je TAG koji dolazi od reči &quot;<strong>terms</strong>&quot; odnosno <strong>Description List Terms</strong> i nalazi se unutar taga <strong>&lt;dl&gt;</strong>. Pitanja  imaju tag <strong>&lt;dt&gt; Šta je ... &lt;/dt&gt;</strong> jer predstavlja listu termina - u ovom slučaju to su <strong>PITANJA</strong>.</dd>
  <dt>
  <h3 style="color:#FFF";>Šta je tag &lt;dd&gt; koji se nalazi u HTML kodu ovog fajla ?</h3>
  </dt>
 <dd>Tag <strong>&lt;dd&gt;</strong> je tag koji definiše <strong>opis svakog termina</strong> <strong>(description)</strong> i nalazi se unutar taga <strong>&lt;dt&gt;. </strong>Ovaj <strong>ODGOVOR</strong> koji se pojavljuje klikom na <strong>PITANJE</strong> je ustvari opis  termina (<strong>terms</strong>)</dd>
  </dl>
</div>

Prikaz u Browser-u


Šta je tag <dl> koji se nalazi u HTML kodu ovog fajla ?

Tag <dl> je tag (oznaka) dolazi od reči "description list" gde se daje naznaka HTML kodu da se u nastavku tog taga unosi lista opisa. Naravno, svaki TAG "dl" ima otvarajući i zatvarajući Div tag odnosno <dl> ... </dl>. Ovaj kompletan PANEL je u stvari DT (Descritption List).

Šta je tag <dt> koji se nalazi u HTML kodu ovog fajla ?

Tag <dt> je TAG koji dolazi od reči "terms" odnosno Description List Terms i nalazi se unutar taga <dl>. Pitanja imaju tag <dt> Šta je ... </dt> jer predstavlja listu termina - u ovom slučaju to su PITANJA.

Šta je tag <dd> koji se nalazi u HTML kodu ovog fajla ?

Tag <dd> je tag koji definiše opis svakog termina (description) i nalazi se unutar taga <dt>. Ovaj ODGOVOR koji se pojavljuje klikom na PITANJE je ustvari opis termina (terms)

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