Navigation

Developer
Kenz
Size
2,345 Kb
Views
6,072
  1. Navigation Previews
  2. Navigation HTML Codes
  3. Navigation CSS Codes
  4. Navigation JS Codes

How do I make an navigation?

What is a navigation? How do you make a navigation? This script and codes were developed by Kenz on 26 January 2023, Thursday.

Navigation Previews
IQ Test

Navigation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Navigation</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section id="screen1">	<p>Scroll down</p>	<nav> <ul> <li><a href="#">THE <font size="3px">S</font>TORY</a></li> <li><a href="#">LEADERSHIP</a></li> <li><a href="#">ACHIEVEMENTS</a></li> <li><a href="#">DEVELOPMENT</a></li> <li><a href="#">ASSOCIATES <font size="3px">B</font>USINESS</a></li> <li><a href="#">CSR</a></li> <li><a href="#">CAREER</a></li> <li><a href="#">CONTACT <font size="4px">U</font>S</a></li> </ul>	</nav>
</section>
<section id="screen2"></section>
<section id="screen3"></section> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Navigation - Script Codes CSS Codes

* {margin: 0; padding: 0;}
a {text-decoration: none;}
/* This class is added on scroll */
.fixed {	position: fixed;	top: 0;	height: 70px;	z-index: 1;
}
body {	color: #fff;	font-family: 'open-sans-bold', AvenirNext-Medium, sans-serif;	font-size: 18px;	text-align: center;
}
/* Navigation Settings */
nav {	position: absolute;	bottom: 0;	width: 100%;	height: 70px;	background: #e9e9e9; border-top: 4px solid #31322c;
}
nav li {	display: inline-block;	padding: 24px 10px;
}
nav li::first-letter { font-size: 16px;
}
nav li a {	color: black; font-size: 12px;
}
section {	height: 100vh;
}
/* Screens Settings */
#screen1 {	background: #43b29d;
}
#screen1 p {	padding-top: 200px;
}
#screen2 {	background: #efc94d;
}
#screen3 {	background: #e1793d;
}
@media only screen and (max-width: 520px) {	nav li {	padding: 24px 4px;	}	nav li a {	font-size: 8px;	}
}

Navigation - Script Codes JS Codes

 $(document).ready(function(){ $(window).bind('scroll', function() { var navHeight = $( window ).height() - 70; if ($(window).scrollTop() > navHeight) { $('nav').addClass('fixed'); } else { $('nav').removeClass('fixed'); }	});	});
Navigation - Script Codes
Navigation - Script Codes
Home Page Home
Developer Kenz
Username Ken88
Uploaded January 26, 2023
Rating 3
Size 2,345 Kb
Views 6,072
Do you need developer help for 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!

Kenz (Ken88) Script Codes
Name
Pop Up
Bootstrap
Skew bg mainpage
The new WEbsite
A Pen by Kenz
Create amazing art & images 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!