Creating a Simple jQuery Popup

Source jQuery

 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('a[name=popup]').click(function(e) {
        e.preventDefault();
        var id = $(this).attr('href');
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
        $('#masking').css({'width':maskWidth,'height':maskHeight});
        $('#masking').fadeIn(1000);  
        $('#masking').fadeTo("slow",0.8);
        var winH = $(window).height();
        var winW = $(window).width();
        $(id).css('top',  winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);
        $(id).fadeIn(2000);
    });
   
    $('.window .close').click(function (e) {
        e.preventDefault();
        $('#masking, .window').hide();
    });   
   
    $('#masking').click(function () {
        $(this).hide();
        $('.window').hide();
    });   

 $(window).resize(function () {
   var box = $('#kotak .window');
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
        $('#maskinging').css({'width':maskWidth,'height':maskHeight});
        var winH = $(window).height();
        var winW = $(window).width();
        box.css('top',  winH/2 - box.height()/2);
        box.css('left', winW/2 - box.width()/2);
 
 });
});
</script>

Source CSS

<style>
body { margin:0; }
#masking { position:absolute;  z-index:9000;  background-color:#000;  display:none;  margin:0; top:0; }
#kotak .window { position:fixed;  width:440px;  height:200px;  display:none;  z-index:9999;  padding:20px; background-color:#FFF; }
/* Popup style */
#kotak #jendela { width:375px; height:203px; background-color:#FFF; }
.link { display:block; margin:30px 0 0; }
</style>

Add Description of Slide-up to Cover Image

Source jQuery

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".produk").hover(function(){
  $(this).find(".teks").animate({'opacity':1, 'top':'0'});
 },function(){
  $(this).find(".teks").animate({'opacity':0, 'top':'400px'});
 });
});
</script>

Source CSS

<style type="text/css">
.produk {
 width:300px;
 height:400px;
 overflow:hidden;
 position:relative;
}
.gambar {
 width:300px;
 height:400px;
}
.teks {
 position:absolute;
 display:block;
 color:#FFF;
 text-decoration:none;
 width:300px;
 height:400px;
 padding-top:150px;
 top:400px;
 left:0;
 z-index:3;
 text-align:center;
 /* Tranparent BG */
 background: rgb(0, 0, 0);
 background: rgba(0, 0, 0, 0.6);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /* For IE */
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
 opacity:0;
 filter:alpha(opacity=0); /* For IE */
}
</style>

Creating a simple dropdown with jQuery

Source jQery

<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>

Source CSS

<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>