JQuery Image Menu

Demo : bisa di liat di sini : http://tanpanama-l.blogspot.com/

maap lagi buru buru nich jadi langsung aja :
login blogger - rancangan - Edit HTML

step 1: masuk ke menu edit html :

masukkan script berikut di atas ]]>

body {
    margin:0;
    padding:0;
    color: #333;
    font: normal 0.6em sans-serif,Arial;
    background-color: #EDEDED;
    background-image: url(../img/bg1.jpg);
    background-repeat: repeat-x;
    background-attachment: fixed;
    background-position: center top;
    width: 100%;
    overflow: hidden;
}

.jimgMenu {
    position: relative;
    width: 670px;
    height: 200px;
    overflow: hidden;
    margin: 25px 0px 0px;
}

.jimgMenu ul {
    list-style: none;
    margin: 0px;
    display: block;
    height: 200px;
    width: 1340px;

    }

.jimgMenu ul li {
    float: left;
}

.jimgMenu ul li a {
    text-indent: -1000px;
    background:#FFFFFF none repeat scroll 0%;
    border-right: 2px solid #fff;
    cursor:pointer;
    display:block;
    overflow:hidden;
    width:78px;
    height: 200px;
}

.jimgMenu ul li.landscapes a {
    background: url(images.jpg) repeat scroll 0%;
}

.jimgMenu ul li.people a {
    background: url(images.jpg) repeat scroll 0%;
}

.jimgMenu ul li.nature a {
    background: url(images) repeat scroll 0%;
}
.jimgMenu ul li.abstract a {
    background: url(images.jpg) repeat scroll 0%;
}

.jimgMenu ul li.urban a {
    background: url(images.jpg) repeat scroll 0%;
    min-width:310px;

}

.clear {
    clear: both;
}

</style>

<script type="text/javascript" src="http://longfield21.googlecode.com/files/LQuery.js"></script><script type="text/javascript" src="http://longfield21.googlecode.com/files/jquery-easing-1.3.pack.js"></script><script type="text/javascript" src="http://longfield21.googlecode.com/files/jquery-easing-compatibility.1.2.pack.js"></script>

<script type="text/javascript">
$(document).ready(function () {
// find the elements to be eased and hook the hover event
$('div.jimgMenu ul li a').hover(function() {
    // if the element is currently being animated
    if ($(this).is(':animated')) {
      $(this).addClass("active").stop().animate({width: "310px"}, {duration: 450, easing: "easeOutQuad", complete: "callback"});
    } else {
      // ease in quickly
      $(this).addClass("active").stop().animate({width: "310px"}, {duration: 400, easing: "easeOutQuad", complete: "callback"});
    }
}, function () {
    // on hovering out, ease the element out
    if ($(this).is(':animated')) {
      $(this).removeClass("active").stop().animate({width: "78px"}, {duration: 400, easing: "easeInOutQuad", complete: "callback"})
    } else {
      // ease out slowly
      $(this).removeClass("active").stop(':animated').animate({width: "78px"}, {duration: 450, easing: "easeInOutQuad", complete: "callback"});
    }
});
});
</script>

step 2 : masukkan di bawah <body>

<h1>Longfield Image Menu Jquery</h1>

<div class="jimgMenu">
<ul>
    <li class="landscapes"><a href="#">category1</a></li>
    <li class="people"><a href="#">category2</a></li>

    <li class="nature"><a href="#">category3</a></li>
    <li class="abstract"><a href="#">category4</a></li>
    <li class="urban"><a href="#">category5</a></li>
</ul>
</div>

<br style="clear:both"/><br />
<div class="description">

step 3:

untuk yang berwarna kuning anda bisa ganti dengan dengan gambar sesauai dengan category anda yang berwarna hijau
save aja dan liat hasilnyaa

Tutorial Blogger

JQuery Image Menu

1 komentar:

Post a Comment

Followers

Labels