Dropdown Menu onclick Event using JavaScript

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.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.