Home » , , » Sensitive Top Menu With JQuery

Sensitive Top Menu With JQuery

Pada Postingan Kali ini Saya Kembali Mengajak Sobat Semua Belajar Tutorial Blogger Yang Bisa Membuat Blog Sobat Semua Menjadi Keren Dan Semenarik Mungkin. Jujur Saja Saya Tidak Tau Apa Nama Tutorial ini Karna Saya Tidak Sengaja Berjumpa Dengan Suatu Website Dan Melihat Ada Menu Yang Sangat Menarik Dihalamannya. Ya Dengan Memaksakan Diri Sambil Memutar Kepala Saya Coba Menelusuri Source Pada Template nya Dan Beberapa Jam Kemudian Akhirnya Sepenuhnya Saya Dapat Menirukan Menu Tersebut Dan Saya Namakan Sensitive Top Menu With JQuery.

Nah Buat Sobat Yang Penasaran Dengan Sensitive Top Menu With JQuery Bisa Melihat Demo Yang Sudah Saya Sediakan.


Bila Sobat Tertarik Dengan Sensitive Top Menu With JQuery Tersebut, Silahkan Simak Tutorial Dibawah ini Dengan Cermat.

  • Silahkan Login Ke Akun Blogger Sobat.
  • Masuklah Pada Rancangan Lalu Pilih Edit HTML Dan Awas Jangan Lupa Centeng Expand Template Widget.
  • Setelah itu Carilah Kode ]]></b:skin> Pada Template Sobat Dan Salinlah Semua Kode Dibawah ini Tepat Diatas ]]></b:skin> Tadi.

    /*sensitive top menu filiex*/
    #ssmenu{
    top: .4em;
    left:2em;
    width:230px;
    position: fixed;
    z-index: 200;
    }
    #hitop {
    margin:0 ;
    padding:0;
    height:55px;
    background:url(http://1.bp.blogspot.com/-Iv03qy70Onc/TwoCX8A5gHI/AAAAAAAADKs/M0B6ZnyuinI/s400/filiex-abstract.png) no-repeat 0 0;
    border-bottom:1px solid #000;
    }
    #cnmenu{
    margin:0 ;
    padding:0;
    width:230px;
    background:url(https://lh4.googleusercontent.com/-QDHA9dSHGyg/TuyZtBjjnFI/AAAAAAAAF30/sEpK9nCYyYk/s800/malubg.png) repeat-y;
    }
    .hidown{
    margin:0;
    padding:0;
    height:78px;
    background:url(http://1.bp.blogspot.com/-Iv03qy70Onc/TwoCX8A5gHI/AAAAAAAADKs/M0B6ZnyuinI/s400/filiex-abstract.png) no-repeat 0 -80px;
    display:block;
    border-top:1px solid #302F2F;
    }
    span.bootter,span.upter{
    width:27px;
    height:26px;
    display:block;
    margin-left:103px;
    margin-top:35px;
    }
    span.bootter{
    background:url(http://1.bp.blogspot.com/-Iv03qy70Onc/TwoCX8A5gHI/AAAAAAAADKs/M0B6ZnyuinI/s400/filiex-abstract.png) no-repeat 0 -158px;
    }
    span.upter{
    background:url(http://1.bp.blogspot.com/-Iv03qy70Onc/TwoCX8A5gHI/AAAAAAAADKs/M0B6ZnyuinI/s400/filiex-abstract.png) no-repeat -27px -158px;
    }

    #cnmenu ul, #cnmenu li{
    list-style-type:none;
    }
    #cnmenu ul li {
    margin: 0;
    padding : 5px;
    border-top:1px solid #302F2F;
    border-bottom: 1px solid #000;
    }
    #cnmenu ul li a {
    padding-left:5px;
    text-decoration:none;
    display:block;
    }
    #cnmenu ul li:hover {
    background-color:#212121;
    }
    /* sensitive top menu filiex*/

  • Selanjutnya Carilah Kode </head> Pada Template Sobat, Lalu Salinlah Kode Berikut Dan Taruh Tepat Diatasnya Kode </head> Tadi.

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

    $(document).ready(function () {

    $('#cnmenu').hide();
    $(window).load(function () {
    $('#cnmenu').slideDown(1500, function () {
    $(this).slideUp(200);
    });
    });
    $('#ssmenu').mouseenter(function () {
    $('#cnmenu').slideDown(1000, function () {
    $('.hidown span').removeClass('bootter').addClass('upter');
    });
    });
    $('#ssmenu').mouseleave(function () {
    $('#cnmenu').slideUp(200, function () {
    $('.hidown span').removeClass('upter').addClass('bootter');
    });
    });

    });
    //]]>

    </script>

  • Nah Bila Langkah Diatas Sudah Selesai, Sekarang Sobat Bisa Save Atau Simpan Tempalte Sobat.
  • Setelah itu Silahkan Sobat Masuk Pada Elemen Laman Kemudian Klik Tambahkan Gatget Lalu Pilih Yang HTML/Javascript.


  • Bila Jendela HTML/Javascript Sudah Terbuka, Silahkan Sobat Salin Semua Kode Dibawah ini Lalu Simpan.

    <div id="ssmenu">
    <div id="hitop"></div>
    <div id="cnmenu">
    <ul>
    <li><a href="#">Filiex Boy</a></li>
    <li><a href="#">Cinema Area</a></li>
    <li><a href="#">Somia Story</a></li>

    <li><a href="#">Full Software</a></li>
    <li><a href="#">Full Mega Game</a></li>
    <li><a href="#">Blogger Tutorial</a></li>
    <li><a href="#">Komputer tutorial</a></li>
    <li><a href="#">Blogger template</a></li>
    <li><a href="#">Google Plus</a></li>
    <li><a href="#">Facebook</a></li>
    <li><a href="#">Twitter</a></li>
    </ul>
    </div>
    <div class="hidown"><span class="bootter">&nbsp;</span></div>
    </div>

  • Terakhir Lihat Hasilnya.
  • Selesai.

Cukup Sekia untuk Tutorial Blogger Kali ini Dan Silahkan Tinggalkan Komenter Bila Ada Pertanyaan Dan Keluhan. Terima Kasih
filiex Artikel Oleh Filiex Boy dari filiex.blogspot.com, yang telah
Diterbitkan di 3:22 PM
Label: , ,
Jangan lupa berlangganan via RSS feed untuk artikel terbaru
Share this article :
Unduh Adobe Flash player

+ komentar + 5 komentar

February 16, 2012 at 9:22 PM

bang filiex saya mau tanya, cara buat navigation menu game dipojok kanan atas di blog anda gimana yaaa?
mohon bantuannya.
terima kasih.

Terimakasih GratisSoftware4u Blog atas Komentarnya di Sensitive Top Menu With JQuery
February 18, 2012 at 12:31 AM

@GratisSoftware4u BlogDalam waktu dekat ini saya masih belum bisa postingkan tutorial tersebut karna saya masih sibuk untuk mengganti template blog ini dan setelah itu pasti saya postingkan kok !!!

February 18, 2012 at 11:38 PM

okeee bang filiex...
ditunggu postingannya.
makasih.

Terimakasih GratisSoftware4u Blog atas Komentarnya di Sensitive Top Menu With JQuery
Anonymous
March 28, 2012 at 6:11 PM

blognya cantik nya bang....boleh belajar sma bang fellix bikin blog kek punya bang fellix nggak

Terimakasih Anonymous atas Komentarnya di Sensitive Top Menu With JQuery
November 3, 2013 at 5:44 PM

Bang filiex di blog saya gak ada ]]> helpp bangg T.T

Terimakasih ..IF@NNUR ASHARI.. atas Komentarnya di Sensitive Top Menu With JQuery

Post a Comment