Cara Membuat Menu Vertikal Sliding

"

Sebelumnya, saya telah memposting tentang Cara Membuat Vertikal navigations Menu Dengan CSS, sekarang saya akan posting tentang cara membuat menu geser vertikal. Pengaruh menu geser vertikal adalah pada saat kita meletakkan kursor di atas link dalam menu, link akan bergerak ke kanan. Nice kan? Untuk Membuat Menu Vertikal Sliding, Anda hanya perlu langkah mudah. Ikuti langkah mudah di bawah ini.

  1. Masuk ke account blogger Anda
2. Pergi ke Desain -> Edit HTML
3. Copy kode di bawah, dan paste di atas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[

$(document).ready(function()
{
slide("#sliding-navigation", 25, 15, 150, .8);
});

function slide(navigation_id, pad_out, pad_in, time, multiplier)
{
// creates the target paths
var list_elements = navigation_id + " li.sliding-element";
var link_elements = list_elements + " a";

// initiates the timer used for the sliding animation
var timer = 0;

// creates the slide animation for all list elements
$(list_elements).each(function(i)
{
// margin left = - ([width of element] + [total vertical padding of element])
$(this).css("margin-left","-180px");
// updates timer
timer = (timer*multiplier + time);
$(this).animate({ marginLeft: "0" }, timer);
$(this).animate({ marginLeft: "15px" }, timer);
$(this).animate({ marginLeft: "0" }, timer);
});

// creates the hover-slide effect for all link elements
$(link_elements).each(function(i)
{
$(this).hover(
function()
{
$(this).animate({ paddingLeft: pad_out }, 150);
},
function()
{
$(this).animate({ paddingLeft: pad_in }, 150);
});
});
}

//]]>
</script>

4. Kemudian, simpan
5. Untuk link, anda dapat menambahkan ke Page Elements -> Tambahkan Gadget -> Html/Javasript , lalu copy Kode di bawah ini ke dalamnya.

<ul id="sliding-navigation">

<li class="sliding-element"><a href="#">Link 1</a></li>

<li class="sliding-element"><a href="#">Link 2</a></li>

<li class="sliding-element"><a href="#">Link 3</a></li>

<li class="sliding-element"><a href="#">Link 4</a></li>

<li class="sliding-element"><a href="#">Link 5</a></li>

</ul>

6. Save/simpan dan Lihat Hasilnya...

Ok itu saja Sobat,Semoga bermanfaat"

Browse More Articles

Tweet

Written by risky

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.