Home » , » Membuat menu melayang dengan sentuhan Jquery dan CSS3

Membuat menu melayang dengan sentuhan Jquery dan CSS3

Hello Pengunjung Oktri.co.cc, 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 ini di 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.
-Apabila tidak berhasil delete aja  onclick="return false;"

Selesai deh..
Selamat mencoba sob,dan jangan lupa tinggalkan komentarnya





Artikel Terkait:

7 komentar:

  1. kk... kayaknya aku harus banyak belajar dr kk deh. kk ebat. :)

    BalasHapus
  2. @Yosia

    terima kasih sudah berkomentar, silahkan qt sama2 belajar

    BalasHapus
  3. @Yosia Setuja akan sering mampir kesini untuk menimba ilmu trims infonya gan Tips Tricks Blogger

    BalasHapus
  4. Q bungung,,, langkah yg pertama tu di
    masukkan di mana...? n klo lanka ke-2 q da ngerti..
    tlg bimbngan a ya....

    BalasHapus
  5. gan blognya keren, kayaknya aku akan sering ke blog ini.

    jika gan berkenan kunjugi blog aku www.t4berbagi.co.cc
    dan jika gan tidak keberatan klik follow yah ntar aku follow balik.

    BalasHapus

Fivers

Selamat Datang Di OKTRI BLOG

Selamat datang di Blog saya, semoga saja kalian bisa mendapatkan apa yang kalian butuhkan diblog saya ini. Terima kasih Telah Berkunjung Di Blog saya,apabila berkenan silahkan berkomentar dan follow blog saya,mari kita saling berbagi ilmu tentang apa saja...Selengkapnya tentang Tutorial Ini

Sekilas tentang penulis

Nama saya Oktri darmadi,saya seorang Mahasiswa S1 Teknik Informatika Di IBI DARMAJAYA Bandar Lampung.

Social Stuff

  • RSS
  • Twitter
  • Facebook
  • HOME
Oktri