Tutorial: Show and Hide Navigation

Tutorial: Show and Hide Navigation

Tutorial Show and Hide Navigation

Konnichiwaa minna-san! Happy sundayy,,, ternyata tadi ada yang request nih. Cara buat show and hide navigation kek punyaku. Ohya.. sebelumnya emang udah ada yang request tutorial yang sama,, namun apa daya saya lupa :v Oke deh! langsung aja yukk



25th Sep 2016, 07:46
Juju: Hay Neii,, Bw here ya! Oh iya, boleh tanya gak? Gimana sih, cara bikin Navigation Bar kayak kamu itu

  • Blogger >> dasbor >>> tata letak / layout >> tambahkan gadget / add a gadget >> HTML Javascript (yang ada di bawah header recommended)
  • Copy kode ini dan paste di bagian konten HTML nya

<br /><br /><style>
#before {
padding:10px;
}

#afterr {
width:100%;
background: #f1f1f1;
display:none;
border-bottom: 5px solid #dfdfdf;
position:fixed;
top:0;
left:0;
z-index:999;
opacity:1;
padding:15px;
text-align:center;
}
.navisatu a {
padding:8px 15px 8px 15px;
border:2px solid #eee;
background:#fbfbfb;
text-decoration:none;
text-transform: none;
color:#c0c0c0;
margin:5px;
letter-spacing:1px;
font-family: 'Century Gothic', sans-serif; 
font-size:14px;
text-align:center;
-webkit-transition-duration:1s;

}

.navisatu a:hover{
padding:8px 15px 8px 15px;
border:2px solid #cecece;
background:#cecece;
text-decoration:none;
color:#fff;
margin:5px;
letter-spacing:1px;
text-align:center;
}

.navidua a {
padding:7px;
background:#d0d0d0;
text-decoration:none;
color:#fff;
margin:5px;
letter-spacing:2px;
text-transform:uppercase;
font-family: 'century gothic', sans-serif;
font-size:14px;
text-align:center;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<center><div id="before">
<div class="navisatu">
<a href="">NAVIGATE 1</a>
<a href="">NAVIGATE 2</a>
<a href="">NAVIGATE 3</a>
<a href="">NAVIGATE 3</a>
</div></div></center>

<div id="afterr"><div class="navidua">
<a href="">NAVIGATE 1</a>
<a href="">NAVIGATE 2</a>
<a href="">NAVIGATE 3</a>
<a href="">NAVIGATE 3</a>
</div></div>

<script>
    $(document).ready(function() {
        var headerTop = $('#before').offset().top;
        var headerBottom = headerTop + 10; // Sub-menu should appear after this distance from top.
        $(window).scroll(function () {
            var scrollTop = $(window).scrollTop(); // Current vertical scroll position from the top
            if (scrollTop > headerBottom) { // Check to see if we have scrolled more than headerBottom
                if (($("#afterr").is(":visible") === false)) {
                    $('#afterr').fadeIn('fast');
                }
            } else {
                if ($("#afterr").is(":visible")) {
                    $('#afterr').hide();
                }
            }
        });
    });
</script>
<br />

  • Edit yang kalian perlukan
  • Lepas tu tinggal save jeh :)

IMPORTAND!!! : MEAN OF THE ID CODE
Before : Bila buka blog korang . Dia berada di kedudukan asal / original
Afterr : Bila scroll blog ke bawah dia akan lekat pada top blog.
Navisatu : Untuk navi dikedudukan asal

Navidua : Untuk navi bila dia dah lekat dekat atas. 
Credit : Hafiz Zulkafly

1 comment:

1 ) Berikan komentar yang baik

2 ) Jangan pernah berkata kasar, jorok, dan menyakiti perasaan orang lain

3 ) Jangan sampai bikin gaduh di kotak comment

4 ) Blog ini secara otomatis memilah mana yang komen spam (termasuk yang menawarkan produk-produk seperti produk diet, dll). Jadi, hati-hati komennya

Related Posts Plugin for WordPress, Blogger...