How To Create Full Screen Slide Menu HTML
Hello Guys, In this post I will discuss about how to make full screen menu either Vertical or Horizontal.
So when run in the browser, it will show a Menu in the upper left corner, when we click then the menu will appear with a vertical or horizontal Slide style.
Well first open your text editor, and here I use Sublime. Then enter the following code.
<html> <head> <title>Full Screen Menu</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body{ font-family: 'Roboto', sans-serif; } .overlay{ height: 0%; width: 100%; position: fixed; z-index: 1; top: 0; left: 0; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.9); overflow-y: 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; } .overlay .closebtn{ position: absolute; top: 20px; right: 45px; font-size: 60px; } @media screen and (max-height: 450px){ .overlay a{font-size : 20px} .overlay .closebtn{ font-size: 40px; top: 15px; right: 35px; } } </style> </head> <body> <div id="myNav" class="overlay"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <div class="overlay-content"> <a href="#">Home</a> <a href="#">Video</a> <a href="#">Channel</a> <a href="#">About</a> </div> </div> <span style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span> <script> function openNav(){ document.getElementById("myNav").style.height = "100%"; } function closeNav(){ document.getElementById("myNav").style.height = "0%"; } </script> </body> </html>
NOTES :
The above code when executed, the menu will appear vertically. If you want to change horizontally just replace:
Property on class overlay
document.getElementById("myNav").style.width = "100%";
function closeNav()
document.getElementById("myNav").style.width = "0%";
The above code when executed, the menu will appear vertically. If you want to change horizontally just replace:
Property on class overlay
- height : 100%
- width : 0%
- overflow-x : hidden
document.getElementById("myNav").style.width = "100%";
function closeNav()
document.getElementById("myNav").style.width = "0%";