Program to implement Full Screen Navigation as Sliding in from the left.
May 12, 2018
Navigation,
Full Screen Navigation,
JavaScript,
Script tag,
HTML,
left to right,
509 Views
Program to implement Full Screen Navigation as Sliding in from the left.
<html>
<head>
<style>
body {
font-family: "Times New Roman", Times, serif;
}
.nav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
background-color:black;
overflow-x: 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.width = "100%";
}
function closeNav() {
document.getElementById("Nav").style.width = "0%";
}
</script>
</body>
</html>