CODEWITHSUNDEEP
htmlcssdrop-down-menu
Samuel Charpentier
Samuel Charpentier

Reputation: 609

Pure HTML and CSS toggleable drop-down menu

So I've found these two tip pages where the principle is explained: use :hover to make the drop-down show up and the checkbox to toggle it open or closed

I got it to sot of work but I have issue when I come to CSS styling. It's pretty simple to style the :hover state. What isn't so simple is to style the toggled open drop down menu since where's to parent CSS selector. I really want not to use JavaScript.

So I paste the code I got to sort of workingon JSfiddle. The position of the check box isn't important for now. My code

this part(at the bottom of th css) is the problem.

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%);
    }

Upvotes: 1

Views: 1768

Answers (3)

Samuel Charpentier
Samuel Charpentier

Reputation: 609

So what I've done on JS fiddle seems to work. I have done styling and mechanism. Hope it can help someone. It's pretty useful for the mobile (so they can quickly go through all pages without having to load Javascript or go on a page to leave it directly for a sub page, where they really want to go to.)

my code is entirely on JS Fiddle, no rights or anything is required to use, it's free, take it.

Upvotes: 0

user3303864
user3303864

Reputation:

I have made this. It's easy to style and uses no javascript, and it's also responsive :D

<!doctype html>
<html>
    <head>
        <title>teste</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 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>

Upvotes: 1

diynevala
diynevala

Reputation: 553

To make the "tutorials" clickable, use label that is connected to chktut:

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

To hide the checkbox, set it's display to none:

#chktut{
   display: none;
}

Upvotes: 1

Related Questions