Program to implement Full Screen Navigation.
May 12, 2018
Navigation,
JavaScript,
slide down from top,
full screen navigation,
script tag,
620 Views
Program to implement Full Screen Navigation as sliding down from the top.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Times New Roman", Times, serif;
}
.nav {
height: 0;
width: 100%;
position: fixed;
z-index: 1;
background-color:black;
overflow-y: hidden;
transition: 0.5s;
}
.nav-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.nav span , .nav p{
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.nav p:hover, .nav p:focus {
color: #f1f1f1;
}
.nav span:hover, .nav span:focus {
color: #f1f1f1;
}
.nav .btn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
</style>
</head>
<body>
<div id="Nav" class="nav">
<span class="btn" onclick="closeNav()">×</span>
<div class="nav-content">
<p> Hello TutorialsLink! </p>
</div>
</div>
<h2>Fullscreen Overlay Navigation</h2>
<p>Click on the button below to open the fullscreen overlay navigation</p>
<button style="font-size:15px;cursor:pointer" onclick="openNav()"> Click Me!</button>
<script>
function openNav() {
document.getElementById("Nav").style.height = "100%";
}
function closeNav() {
document.getElementById("Nav").style.height = "0%";
}
</script>
</body>
</html>