Followers

09 Februari 2014

Februari 09, 2014 - No comments

jQuery Image Menu

Demo di sini

Pada demo blog,gerakkan mouse ke gambar seperti disnapshot iini

Cara Pemasangan

Langkah 1: 'Log in' ke dalam 'Blogger dashboard' anda --> pergi ke 'Template' --> 'Edit HTML', dan gunakan Ctrl+F untuk mencari kod  ]]></b:skin>

Langkah 2:Di atas kod ]]></b:skin> yang telah ditemui tersebut,'copy' dan 'paste' kod dibawah ini

.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;javascript:;
width:78px;
height: 200px;
}

.jimgMenu ul li.landscapes a {
background: url(http://1.bp.blogspot.com/-h4FlZYo_MB8/UrxZJ18DdmI/AAAAAAAAEjk/UVUY8hmJ-hE/s1600/Gaara.png) no-repeat scroll 0%;
}

.jimgMenu ul li.people a {
background: url(http://1.bp.blogspot.com/-azFU_tMzJKk/UrxZPLz8bmI/AAAAAAAAEj0/T7gBbohnoCk/s1600/Sasuke.png) no-repeat scroll 0%;
}

.jimgMenu ul li.nature a {
background: url(http://4.bp.blogspot.com/-F4TSD9Gb3s8/UrxYsm_AbkI/AAAAAAAAEjc/p6LvXkezS-w/s1600/naruto.png) no-repeat scroll 0%;
}
.jimgMenu ul li.abstract a {
background: url(http://3.bp.blogspot.com/-Wv8wU4iUKkk/UrxZM3wReFI/AAAAAAAAEjs/FfJ76L3tTSo/s1600/Kakashi.png) no-repeat scroll 0%;
}
.jimgMenu ul li.urban a {
background: url(http://1.bp.blogspot.com/-WoRrRNthF9k/UrxZSKCrwzI/AAAAAAAAEj8/lcZSjwZI4k0/s1600/Shikamaru.png) no-repeat scroll 0%;
min-width:310px;

}
.clear {
clear: both;}

Langkah 3:Sekali lagi gunakan Ctrl+F untuk memudahkan pencarian kod.Kod yang perlu dicari seterusnya ialah kod:</head>

Langkah 4:Di atas/sebelum kod </head> yang telah ditemui tersebut,'copy' dan 'paste' kod dibawah ini

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

<script type='text/javascript'>
$(document).ready(function () {

// find the elements to be eased and hook the hover event
$(&#39;div.jimgMenu ul li a&#39;).hover(function() {

// if the element is currently being animated (to a easeOut)...
if ($(this).is(&#39;:animated&#39;)) {
$(this).stop().animate({width: &quot;310px&quot;}, {duration: 450, easing:&quot;easeOutQuad&quot;});
} else {
// ease in quickly
$(this).stop().animate({width: &quot;310px&quot;}, {duration: 400, easing:&quot;easeOutQuad&quot;});
}
}, function () {
// on hovering out, ease the element out
if ($(this).is(&#39;:animated&#39;)) {
$(this).stop().animate({width: &quot;78px&quot;}, {duration: 400, easing:&quot;easeInOutQuad&quot;})
} else {
// ease out slowly
$(this).stop(&#39;animated:&#39;).animate({width: &quot;78px&quot;}, {duration: 450, easing:&quot;easeInOutQuad&quot;});
}
});
});
</script>

Langkah 5:Klik 'Save Template'

Langkah 6:Sekarang pergi ke 'Layout' dan klik  'Add HTML/JavaScript' dengan meletakkan kod dibawah didalamnya:

<div class="jimgMenu">
<ul>
<li class="landscapes"><a href="#nogo">Landscapes</a></li>
<li class="people"><a href="#nogo">People</a></li>
<li class="nature"><a href="#nogo">Nature</a></li>
<li class="abstract"><a href="#nogo">Abstract</a>
</li>
<li class="urban"><a href="#nogo">Urban</a></li>
</ul>
</div>

0 ulasan:

Catat Ulasan