Pada syle navigasi ini dapat dibilang sangatlah menarik alasannya ialah 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 mempunyai tampilan big (besar) dan luas sehingga pengunjung akan lebih gampang mencari halaman navigasi.
Karena mempunyai ukuran besar dan memanjang kebawah, kabar baik lainnya pada navigasi ini dilengkapi dengan tombol animasi scroll sehingga akan lebih gampang untuk naik keatas. Bagaimana Anda tertarik, berikut ini langkah-langkahnya :
Silahkan Anda buka Editor Template, kemudian cari kode ]]></b:skin> dan salin instruksi 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 instruksi </body> kemudian copy instruksi 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 instruksi diatas maka lewati langkah tersebut .
Masih pada instruksi </body>, silahkan Anda salian instruksi dibawah ini dan pasangkan diatasnya atau dibawah instruksi 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 instruksi <div id='main-wrapper'> kemudian salin instruksi 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, alasannya ialah navigasi tersebut masih berbentuk dasar.
Semoga bermanfaat!
Sumber http://www.websiteedukasi.com/
