Q:

Javascript Program to implement Full Screen Navigation as Sliding in from the left

0

Javascript Program to implement Full Screen Navigation as Sliding in from the left.

All Answers

need an explanation for this answer? contact us directly to get an explanation for this answer

<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()">&times;</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>

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

Similar questions


need a help?


find thousands of online teachers now