Breaking News
Loading...
Rabu, 02 Mei 2012

Program [JQUERY]

Pengertian jQuery
JQuery merupakan suatu framework (library) Javascript yang menekankan bagaimana interaksi antara Javascript dan HTML. JQuery pertama kali dirilis pada tahun 2006 oleh John Resig. Pada perkembangannya JQuery tidak sekedar sebagai framework Javascript, namun memiliki kehandalan dan kelebihan yang cukup banyak. Hal tersebut menyebabkan banyak developer web menggunakannya. JQuery memiliki slogan “Writeless, do more” yang kurang lebih maksudnya adalah kesederhanaan dalam penulisan code, tapi dengan hasil yang lebih banyak. (sumber: Wikipedia) 



- Membuat dropdown sederhana dengan jQuery
Demo : http://demo.andisalvo.com/jquery/dropdown-simple.html
Berikut ini ane akan berikan source code untuk membuat dropdown 1 level sederhana dengan jQuery & html. Agan & sista bisa menyalin source code di bawah:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("ul#menu > li").hover( 
      function(){
        $(this).addClass('hover');
        $(this).children('ul').stop(true,true).slideDown("slow");
      },
      function(){
        $(this).removeClass('hover');
        $(this).children('ul').slideUp("slow");
      }
    );
});
</script>
<style type="text/css">
ul#menu, ul#menu ul { list-style:none; margin:0; padding:0; }
ul#menu li { float:left; position:relative; display:inline-block; }
ul#menu li a { display:block; padding:3px 8px; color:#FFF; background-color:#333; text-decoration:none; margin:0 2px; }
ul#menu li a:hover, ul#menu li.hover a { background-color:#999; }

/* Style untuk dropdown */
ul#menu ul { display:none; position:absolute; }
ul#menu ul li { float:none; }
ul#menu ul li a, ul#menu li.hover ul li a { display:block; width:100px; background-color:#999; }
ul#menu ul li a:hover, ul#menu li.hover ul li a:hover { background-color:#333;}
</style>
<ul id="menu">
<li><a href="#home">Home</a></li>
<li><a href="#tentang">Tentang Kami</a></li>
<li><a href="#produk">Produk</a>
<ul>
<li><a href="#produk1">Produk Pertama</a></li>
<li><a href="#produk2">Produk Kedua</a></li>
<li><a href="#produk3">Produk Ketiga</a></li>
</ul>
</li>
<li><a href="#hubungi">Hubungi Kami</a></li>
</ul>  

0 komentar:

Posting Komentar

Quick Message
Press Esc to close
Copyright © 2013 Xsnote All Right Reserved