Posted by Aak
Aak-share.com Updated at: 8:39:00 PM

Cara Membuat Menu Navigasi Efek Scroll Keren di Blog

No comments:
Cara Membuat Navigasi Style Scroll ~ Hallo sobat..., Jika kita berbicara mengenai style navigasi untuk mempercantik dan memperindah tampilan Blog memanglah tidak ada habisnya. Bisa kita lihat contohnya beberapa style navigasi seperti Navigasi Animasi Hamburger dan juga Style Show Hide Navigation .

Pada syle navigasi ini bisa dibilang sangatlah menarik karena dilengkapi dengan fitur scroll. Jika kita klik salah satu item navigasi maka secara otomatis kita akan diarahkan kesalah satu halaman navigasi yang kita pilih. Navigasi ini memiliki tampilan big (besar) dan luas sehingga pengunjung akan lebih mudah mencari halaman navigasi.



Karena memiliki ukuran besar dan memanjang kebawah, kabar baik lainnya pada navigasi ini dilengkapi dengan tombol animasi scroll sehingga akan lebih mudah untuk naik keatas. Bagaimana Anda tertarik, berikut ini langkah-langkahnya :

Silahkan Anda buka Editor Template, lalu cari kode ]]></b:skin> dan salin kode dibawah ini pasangkan diatasnya atau sebelumnya .

/*Navigasi Style Scroll*/
.mainMenu {
  position: fixed;
  z-index: 999;
  left: 0;
  top: 10%;
  width: 120px;
  padding: 10px;
  color: #fff;
  background-color: #2c3e50;
  border-radius: 0 10px 10px 0;
}
.mainMenu h3 {
  text-transform: uppercase;
  text-align: left;
  letter-spacing: 3px;
  font: 700 18px PT Sans;
  padding: 5px;
  margin: 0 0 10px;
  border-bottom: 2px dotted rgba(255, 255, 255, 0.1);
}
.mainMenu ul {
  list-style-type: none;
  margin-left: 5px;
}
.mainMenu ul li {
  padding: 3px 0;
}
.mainMenu ul li a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  text-transform: uppercase;
  font: 400 14px PT Sans;
  margin-left: 0px;
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  -ms-transition: all 300ms;
  -o-transition: all 300ms;
  transition: all 300ms;
}
.mainMenu ul li a:before {
  font-family: 'FontAwesome';
  font-size: 14px;
  content: '\f10d';
  padding-right: 10px;
}
.mainMenu ul li a:hover {
  color: rgba(255, 255, 255, 0.9);
  margin-left: 10px;
}
.mainMenu ul li a:hover:before {
  content: '\f064';
}
.mainMenu ul li a.active {
  font-weight: 900;
  color: #ffffff;
  margin-left: 10px;
}
.mainMenu ul li a.active:before {
  content: '\f00c';
}
.sectionOnePage {
  width: 100%;
  height: 100vh;
}
.sectionOnePage#tata {
  background-color: #1abc9c;
}
.sectionOnePage#tete {
  background-color: #27ae60;
}
.sectionOnePage#titi {
  background-color: #e67e22;
}
.sectionOnePage#toto {
  background-color: #d35400;
}
.sectionOnePage#tutu {
  background-color: #e74c3c;
}
.sectionOnePage#tyty {
  background-color: #c0392b;
}
.sectionOnePage .content {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 50%;
  margin: 0 auto;
  text-align: center;
  font: 900 72px 'Lato';
  color: #fff;
  text-transform: uppercase;
}
.backToTop {
  z-index: 999;
  margin: 0;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 50px;
  height: 50px;
  display: none;
}
.backToTop a {
  color: #fff;
}
.backToTop a i {
  font-size: 32px;
}

Selanjutnya Anda cari kode </body> lalu copy kode dibawah ini dan pastekan diatasnya.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"/>

Jika pada Template Anda sudah terinstall kode diatas maka lewati langkah tersebut .


Masih pada kode </body>, silahkan Anda salian kode dibawah ini dan pasangkan diatasnya atau dibawah kode diatas.

<script type="text/javascript">
$(document).ready(function () {
    activeLink();
    scrollToTop();
});
function activeLink() {
    $('.mainMenu a').click(function (e) {
        e.preventDefault();
        $('.mainMenu a').removeClass('active');
        $(this).addClass('active');
        var distanceTopToSection = $('#' + $(this).data('target')).offset().top;
        $('body, html').animate({ scrollTop: distanceTopToSection }, 'slow');
    });
}
function scrollToTop() {
    var heightSection = $('.sectionOnePage').height();
    console.log(heightSection);
    $(window).scroll(function () {
        console.log($(this).scrollTop());
        if ($(this).scrollTop() > heightSection / 2) {
            $('.backToTop').fadeIn('slow');
        } else {
            $('.backToTop').fadeOut('slow');
        }
    });
    $('.backToTop > a').on('click', function (e) {
        e.preventDefault();
        $('body, html').animate({ scrollTop: 0 }, 'slow');
    });
}
</script>

Langkah selanjutnya pemasangan HTML, Anda cari kode <div id='main-wrapper'> lalu salin kode dibawah ini dan pasangkan dibawahnya .

<nav class="mainMenu">
<h3>
Menu</h3>
<ul class="mainMenu-links">
<li><a class="active" data-target="tata" href="#">item 1</a></li>
<li><a data-target="tete" href="#">item 2</a></li>
<li><a data-target="titi" href="#">item 3</a></li>
<li><a data-target="toto" href="#">item 4</a></li>
<li><a data-target="tutu" href="#">item 5</a></li>
<li><a data-target="tyty" href="#">item 6</a></li>
</ul>
</nav>
<section class="sectionOnePage" id="tata">
<div class="content">
section 1</div>
</section>
<section class="sectionOnePage" id="tete">
<div class="content">
section 2</div>
</section>
<section class="sectionOnePage" id="titi">
<div class="content">
section 3</div>
</section>
<section class="sectionOnePage" id="toto">
<div class="content">
section 4</div>
</section>
<section class="sectionOnePage" id="tutu">
<div class="content">
section 5</div>
</section>
<section class="sectionOnePage" id="tyty">
<div class="content">
section 6</div>
</section>
<div class="backToTop" style="display: none;">
  <a href="#"><i class="fa fa-arrow-up"></i></a>
</div>

Silahakan Anda modifikasi navigasi diatas dengan menambahklan link, karena navigasi tersebut masih berbentuk dasar.

Semoga bermanfaat!




Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments