How To Make A Drop Down Menu From An Icon In A Navbar?

I have created my dropdown menu to open on hover of the icon, but I want it to actually open on click instead of hover and close when clicked outside the menu. The icon is a simple

Solution 1:

The only way I know of to do this with just CSS is using a checkbox to transition up/down the menu. I see you're using an input tag, so maybe there's another pure CSS way to do this.

Using jQuery, you can get the desired effect using slideToggle()

$(".icon").on("click", function(){
  $('.dropdown-content').slideToggle();
});

.search {
    display: block;
    margin-left: 1300px;
    margin-right: auto;
    margin-bottom: auto;
    margin-top: -30px;
    cursor: pointer;
}

.burger-menu {
    display: block;
    margin-left: 100px;
    margin-right: auto;
    margin-bottom: auto;
    margin-top: 1px;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #000000;
    min-width: 250px;
    z-index: 1;
}

.dropdown-contenta {
    color: white;
    padding: 30px16px;
    text-align: center;
    text-decoration: none;
    display: block;
    box-shadow: 08px16px0rgba(0, 0, 0, 0.2), 06px20px0rgba(0, 0, 0, 0.19);
    font-size: 24px;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}

.dropdown:hover.dropbtn {
    background-color: #ffffff;
}


/*# sourceMappingURL= main.css.map */

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><nav><divclass="dropdown"><h3class="icon">MY ICON</h3><divclass="dropdown-content"><ahref="#">HEADWEAR</a><ahref="#">HOODIES/JACKETS/LONG SLEEVES</a><ahref="#">SHIRTS</a><ahref="#">BOTTOMS</a><ahref="#">TOTE BAGS</a></div></div><imgclass="search"src="images/search-icon.png"width="30"height="30"></nav>

Solution 2:

you need to use

$('.burger-menu').click(function(){
  $('.dropdown-content').toggleClass('show');
});
$(document).click(function(event) { 
    if(!$(event.target).closest('.burger-menu').length) {
        if($('.dropdown-content').is(":visible")) {
            $('.dropdown-content').toggleClass('show');
        }
    }        
});

$(document).ready(function(){
$('.burger-menu').click(function(){
  $('.dropdown-content').toggleClass('show');
});
$(document).click(function(event) { 
    if(!$(event.target).closest('.burger-menu').length) {
        if($('.dropdown-content').is(":visible")) {
            $('.dropdown-content').toggleClass('show');
        }
    }        
});
});

.search {
	display: block;
	margin-left: 1300px;
	margin-right: auto;
	margin-bottom: auto;
	margin-top: -30px;
	cursor: pointer;
}

.burger-menu {
	display: block;
	margin-left: 100px;
	margin-right: auto;
	margin-bottom: auto;
	margin-top: 1px;
	cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #000000;
    min-width: 250px;
    z-index: 1;
}

.dropdown-contenta {
    color: white;
    padding: 30px16px;
	text-align: center;
    text-decoration: none;
    display: block;
	box-shadow: 08px16px0rgba(0,0,0,0.2), 06px20px0rgba(0,0,0,0.19);
	font-size: 24px;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}

.dropdown-contenta:hover {
	background-color: #ffffff;
	color: black;
}

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

.dropdown:hover.dropbtn {
    background-color: #ffffff;
}

<linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><nav><divclass="dropdown"><iclass="fa fa-bars fa-2x burger-menu" ></i><divclass="dropdown-content"><ahref="#">HEADWEAR</a><ahref="#">HOODIES/JACKETS/LONG SLEEVES</a><ahref="#">SHIRTS</a><ahref="#">BOTTOMS</a><ahref="#">TOTE BAGS</a></div></div><imgclass="search"src="images/search-icon.png"width="30"height="30"></nav>