Q:

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

YasminRadwan26
Save to bookmark
|
2022-05-24
|
  137 
0

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

JavaScript programming, examples, JavaScript programming examples,
login and add your own answer to this question

All Answers

YasminRadwan26
2022-05-24
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