Skip to main content

jQuery Drop-Down Menu Example

jQuery Drop-Down Menu Example

Have you ever created the drop-down menu using jQuery? No, let's create a simple drop-down menu using jQuery:

Step 1: Create the HTML File

Create a new file named suckerfish.html and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Learn how to create a simple drop-down menu using jQuery. This guide includes a concise code example and clear explanations.">
    <meta name="keywords" content="jQuery, drop-down menu, JavaScript, web development">
    <title>jQuery Drop-Down Menu Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
    $(document).ready(function() {
        $("#menu li").hover(
            function() {
                $("ul", this).stop(true, true).slideDown("slow");
            },
            function() {
                $("ul", this).stop(true, true).slideUp("slow");
            }
        );
    });
    </script>
</head>
<body>
    <ul id="menu">
        <li>
            <a href="#item1">Item A</a>
            <ul>
                <li><a href="#itemA1">Item A1</a></li>
                <li><a href="#itemA2">Item A2</a></li>
                <li><a href="#itemA3">Item A3</a></li>
                <li><a href="#itemA4">Item A4</a></li>
            </ul>
        </li>
        <li>
            <a href="#item2">Item B</a>
            <ul>
                <li><a href="#itemB1">Item B1</a></li>
                <li><a href="#itemB2">Item B2</a></li>
            </ul>
        </li>
        <li>
            <a href="#item3">Item C</a>
            <ul>
                <li><a href="#itemC1">Item C1</a></li>
                <li><a href="#itemC2">Item C2</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>

Code Explanation

This example demonstrates how to create a simple drop-down menu using jQuery:

  • Include jQuery: The script tag includes the jQuery library from a CDN.
  • Menu Behavior: The jQuery code listens for hover events on list items. When you hover over a list item, the sub-menu slides down. When you stop hovering, the sub-menu slides up.
  • HTML Structure: The menu is created using an unordered list (ul) with nested lists for the drop-down items.

Comments

Post a Comment