The full-screen responsive menu
In certain website designs, you may need to have a full-screen menu that overlaps the entire content that is visible to the user.
In this tutorial, a jQuery plug-in is used for creating the responsive full screen menus. The menu, as clicked from the top right, will overlap the visible content where you may display navigation links to the other parts of the website.
The plug-in name is hotmenu, which you may download here (Not available anymore on Github).
A demo of full screen jQuery menu
As you open the demo page, you can see three lines (like the mobile menu) on the right side of the screen. Click on it to open the full screen menu. It should overlap the main content with the links given under <nav> tag in markup section:
See online demo and code
Following is the markup used for the demo:
<nav class="links" id="demo-of-nav"> <a href='https://www.jquery-az.com/jquery-tips/'>jQuery</a> <a href='https://www.jquery-az.com/bootstrap-tips-tutorials/'>Bootstrap</a> <a href='https://www.jquery-az.com/javascript-tutorials/'>JavaScript</a> <a href='https://www.jquery-az.com/php-tutorials/'>PHP</a> <a href='https://www.jquery-az.com/html-tutorials/'>HTML</a> </nav> <div class="toggle"></div> <div class="container"> <header> <span>...that is a</span> <h1 class="logo"><span class="logo-large">hot</span>menu</h1> <p>A demo of full screen menu based at jQuery</p> </header> <section> <h2>How to open?</h2> <p>Click on right cornor with three lines to open and close the menu</p> </section> </div>
The jQuery code:
<script> $(function() { $('#demo-of-nav').hotMenu({ toggleSelector: '.toggle' }); }); </script>
For setting up this plug-in, you need to include the jQuery and plug-in’s JS and CSS files in the <head> section:
<script src=”https://code.jquery.com/jquery-2.2.2.min.js”></script>
<script type=”text/javascript” src=”js/jquery.hotmenu/jquery.hotmenu.js”></script>
<link rel=”stylesheet” href=”css/jquery.hotmenu/hotmenu.css”>
You may get JS and CSS files either by downloading the package from plug-in page (link given in above section) or view source the demo page and find respective files to download in your system
Customizing the menu by changing sample CSS
The package also includes the sample.css file where links style in the full screen menu is specified. You may change certain classes as per your liking or to match with the main design of the website. See the following demo, where I modified a few classes for changing the link colors, background. and a few other properties. I have renamed the sample.css to sample-custom.css file:
See online demo and code
In the demo code, only the reference to the CSS file is changed. Inside the sample-custom.css file, the .links class is dealing with the menu’s link color, background etc. Apart from that, you might notice the change of color of three lines for closing the full screen menu. For changing that, find the .toggle class in the same file and change the properties as per need.