One Page Navigation

Developer
Larry Geams Parangan
Size
2,534 Kb
Views
28,336
  1. One Page Navigation Previews
  2. One Page Navigation HTML Codes
  3. One Page Navigation CSS Codes
  4. One Page Navigation JS Codes

How do I make an one page navigation?

Nothing much to see here. Just a smooth scrolling effect plus navigation trigger. Probably, many has already shared the same kind of stuff. Well I just want to share. :). What is a one page navigation? How do you make a one page navigation? This script and codes were developed by Larry Geams Parangan on 13 September 2022, Tuesday.

One Page Navigation Previews
IQ Test

One Page Navigation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>One Page Navigation</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav> <ul>	<li><a href="#main">one</a></li>	<li><a href="#secondary">two</a></li>	<li><a href="#third">one</a></li>	<li><a href="#fourth">two</a></li>	<li><a href="#fifth">one</a></li>	</ul>
</nav>
<section id="main" class="blue full-height"></section>
<section id="secondary" class="red full-height"></section>
<section id="third" class="green full-height"></section>
<section id="fourth" class="pink full-height"></section>
<section id="fifth" class="black full-height"></section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

One Page Navigation - Script Codes CSS Codes

body{ margin: 0px; padding: 0px;
}
nav{ -webkit-backface-visibility: hidden; z-index: 5; position: fixed; top: 10%; left: 0px; right: 0px; margin: auto; width: 100px;
}
nav li{ height: 20px; margin: 20px 0px; list-style: none;
}
nav a{ display: block; width: 25px; height: 25px; text-indent: -9999px; border-radius: 25px; -moz-border-radius:25px; -webkit-border-radius:25px; background-color: transparent; border: 3px solid #fff; transition: all 0.3s ease; position: relative; left: 0px; top: 0px;
}
nav a:hover, nav a.active{ background-color: #fff; width: 30px; height: 30px; left: -3px; top: -2px}
.red { background-color: #B23751; }
.blue { background-color: #346CA5; }
.green { background-color: #65B237; }
.pink { background-color: #c0392b; }
.black { background-color: #2c3e50; }
section{ height: 980px; }

One Page Navigation - Script Codes JS Codes

$('a[href^="#"]').click(function(event) {	var id = $(this).attr("href");	var target = $(id).offset().top;	$('html, body').animate({scrollTop:target}, 500);	event.preventDefault();	});
function getTargetTop(elem){	var id = elem.attr("href");	var offset = 60;	return $(id).offset().top - offset;
}	$(window).scroll(function(e){	isSelected($(window).scrollTop())	});
var sections = $('a[href^="#"]');
function isSelected(scrolledTo){	var threshold = 100;	var i;	for (i = 0; i < sections.length; i++) {	var section = $(sections[i]);	var target = getTargetTop(section);	if (scrolledTo > target - threshold && scrolledTo < target + threshold) {	sections.removeClass("active");	section.addClass("active");	}	};
}
One Page Navigation - Script Codes
One Page Navigation - Script Codes
Home Page Home
Developer Larry Geams Parangan
Username larrygeams
Uploaded September 13, 2022
Rating 4.5
Size 2,534 Kb
Views 28,336
Do you need developer help for One Page Navigation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Larry Geams Parangan (larrygeams) Script Codes
Name
Browser Detection - Google Chrome
Slide Toggle Navigation
Simple E-Commerce
Pure CSS Checklist Icon
Solution for Long Drop Down Items
CSS3 Accordion
Pure CSS Login Form
Click and Hold Button Animation
Just Flat
The Android Story
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!