A drop-down menu that can be toggled using only HTML and CSS

Question

A drop-down menu that can be toggled using only HTML and CSS

Recently, I came across two helpful tip pages that explain how to use :hover to display a drop-down menu and the checkbox to toggle it open or closed.

After implementing it successfully, I encountered an issue with CSS styling. While styling the :hover state was easy, I struggled with styling the opened drop-down menu caused by toggling as there is no direct parent CSS selector for this. Ideally, I prefer not to rely on JavaScript for this solution.

I have included the code I managed to get working on JSfiddle below. Please note that the position of the checkbox is currently not a concern. My code

The particular section at the bottom of the CSS file is where the problem lies.

nav ul li #chktut:checked:parent {
        background: #4b545f;
        background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
        background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
        background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
    }

html css drop-down-menu

Answer 1

Answer №1

If you want to make the "tutorials" section clickable, you can achieve this by connecting a label to the chktut checkbox:

<li><input type="checkbox" id="chktut" /><label for="chktut">Tutorials</label>

To ensure the checkbox is hidden from view, simply set its display property to none:

#chktut{
   display: none;
}

Answer 2

If you want to make the "tutorials" section clickable, you can achieve this by connecting a label to the chktut checkbox:

<li><input type="checkbox" id="chktut" /><label for="chktut">Tutorials</label>

To ensure the checkbox is hidden from view, simply set its display property to none:

#chktut{
   display: none;
}

Answer 3

Answer №2

Creating this was a breeze. It's designed to be easily stylable without the need for javascript, and it adjusts beautifully on different screen sizes :D

<!doctype html>
<html>
    <head>
        <title>Sample Page</title>
        <style>
            .dropdown_link {
                background-color: #000;
                color: #eee;
                display: block;
                padding: 5px;
            }

            .fullWidth {
                width: 100%;
            }

            .hover:hover {
                background-color: #408FFF;
            }

            .menu_container {
                border: 0;
                margin: 0 0 10px 0;
                padding: 0;
            }

            .menu_dropdown_container:hover ul {
                display: table;
            }

            .menu_dropdown_list {
                display: none;
                padding: 0;
                position: absolute;
            }

            .menu_item {
                display: table-cell;
                background-color: #eee;
                text-align: center;
            }

            .menu_link {
                background-color: #6FA8F7;
                color: #eee;
                display: block;
                padding: 10px 0;
                width: 100%;
            }

            .menu_list {
                display: table;
                margin: 0;
                padding: 0;
            }

            .no_decoration {
                text-decoration: none;
            }

            .no_bullets {
                list-style: none;
            }

            @Media screen and (max-width:480px) {
                .menu_item, .dropdown_item, .menu_dropdown_list {
                    display: block;
                    width: 100%;
                }

                .menu_dropdown_list {
                    position: static;
                }
            }
        </style>
    </head>
    <body>
        <div class="menuContainer fullWidth">
            <ul class="fullWidth menu_list no_bullets">
                <li class="menu_item">Your logo goes here</li>
                <li class="menu_item"><a class="menu_link hover no_decoration" href="#">Home</a></li>
                <li class="menu_item menu_dropdown_container">
                    <a href="#" class="menu_link hover no_decoration">Products</a>
                    <ul class="menu_dropdown_list no_bullets">
                        <li class="dropdown_item"><a class="dropdown_link no_decoration" href="#">For your home</a></li>
                        <li class="dropdown_item"><a class="dropdown_link no_decoration" href="#">For your enterprise</a></li>
                        <li class="dropdown_item"><a class="dropdown_link no_decoration" href="#">For babies</a></li>
                        <li class="dropdown_item"><a class="dropdown_link no_decoration" href="#">For Flying cats trying to conquer the world</a></li>
                    </ul>
                </li>
                <li class="menu_item"><a href="#" class="menu_link hover no_decoration">Company</a></li>
                <li class="menu_item"><a href="#" class="menu_link hover no_decoration">Blog</a></li>
            </ul>
        </div>
    </body>
</html>

Answer 4

Creating this was a breeze. It's designed to be easily stylable without the need for javascript, and it adjusts beautifully on different screen sizes :D

<!doctype html>
<html>
    <head>
        <title>Sample Page</title>
        <style>
            .dropdown_link {
                background-color: #000;
                color: #eee;
                display: block;
                padding: 5px;
            }

            .fullWidth {
                width: 100%;
            }

            .hover:hover {
                background-color: #408FFF;
            }

            .menu_container {
                border: 0;
                margin: 0 0 10px 0;
                padding: 0;
            }

            .menu_dropdown_container:hover ul {
                display: table;
            }

            .menu_dropdown_list {
                display: none;
                padding: 0;
                position: absolute;
            }

            .menu_item {
                display: table-cell;
                background-color: #eee;
                text-align: center;
            }

            .menu_link {
                background-color: #6FA8F7;
                color: #eee;
                display: block;
                padding: 10px 0;
                width: 100%;
            }

            .menu_list {
                display: table;
                margin: 0;
                padding: 0;
            }

            .no_decoration {
                text-decoration: none;
            }

            .no_bullets {
                list-style: none;
            }

            @Media screen and (max-width:480px) {
                .menu_item, .dropdown_item, .menu_dropdown_list {
                    display: block;
                    width: 100%;
                }

                .menu_dropdown_list {
                    position: static;
                }
            }
        </style>
    </head>
    <body>
        <div class="menuContainer fullWidth">
            <ul class="fullWidth menu_list no_bullets">
                <li class="menu_item">Your logo goes here</li>
                <li class="menu_item"><a class="menu_link hover no_decoration" href="#">Home</a></li>
                <li class="menu_item menu_dropdown_container">
                    <a href="#" class="menu_link hover no_decoration">Products</a>
                    <ul class="menu_dropdown_list no_bullets">
                        <li class="dropdown_item"><a class="dropdown_link no_decoration" href="#">For your home</a></li>
                        <li class="dropdown_item"><a class="dropdown_link no_decoration" href="#">For your enterprise</a></li>
                        <li class="dropdown_item"><a class="dropdown_link no_decoration" href="#">For babies</a></li>
                        <li class="dropdown_item"><a class="dropdown_link no_decoration" href="#">For Flying cats trying to conquer the world</a></li>
                    </ul>
                </li>
                <li class="menu_item"><a href="#" class="menu_link hover no_decoration">Company</a></li>
                <li class="menu_item"><a href="#" class="menu_link hover no_decoration">Blog</a></li>
            </ul>
        </div>
    </body>
</html>

Answer 5

Answer №3

After experimenting on JS fiddle, I have successfully implemented a functional solution. The styling and mechanism are complete, and I hope that it can be beneficial to others. This feature is particularly advantageous for mobile users, allowing them to navigate through all pages efficiently without the need to load JavaScript or navigate multiple pages.

The code is available entirely on JS Fiddle, and there are no restrictions to its usage. Feel free to utilize it as needed.

Answer 6

After experimenting on JS fiddle, I have successfully implemented a functional solution. The styling and mechanism are complete, and I hope that it can be beneficial to others. This feature is particularly advantageous for mobile users, allowing them to navigate through all pages efficiently without the need to load JavaScript or navigate multiple pages.

The code is available entirely on JS Fiddle, and there are no restrictions to its usage. Feel free to utilize it as needed.

A drop-down menu that can be toggled using only HTML and CSS

Answer №1

Answer №2

Answer №3

Similar questions

developing educational material that can be unlocked

Technique for structuring and managing CSS resources in Angular.js

Troubleshooting: Style Conflict Between Select2 and JqueryValidator

Issues have been identified with the performance of Ionic Material List when used in conjunction with ng

What is the best way to give this CSS button a "highlight" effect when it is clicked using either CSS3 or JavaScript?

Having issues with nth-child? It seems like nth-of-type isn't working either

Is there a way to dynamically update the target of a form using JavaScript?

What is the process for setting up a bootstrap grid with a single column at the top and two columns

JavaScript - A simple way to retrieve the dimensions of an image consistently

Just finished my first webpage - can't seem to get the footer to stay put!

Sending various values to a JavaScript function

I'm having trouble getting the height of my div element to render in percentage (%) in the CSS. Can anyone assist me with this issue?

Set a placeholder for the editable div if it does not contain any text

The livestream table appears to be experiencing delays in updating as expected

iOS7 webkit introduces a new feature called span word break

Support for SVG Sprites is limited in Internet Explorer and Safari, causing compatibility issues with SVG functionality

Bulma inquired, "What is the best way to position a button at the center of a

How to turn off pinch to zoom feature in Mozilla Firefox on a Microsoft tablet or touch screen display

What is the best way to include an href link in my SharePoint button?

Is it possible to link content to various div elements simultaneously?