Pages

0

Sliding Dan Rolling Menu Dangan 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 ]]></b:skin> 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 </body> Dan Taruh Kode Berikut Tepat Diatasnya.

    <!-- Sliding And Rolling -->

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js' type='text/javascript'/>
    <script src='http://filiex.googlecode.com/files/jquery-css-transform.js' type='text/javascript'/>
    <script src='http://filiex.googlecode.com/files/jquery-animate-css-rotate-scale.js' type='text/javascript'/>
    <script>
    $(&#39;.item&#39;).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;
    $(&#39;.link&#39;,$elem).stop().animate({rotate: &#39;+=-40deg&#39;}, 0);
    },10);
    $elem.stop().animate({width:&#39;268px&#39;}, 1000)
    .find(&#39;.item_content&#39;).fadeIn(400,function(){
    $(this).find(&#39;p&#39;).stop(true,true).fadeIn(600);
    });
    }
    function collapse($elem){
    var angle = 1440;
    var t = setInterval(function () {
    if(angle == 0){
    clearInterval(t);
    return;
    }
    angle -= 40;
    $(&#39;.link&#39;,$elem).stop().animate({rotate: &#39;+=40deg&#39;}, 0);
    },10);
    $elem.stop().animate({width:&#39;52px&#39;}, 1000)
    .find(&#39;.item_content&#39;).stop(true,true).fadeOut()
    .find(&#39;p&#39;).stop(true,true).fadeOut();
    }

    </script>

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

    <div class="menu">
    <div class="item">
    <a class="link icon_mail"></a>
    <div class="item_content">
    <h2>Contact us</h2>
    <p>
    <a href="#">eMail</a>
    <a href="#">Twitter</a>
    <a href="#">Facebook</a>
    </p>
    </div>
    </div>
    <div class="item">
    <a class="link icon_help"></a>
    <div class="item_content">
    <h2>Help</h2>
    <p>
    <a href="#">FAQ</a>
    <a href="#">Live Support</a>
    <a href="#">Tickets</a>
    </p>
    </div>
    </div>
    <div class="item">
    <a class="link icon_find"></a>
    <div class="item_content">
    <h2>Search</h2>
    <p>
    <input type="text"></input>
    <a href="">Go</a>
    </p>
    </div>
    </div>
    <div class="item">
    <a class="link icon_photos"></a>
    <div class="item_content">
    <h2>Image Gallery</h2>
    <p>
    <a href="#">Categories</a>
    <a href="#">Archives</a>
    <a href="#">Featured</a>
    </p>
    </div>
    </div>
    <div class="item">
    <a class="link icon_home"></a>
    <div class="item_content">
    <h2>Start from here</h2>
    <p>
    <a href="#">Services</a>
    <a href="#">Portfolio</a>
    <a href="#">Pricing</a>
    </p>
    </div>
    </div>
    </div>

    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 ]]></b:skin> Tadi.




Selamat Mencoba Dan Semoga Berhasil.

Alfiona

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

No comments:

Post a Comment