jQuery based Full screen responsive menu: 2 demos

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

The plug-in name is hotmenu, which you may download here (Not available any more 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:

jQuery full screen menu

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:

jQuery full screen menu custom

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.