Hello, readers . In today's blog I have tried to create A Full Screen Sliding Navigation covering the full screen using Javascript in a direction from left to right.
For creating this I need to make a div with id name as “myNav” following a class with name as “overlay”. Here overlay class is used the side navigation menu list which on click will move in the right direction covering the full screen .
In the CSS code I need to set the background-color , height, position and the transition property to the “overlay” class.
Within the above div, I have created a class for the close button with the name as closebtn and had applied a Javascript OnClick Event for the closeNav( ) function.
To the closebtn I need to set its position to absolute and adjusted it to its right place.
Moving forward for the side navigation menu I need to create an unordered list containing all the list items within it. I named its class as overlay-content and added style over it.
Now next for creating the toggle button , I created a div with the class name as main and had applied a background-image to it by making the div position to relative.
Within the div I have used span tag and had applied a Javascript OnClick Event to the openNav( ) function and adjusted the toggle button position to the top and left.
Below it I had applied Javascript over the created function :
- For the openNav function I had applied a method to get element by Id which is myNav , the following code will run whenever we will click over the toggle button it will extend the side navigation covering the full screen.
- Whereas for the closeNav function , I had applied the same method as in the above function to get the element by Id using the myNav id ,the following code will run when we click over the close button , the side navigation will resize back and therefore the width will be equal to zero.
Below is the code for the following example :-
<!DOCTYPE html>
<html>
<meta charset="UTF8">
<style>
body {
margin: 0;
font-family: 'Lato', sans-serif;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px !important;
}
.main{
background-image:url("images/banner_slider01.jpg");
background-size: cover;
background-position:center;
background-repeat: no-repeat;
background-attachment: fixed;
padding: 50%;
}
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.closebtn {
font-size: 40px !important;
top: 15px;
right: 35px;
}
}
</style>
<body>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">X</a>
<div class="overlay-content">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>The above code will run over all modern browsers such as on Firefox 7.0.1, Chrome 15.0, Internet Explorer 9.0 , Safari 5.1.1.
</div>
<div class="main" style="position:relative;">
<span style="font-size:30px;cursor:pointer; position:fixed; top:10px; left:20px;" onclick="openNav()"> MENU</span>
</div>
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
</body>
</html>
Conclusion :-
Hence, A sliding full screen navigation is created using the Javascript which is easy to learn and understand.
Note:-The above code will run over all modern browsers such as on Firefox 7.0.1, Chrome 15.0, Internet Explorer 9.0 , Safari 5.1.1.
0 Comment(s)