Untuk cara memasang pada blog hampir sama dengan tutorial saya pada menu navigation dengan efek easing.
Lihat DemoWeb Tutorial
<div id="navi"> <div id="menu" class="default"> <ul> <li><a href="#">Home</a></li> <li><a href="#">CSS</a></li> <li><a href="#">Design</a></li> <li><a href="#">Development</a></li> <li><a href="#">Freebies</a></li> <li><a href="#">Inspiration</a></li> <li><a href="#">Resources</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">WordPress</a></li> </ul> </div><!-- close menu --> </div><!-- close navi -->
#navi { margin-top: 50px; } #menu { background: #333; text-align: center; margin: 0 auto; padding: 0; } #content { width: 750px; margin: 0 auto; margin-bottom: 25px; padding: 30px 0; text-align: left; } ul { padding: 5px; } ul li { list-style-type: none; display: inline; margin-right: 15px; } ul li a { color: #fff; text-decoration: none; text-shadow: 1px 1px 1px #000; padding: 3px 7px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -webkit-transition-property: color, background; -webkit-transition-duration: 0.5s, 0.5s; } ul li a:hover { background: #01458e; color: #ff0; -webkit-transition-property: color, background; -webkit-transition-duration: 0.5s, 0.5s; } .default { width: 850px; box-shadow: 0 0 2px #fff; -webkit-box-shadow: 0 0 2px #fff; -moz-box-shadow: 0 0 2px #fff; } .fixed { position: fixed; top: -5px; left: 0; width: 100%; border-bottom:1px solid #fff; box-shadow: 0 0 40px #222; -webkit-box-shadow: 0 0 40px #222; -moz-box-shadow: 0 0 40px #222; }
<script type="text/javascript"> //<![CDATA[ $(function(){ var menu = $('#menu'), pos = menu.offset(); $(window).scroll(function(){ if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){ menu.fadeOut('fast', function(){ $(this).removeClass('default').addClass('fixed').fadeIn('fast'); }); }else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){ menu.fadeOut('fast', function(){ $(this).removeClass('fixed').addClass('default').fadeIn('fast'); }); } }); }); //]]> </script>
Post By : denzdii
pertamax.........hehehe
ReplyDeleteWah mantap nih tutorialnya \m/
ReplyDeleteSalam kenal :D
terima ksaih .
Deletesalam kembali ya.
ane berhasil gan Thank's gan...
ReplyDeletemantap tutorialnya :) thanks a lot gan \o/
ReplyDelete