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.

 <title>Full Screen Menu</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">   

 font-family: 'Roboto', sans-serif;

 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;

 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;

<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>

<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>  

 function openNav(){
  document.getElementById("myNav").style.height = "100%";
function closeNav(){
  document.getElementById("myNav").style.height = "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
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.