fullPage.js

fullpage-js.markdown

fullPage.js

A Pen by khuongyolo on CodePen.

License.

index.html

<ul id="menu">
    <li data-menuanchor="1page" class="active"><a href="#1page">First slide</a></li>
    <li data-menuanchor="2page"><a href="#2page">Second slide</a></li>
    <li data-menuanchor="3page"><a href="#3page">Third slide</a></li>
    <li data-menuanchor="4page"><a href="#4page">Fourth slide</a></li>
</ul>
<div id="fullpage">
    <div class="section">Some section</div>
    <div class="section">
    <div class="slide"> Slide 1 </div>
    <div class="slide"> Slide 2 </div>
    <div class="slide"> Slide 3 </div>
    <div class="slide"> Slide 4 </div>
</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
</div>
	<script>
		$(document).ready(function() {
		$('#fullpage').fullpage({
			anchors: ['1page', '2page', '3page','4page'],
			menu: '#menu',
			sectionsColor: ['#AACF52', '#4BBFC3', '#7BAABE', '#E5E5E5']
		});
	</script>

script.js

$(document).ready(function() {
		$('#fullpage').fullpage({
			anchors: ['1page', '2page', '3page','4page'],
			menu: '#menu',
			sectionsColor: ['#AACF52', '#4BBFC3', '#7BAABE', '#E5E5E5']
			});
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.js"></script>

style.css

.section {
	text-align: center;
	font-size: 200%;
}

#menu li {
    display:inline-block;
    margin: 10px;
    color: #000;
    background:#fff;
    background: rgba(255,255,255, 0.5);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
#menu li.active{
    background:#666;
    background: rgba(0,0,0, 0.5);
    color: #fff;
}
#menu li a{
    text-decoration:none;
    color: #000;
}
#menu li.active a:hover{
    color: #000;
}
#menu li:hover{
    background: rgba(255,255,255, 0.8);
}
#menu li a,
#menu li.active a{
    padding: 9px 18px;
    display:block;
}
#menu li.active a{
    color: #fff;
}
#menu{
    position:fixed;
    top:0;
    left:0;
    height: 40px;
    z-index: 70;
    width: 100%;
    padding: 0;
    margin:0;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.css" rel="stylesheet" />