Dropdown Menu onclick Event using JavaScript

Dropdown Menu onclick Event using JavaScript
Code Snippet:clicky-menus
Author: Mark Root-Wiley
Published: January 11, 2024
Last Updated: January 22, 2024
Downloads: 23,892
License: MIT
Edit Code online: View on CodePen
Read More

The “clicky-menus” is a lightweight JavaScript plugin that helps you to create a dropdown menu onclick event. The menu comes with a one-level dropdown menu that can be opened with a click, tap, or keyboard enter/space key (when it is focused).

The plugin converts each parent item (dropdown link) to the button element to expand dropdowns. It supports mouse, touch, and keyboard interactions to toggle dropdowns. Similarly, the opened dropdown can be closed if a user clicks outside the menu. Moreover, the menu also works (with pure CSS) in case of JavaScript is disabled in the browser.

How to Create Dropdown Menu onclick Event

1. In order to create a dropdown menu onclick event, you need to getting started with clicky-menus plugin. So, load the clicky-menu CSS file into the head tag of your HTML page.

<!-- Clicky Menus CSS -->
<link rel="stylesheet" href="css/clicky-menu.css">

2. After that, create the HTML structure for the dropdown menu as follows. You only need to add your links to it.

<!-- dropdown arrow icon SVG to use with <use> -->
<svg xmlns="http://www.w3.org/2000/svg"  hidden>
	<symbol id="arrow" viewbox="0 0 16 16" >
		<polyline points="4 6, 8 10, 12 6" stroke="#000" stroke-width="2" fill="transparent" stroke-linecap="round" />
	</symbol>
</svg>
<nav id="site-navigation" class="site-navigation" aria-label="Dropdown Menu">
<ul class="main-menu clicky-menu no-js">
    <li>
        <a href="#">Home</a>
    </li>
    <li>
        <a href="#">
            Services
            <svg aria-hidden="true" width="16" height="16">
                <use xlink:href="#arrow" />
            </svg>
        </a>
        <ul>
            <li><a href="#">Design</a></li>
            <li><a href="#">Development</a></li>
            <li><a href="#">Accessibility</a></li>
            <li><a href="#">Content Strategy</a></li>
            <li><a href="#">Training</a></li>
        </ul>
    </li>
    <li>
        <a href="#">
            Portfolio
            <svg aria-hidden="true" width="16" height="16">
                <use xlink:href="#arrow" />
            </svg>
        </a>
        <ul>
            <li><a href="#">Nonprofits</a></li>
            <li><a href="#">Higher Education</a></li>
            <li><a href="#">Associations</a></li>
            <li><a href="#">Consultants</a></li>
        </ul>
    </li>
    <li>
        <a href="#">
            About
            <svg aria-hidden="true" width="16" height="16">
                <use xlink:href="#arrow" />
            </svg>
        </a>
        <ul>
            <li><a href="#">Mission</a></li>
            <li><a href="#">History</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </li>
</ul>
</nav>

3. Finally, load the “clicky-menus” JavaScript file before closing the body tag and done.

<!-- Clicky Menus JS -->
<script src="js/clicky-menus.js"></script>

That’s all! hopefully, this JavaScript plugin is helpful for you to create a dropdown menu onclick event. If you have any questions or suggestions, let me know by comment below.

2 thoughts on “Dropdown Menu onclick Event using JavaScript”

  1. Hello Sir,
    My case is that I want an OnClick Event in WordPress. I have created an Elementor Template that will form the Mega Menu. Then I placed an Image on my Header.

    Now, when that Image is clicked, I want it to load the Elementor Template like a Dropdown Mega Menu.

    How can you help me with this?

    Regards.

    Reply
    • Hi Cordial!
      You can attach a click event with your image and toggle the dropdown. To do so, set a unique id for the image and dropdown menu. Hide the dropdown by default and add a class to show that menu. Let suppose, you have following HTML:

      <img id="dropdwon_trigger"> 
      
      <div class="dropdwon_menu">
      <!-- Your mega menu goes here -->
      </div>
      

      And you have the following CSS:

      .dropdown_menu{
        display: none;
        /* Your other styles */
      }
      
      .dropdown.opened{
        display: block;
      }
      

      Now, you can toggle the “opened” class on click event to show/hide dropdown.

      (function($){
      
      $('#dropdown_trigger').on('click', function(){
      
         $('.dropdwon_menu).toggleClass('opened');
      
      });
      
      })(jQuery);
      

      It’s a simple solution, if you would like to share your WordPress site URL, I’ll provide you code accordingly. Have a good day!

      Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...