Unleash the Power of Dropdown Menus

A useful and space-saving way for visitors to access a variety of options, dropdown menus are an essential component of web design. This thorough tutorial will cover the principles of dropdown menus, their significance in web design, and how to improve their usability and appearance using CSS pseudo-elements::before and ::after.

Dropdown menus, sometimes referred to as drop-down menus, are interactive components that are frequently seen in user interfaces. Usually, they are made up of a parent element, such a button or link, that, when clicked, exposes a concealed list of options. These choices may consist of form choices, navigational links, or other interactive components. (Read Multilevel Dropdown navigation)

Enhancing Dropdowns with CSS Pseudo-elements

Let’s examine an example 1 : to see how CSS pseudo-elements can be used to create a Basic-level dropdown menu:

output:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
        rel="stylesheet">
    <style>
        body {

            font-family: "Montserrat", sans-serif;
            font-optical-sizing: auto;
            font-style: normal;
        }

        .dropdown {
            position: relative;
            /* Make the dropdown container the reference point */
            width: 200px;
            display: inline-block;
        }

        .dropdown-toggle {
            padding: 20px 15px;
            border: none;
            background-color: #008CBA;
            cursor: pointer;
            width: 100%;
            color: white;
            font-size: 16px;
            font-weight: 400;
        }

        .dropdown-menu {
            display: none;
            /* Hide the menu initially */
            position: absolute;
            left: 0;
            background-color: #ffffff;
            list-style: none;
            padding: 0;
            width: 100%;
            margin: 0;
            padding: 0;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 1;
        }

        .dropdown-menu li {
            display: block;
        }

        .dropdown-menu li a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            font-size: 14px;
        }

        /* Change color of dropdown links on hover */
        .dropdown-menu li a:hover {
            background-color: #f1f1f1
        }

        .dropdown:hover .dropdown-menu {
            /* Show the menu on hover */
            display: block;
        }

        /* Dropdown arrow using ::after */
        .dropdown-toggle:after {
            content: "";
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            /* Center the arrow vertically */
            border-style: solid;
            border-color: #ffffff transparent transparent transparent;
        }
    </style>

</head>

<body>
    <div class="dropdown">
        <button class="dropdown-toggle">Select an Option</button>
        <ul class="dropdown-menu">
            <li><a href="#">Option 1</a></li>
            <li><a href="#">Option 2</a></li>
            <li><a href="#">Option 3</a></li>
        </ul>
    </div>

</body>

</html>

Conclusion

Dropdown menus are an essential component of web design, providing users with a simple and fast method to explore webpages, enter data, and perform contextual actions. Using CSS pseudo-elements::after and::before, designers can improve the functionality and aesthetics of dropdown menus, resulting in visually appealing and user-friendly interfaces. Experiment with these strategies on your own projects to fully see the potential of dropdown menu design and improve your web design skills.

(Read Multi-level dropdown here)

Unleash the Power of Dropdown Menus

Understanding Dropdown Menus

Enhancing Dropdowns with CSS Pseudo-elements

Conclusion