Buat Tampilan Menu Sliding & Rolling Dengan JQuery

Cara Buat Tampilan Menu Sliding & Rolling Dengan JQuery

 

Pada Perjumpaan Kali ini Saya Akan Berbagi Tutorial Blog Lagi Yakni Cara Membuat Sliding Dan Rolling Menu Dangan JQuery Dan Seperti Biasa Saya Tidak Bisa Menjelaskan Dengan Rinci Apa itu Sliding Dan Rolling Menu Dangan JQuery Tapi Saya Sudah Mempersiapkan Contoh Buat Sobat Blogger Semua.

Nah Buat Sobat Blogger Yang Berminat Menerapkan Pada Blog Sobat Semua, Sobat Bisa Ikuti Caranya Dibawah ini:

  • Login Ke Akun Blogger Sobat.
  • Pilih Rancangan => Edit HTML Dan Jangan Lupa Centang Expand Template Widget
  • Lalu Carilah Kode ]]> Dan Taruhlah Kode Berikut Diatasnya.
    /* Sliding Ang Rolling */

    .menu{
    width:800px;
    height:52px;
    position:relative;
    top:200px;
    left:100px;
    font-family: “Trebuchet MS”, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    text-transform: uppercase;
    }
    .item{
    position:relative;
    background-color:#f0f0f0;
    float:right;
    width:52px;
    margin:0px 5px;
    height:52px;
    border:2px solid #ddd;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border-radius:30px;
    -moz-box-shadow:1px 1px 3px #555;
    -webkit-box-shadow:1px 1px 3px #555;
    box-shadow:1px 1px 3px #555;
    cursor:pointer;
    overflow:hidden;
    }
    .link{
    left:2px;
    top:2px;
    position:absolute;
    width:48px;
    height:48px;
    }
    .icon_home{
    background:transparent url(http://i1230.photobucket.com/albums/ee498/filiex/filiex/home.png) no-repeat top left;
    }
    .icon_mail{
    background:transparent url(http://i1230.photobucket.com/albums/ee498/filiex/filiex/mail.png) no-repeat top left;
    }
    .icon_help{
    background:transparent url(http://i1230.photobucket.com/albums/ee498/filiex/filiex/help.png) no-repeat top left;
    }
    .icon_find{
    background:transparent url(http://i1230.photobucket.com/albums/ee498/filiex/filiex/find.png) no-repeat top left;
    }
    .icon_photos{
    background:transparent url(http://i1230.photobucket.com/albums/ee498/filiex/filiex/photos.png) no-repeat top left;
    }
    .item_content{
    position:absolute;
    height:52px;
    width:220px;
    overflow:hidden;
    left:56px;
    top:7px;
    background:transparent;
    display:none;
    }
    .item_content h2{
    color:#aaa;
    text-shadow: 1px 1px 1px #fff;
    background-color:transparent;
    font-size:14px;
    }
    .item_content a{
    background-color:transparent;
    float:left;
    margin-right:7px;
    margin-top:3px;
    color:#bbb;
    text-shadow: 1px 1px 1px #fff;
    text-decoration:none;
    font-size:12px;
    }
    .item_content a:hover{
    color:#0b965b;
    }
    .item_content p {
    background-color:transparent;
    display:none;
    }
    .item_content p input{
    border:1px solid #ccc;
    padding:1px;
    width:155px;
    float:left;
    margin-right:5px;
    }

  • Setelah Itu Carilah Kode Dan Taruh Kode Berikut Tepat Diatasnya.

    $('.item').hover(
    function(){
    var $this = $(this);
    expand($this);
    },
    function(){
    var $this = $(this);
    collapse($this);
    }
    );
    function expand($elem){
    var angle = 0;
    var t = setInterval(function () {
    if(angle == 1440){
    clearInterval(t);
    return;
    }
    angle += 40;
    $('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0);
    },10);
    $elem.stop().animate({width:'268px'}, 1000)
    .find('.item_content').fadeIn(400,function(){
    $(this).find('p').stop(true,true).fadeIn(600);
    });
    }
    function collapse($elem){
    var angle = 1440;
    var t = setInterval(function () {
    if(angle == 0){
    clearInterval(t);
    return;
    }
    angle -= 40;
    $('.link',$elem).stop().animate({rotate: '+=40deg'}, 0);
    },10);
    $elem.stop().animate({width:'52px'}, 1000)
    .find('.item_content').stop(true,true).fadeOut()
    .find('p').stop(true,true).fadeOut();
    }

  • Setelah itu Sobat Bisa Menyimpan Template nya.
  • Terakhir Seperti Biasa Sobat Pikir Pikir Dulu Dech Lokasi Penempatan Yang Cocok Untuk Sliding Dan Rolling Menu nya Dan Bila Sudah Ada Ide Sobat Sekarang Masuk Ke Element Halaman Dan Tambah Widget Lalu Pilih Yang HTML/JavaScript.
  • Taruh Kode Berikut Dan Simpan.

    Catatan:

  • Ubah tanda “#” Dengan URL Link Sobat.
  • Lihat Hasilnya Dan Bila Penempatan nya Kurang Pas Silahkan Sobat Edit Sendiri Pada Kode CSS yang Sobat Taruh Diatas Kode ]]> Tadi.
     

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s