Full Screen Menu with HTML CSS JavaScript

In this tutorial we will learn how to create a Full Screen Menu with HTML CSS and JavaScript. HTML, CSS and JavaScript code is given below.

Table of Contents

• HTML Code
• CSS Code
• JavaScript Code
• Video Tutorial
• More CSS Tutorials

HTML Code

Take a look at the HTML code given below.

<span id='icon' onclick="menu(this)">+</span>  
  <ul id='menu'>
    <li><a>Home</a></li>
    <li><a>About</a></li>
    <li><a>Services</a></li>
    <li><a>Contact</a></li>
  </ul>

CSS Code

CSS code is given below.

<style>
*{
    margin: 0;
    padding: 0;
}
body {
    background: linear-gradient(to left top, blue, purple);
    height: 100vh;
    font-family: sans-serif;
}
#menu {
    position: absolute;
    top: 50%;
    left: -50%;
    transform: translate(-50%, -50%);
    transition: 0.5s ease-out;
    list-style-type: none;
}
#menu li {
    font-size: 35px;
    background-color: white;
    border: 2px solid black;
    height: 1.5em;
    line-height: 1.5em;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    margin: 10px 0px;
}
#menu li a {
    color: white;
    mix-blend-mode: difference;
}
#menu li::before {
    content: '';
    position: absolute;
    width: .70em;
    height: inherit;
    background-color: black;
    transition: 0.5s ease-out;
}
#menu li:hover::before {
    transform: scale(15);
}
#icon{
    display: inline-block;
    font-size: 60px;
    color: #fff;
    cursor: pointer;
    margin: 10px 20px;
}
</style>           

JavaScript Code

JavaScript code is given below.

<script>
var x=0;
var element = document.getElementById("menu");    
function menu(icon){
if(x==0)
{ 
icon.style.transform = "rotate(45deg)";     
element.style.left = '50%';
x=1;    
}
else{
icon.style.transform = "rotate(0deg)";     
element.style.left = '-50%';
x=0;    
}    
}  
</script>           

Video Tutorial

Watch our video tutorial on Full Screen Menu with HTML CSS JavaScript.