NEWS
Loading...
  • Posted by : Johanes Djogan 13 Des 2010

    Membuat menu melayang dengan sentuhan Jquery dan CSS3
    Apa kabar sobat?udah pernah lihat menu melayang belum?pasti sudah kan..kali ini saya mau share trik menu melayang,tetapi menu ini dilengkapi jquery dan css3.effect animasi hover'a dengan css3 dan
    effect melayang dengan jquery yang selalu mengikuti layar kita.contoh'a bisa sobat lihat disini mau tau cara'a?lets go...


    Pertama,buka blogger sobat, Rancangan => Edit HTML
    lalu masukan css dibawah ini ke template sobat

    #floatMenu {
    position:absolute;
    top:150px;
    left:50%;
    margin-left:235px;
    width:80px;}
    #floatMenu ul {list-style-type: none;}
    #floatMenu ul li a {
    display:block;
    background:-moz-linear-gradient(-90deg, #222, #2b2b2b) repeat scroll 0 0 transparent;
    background:-webkit-gradient(linear, left top, left bottom, from(#222), to(#2b2b2b));
    border:1px solid #999;
    border-left:6px solid #999;
    text-decoration:none;
    color:#ccc;
    padding:5px 5px 5px 25px;
    width:80px;
    -webkit-transition: all 0.6s ease-out;
    box-shadow: #333 0px 0px 10px;
    -moz-box-shadow: #333 0px 0px 10px;
    -webkit-box-shadow: #333 0px 0px 10px;
    }
    #floatMenu ul li a:hover {
    color:#fff;
    background-color:#333333;
    border-right:6px solid #999;
    width:150px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 0px;
    -webkit-border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 0px;
    }
    #floatMenu ul.menu1 li a:hover {border-color:#09f;}

    Note:
    -bila sobat ingin mengganti warna background menu'a,sobat tinggal ganti kode warna'a.
    -sobat juga bisa ganti warna hover menu'a dengan mengganti kode warna'a.

    Selanjut'a.sobat masukan script di bawah ini di bawah kode ]]></b:skin>

    <script language="javascript" src="https://sites.google.com/site/djogzs/js/jquery_mini.js"></script>
    <script language="javascript" src="https://sites.google.com/site/djogzs/js/jquery.dimensions.js"></script>
    <script language="javascript">
    var name = "#floatMenu";
    var menuYloc = null;

    $(document).ready(function(){
    menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
    $(window).scroll(function () {
    offset = menuYloc+$(document).scrollTop()+"px";
    $(name).animate({top:offset},{duration:500,queue:false});
    });
    });
    </script>


    terakhir..sobat masukan kode html di bawah inidi elemen halaman sobat,atau bisa di template sobat di atas kode </body>

    <div id="floatMenu">
    <ul class="menu1">
    <li><a href="#" onclick="return false;"> Home </a></li>
    <li><a href="#" onclick="return false;"> About </a></li>
    <li><a href="#" onclick="return false;"> Contact </a></li>
    <li><a href="#" onclick="return false;"> Blog </a></li>
    <li><a href='#' onclick='MGJS.goTop();return false;' onclick="return false;"> Back to top </a></li>
    </ul>
    </div>

    Note:
    -Ganti tanda # dengan Url sobat.
    -Ganti juga Nama link sobat.

    selesai deh..
    selamat mencoba sob,dan jangan lupa tinggalkan komentarnya n_n


    { 14 comments... read them below or Comment }

    1. Hmmm...spertinya menarik nih bro...persis mirip sama punyanya kang Salman kan?? btw apa ini gak bikin berat blog ya gan?? soalnya setahuku CSS3 atau JQuery itu meningkatkan berat blog dan ujung2nya ntar tambah berat...tapi bagus juga bro buat dijadikan referensi...thanks ya, Salam blogger manajubelz

      BalasHapus
    2. yang ini beda bro...
      memang sih kalau terlalu banyak menggunakan jquery bisa berat,tapi di usahakan untuk tidak terlalu menggunakan banyak script jquery,blog ga akan berat n_n

      BalasHapus
      Balasan
      1. kk Jhohanes Boleh Nanya Gak Yg Di bawah Ini TAROK dIMANA!? pLS bALAS kK

        #floatMenu {
        position:absolute;
        top:150px;
        left:50%;
        margin-left:235px;
        width:80px;}
        #floatMenu ul {list-style-type: none;}
        #floatMenu ul li a {
        display:block;
        background:-moz-linear-gradient(-90deg, #222, #2b2b2b) repeat scroll 0 0 transparent;
        background:-webkit-gradient(linear, left top, left bottom, from(#222), to(#2b2b2b));
        border:1px solid #999;
        border-left:6px solid #999;
        text-decoration:none;
        color:#ccc;
        padding:5px 5px 5px 25px;
        width:80px;
        -webkit-transition: all 0.6s ease-out;
        box-shadow: #333 0px 0px 10px;
        -moz-box-shadow: #333 0px 0px 10px;
        -webkit-box-shadow: #333 0px 0px 10px;
        }
        #floatMenu ul li a:hover {
        color:#fff;
        background-color:#333333;
        border-right:6px solid #999;
        width:150px;
        -moz-border-radius-topleft: 15px;
        -moz-border-radius-topright: 0px;
        -webkit-border-top-left-radius: 15px;
        -webkit-border-top-right-radius: 0px;
        }
        #floatMenu ul.menu1 li a:hover {border-color:#09f;}

        Hapus
    3. berhasil gan..
      thanks ya ilmunya
      nice info^^

      BalasHapus
    4. kalo di pake ke wordpress bisa juga nggak Om Jhon :D

      BalasHapus
    5. yang paling atas di taruhh dimana gan ????

      BalasHapus
    6. kode SCC di tarok template ?
      matsudnya gan, tolong di perjelas lagi
      thanks

      BalasHapus
    7. scriptnya saya bungkus dulu gan, ntar dilanjut lagi...!

      BalasHapus

    "Maaf komentar anda tidak akan dibalas, karena blog ini sudah tidak aktif. Terima kasih"

    "Sorry your comment will not be replied, because this blog has been inactive. Thank you"

  • Translate

    Thank you for choosing Blogger Template from Blog Johanes! (*≧∇≦*)

    - Copyright ©DJogzs 2009-2013 - Some Right Reserve. - DJogzs - Powered by Blogger - Designed by Johanes Djogan -