I have a website so far and I'm not sure how to have the entire navigation bar menu dropdown. In the demonstration, this is before the hover:

And after the hover:

I've been looking over the web on how to do this to my own Shopify website code. Does anyone have any tips or resources for what this type of drop-down menu is called?

CodePudding user response：

You want to drop full nav to down (its called fullscreen navigation downward). Here, is the example from w3schools.com

CodePudding user response：

You can use my Component Library for the navigation drop-down. Rebalance UI

CodePudding user response：

* {
        box-sizing: border-box;
    }

    body {
        margin: 0;
    }

    .navbar {
        overflow: hidden;
        background-color: #333;
        font-family: Arial, Helvetica, sans-serif;
    }

    .navbar a {
        float: left;
        font-size: 16px;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    .dropdown {
        float: left;
        overflow: hidden;
    }

    .dropdown .dropbtn {
        font-size: 16px;
        border: none;
        outline: none;
        color: white;
        padding: 14px 16px;
        background-color: inherit;
        font: inherit;
        margin: 0;
    }

    .navbar a:hover,
    .dropdown:hover .dropbtn {
        background-color: red;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        width: 100%;
        left: 0;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
    }

    .dropdown-content .header {
        background: red;
        /* padding: 16px; */
        color: white;
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }



    /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
    @media screen and (max-width: 600px) {
        .column {
            width: 100%;
            height: auto;
        }
    }

<div >
        <a href="#home">Home</a>
        <a href="#news">News</a>
        <div >
            <button >Dropdown
                <i ></i>
            </button>
            <div >
                <div >
                    <a href="">
                        <img src="https://i.picsum.photos/id/193/200/300.jpg?hmac=b5ZG1TfdndbrnQ8UJbIu-ykB2PRWv0QpHwehH0pqMgE" alt="" width="100" height="100">
                    </a>
                    <a href="">
                        <img src="https://i.picsum.photos/id/122/200/300.jpg?hmac=OfQ8cObBgD7BOhMjqNrjqHDjO-rXiNQ4KvSd8QRAuIA" alt="" width="100" height="100">
                    </a>
                    <a href="">
                        <img src="https://i.picsum.photos/id/834/200/300.jpg?hmac=9hu4aro5r8PEFwzVlhizygx4urxyeGGjgyMRXUgKOsE" alt="" width="100" height="100">
                    </a>
                </div>
            </div>
        </div>
    </div>

CodePudding user response：

if you want open dropdown with animation, use below code:

#dropdown{
   transition:1s;
}

This code will do the tasks you defined in 1 second