ads_header

Home JAVASCRIPT How To Create Full Screen Slide Menu HTML VIEWS

How To Create Full Screen Slide Menu HTML

May 14, 2018
Read
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


Tags :
Powered by Blogger.