JavaScript

How to Easily Implement a Responsive Drawer Menu with Drawer Plugin [jQuery Plugin]

 

In modern web development, responsive design has become an essential skill. With the widespread use of smartphones, navigation menus designed for mobile devices play a crucial role. Among these, “drawer menus” are widely adopted because they allow effective use of space while providing a simple and user-friendly navigation experience.

In this article, we will introduce how to easily implement a responsive drawer menu using the jQuery plugin “Drawer.” Drawer is a plugin optimized especially for mobile devices, offering a simple structure while allowing customization. Even those introducing a drawer menu for the first time can use it easily, making it perfect for beginners.

Contents
  1. What is drawer.js?
  2. Loading CSS Files to Implement a Responsive Drawer Menu with Drawer
  3. HTML Structure for Implementing a Responsive Drawer Menu with Drawer
  4. JavaScript Code for Implementing a Responsive Drawer Menu with Drawer
  5. Drawer Left Demo Page to Display a Drawer Menu from the Left
  6. Source: Drawer
  7. Conclusion

What is drawer.js?

“Drawer.js” is a jQuery-based plugin primarily developed for mobile devices. It is a tool for easily implementing navigation menus (drawer menus) that slide in from the left, right, top, or bottom of the screen. The advantages of Drawer.js lie in its simplicity and flexible customization.

With mobile-first design now mainstream, it’s important to ensure that users have an optimal experience regardless of their device. By using Drawer, you can provide a smooth navigation experience without compromising usability.

Loading CSS Files to Implement a Responsive Drawer Menu with Drawer

When using Drawer.js, the first step is to load the required CSS files. To enable Drawer’s features, you need to load its dedicated CSS in addition to the basic stylesheet. Here is an example where “sandbox.css” and “drawer.min.css” are loaded. This ensures that the styles are applied correctly, and the navigation menu displays as expected.


  <link href="sandbox.css" rel="stylesheet">
  <link href="./dist/css/drawer.min.css" rel="stylesheet">

By loading the required CSS files, the Drawer menu’s display and animations function properly.

HTML Structure for Implementing a Responsive Drawer Menu with Drawer

The HTML structure for a drawer menu using Drawer is very simple. As shown below, by understanding the basic structure, you can implement a menu that slides in from the left side. Additionally, Drawer can display menus from the top or bottom, allowing for flexible adaptation to your site design and goals.


<body class="drawer drawer--left">

  <header role="banner">
    <button type="button" class="drawer-toggle drawer-hamburger">
      <span class="sr-only">toggle navigation</span>
      <span class="drawer-hamburger-icon"></span>
    </button>

    <nav class="drawer-nav" role="navigation">
      <ul class="drawer-menu">
        <li><a class="drawer-brand" href="#">Drawer</a></li>
        <li><a class="drawer-menu-item" href="#">menu1</a></li>
        <li><a class="drawer-menu-item" href="#">menu2</a></li>
        <li><a class="drawer-menu-item" href="#">menu3</a></li>
        <li class="drawer-dropdown">
          <a class="drawer-menu-item" data-target="#" href="#" data-toggle="dropdown" role="button" aria-expanded="false">
            Pulldown <span class="drawer-caret"></span>
          </a>
          <ul class="drawer-dropdown-menu">
            <li><a class="drawer-dropdown-menu-item" href="#">submenu1</a></li>
            <li><a class="drawer-dropdown-menu-item" href="#">submenu2</a></li>
            <li><a class="drawer-dropdown-menu-item" href="#">submenu2</a></li>
          </ul>
        </li>
        <li><span class="drawer-menu-item">menu end</span></li>
      </ul>
    </nav>
  </header>

  <!-- content -->
  <main role="main">
    <section class="item">
      <h1 style="font-size: 14px;">The drawer menu will appear from the left.<br>Click the menu button at the top left or<br>the button below.</h1>
      <p>
        <button type="button" class="drawer-toggle">Drawer toggle</button>
      </p>
    </section>
  </main>

</body>

As seen in the above HTML, the basic structure of Drawer is very simple. The display position of the menu can be controlled by class names. For example, changing “drawer–left” to “drawer–right” makes the menu slide in from the right side.

JavaScript Code for Implementing a Responsive Drawer Menu with Drawer

To activate Drawer.js, you need to load the required JavaScript files and initialize them. Load jquery.min.js, iscroll.js, bootstrap.min.js, and drawer.min.js. The Drawer area is specified using $('Drawer area').drawer(), implementing the drawer menu in the designated area. Add the following code to your HTML to make the drawer menu function correctly:


  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="./dist/js/drawer.min.js" charset="utf-8"></script>
  <script>
    $(document).ready(function() {
      $('.drawer').drawer();
    });
  </script>

The JavaScript initialization is done inside $(document).ready(). This enables Drawer after the page loads, allowing the menu to slide in and out based on click operations. Drawer’s strength lies in its intuitive implementation with just a few lines of code.

Drawer Left Demo Page to Display a Drawer Menu from the Left

The demo page using Drawer.js allows you to experience a menu that slides in from the left. In this demo, you can see how the menu operates and test how each button and link functions in real time.

Drawer Left Demo to Display a Drawer Menu from the Left

Use this link to get ideas for incorporating a drawer menu into your own site while seeing its actual functionality.

Source: Drawer

The official repository of Drawer.js is available on GitHub. You can get the latest version, check sample code, and report bugs from the following link:

Drawer

Refer to the official repository to find the best settings for your project.

Conclusion

The Drawer.js introduced in this article is a powerful plugin that allows you to easily implement mobile-friendly drawer menus. Particularly in projects already using jQuery, you can introduce a drawer menu with minimal additional code, significantly improving user experience.

Navigation menus compatible with responsive design are indispensable elements of modern websites. Use Drawer.js to create a site that’s user-friendly for smartphone users as well.

　

* If you use this information, please do so at your own risk.
Do not reuse the Google Analytics tags in the demo page’s head tag.

Drawer Menu
RELATED POST