ads_header

How To Create Full Screen Slide Menu HTML

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()">&times;</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()">&#9776;</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
  • height : 100%
  • width : 0%
  • overflow-x : hidden
function openNav() 
document.getElementById("myNav").style.width = "100%";

function closeNav()
document.getElementById("myNav").style.width = "0%";


For more details, please watch the video below


No comments:

Powered by Blogger.