How to make a drop down menu from an icon in a navbar?

Question

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 burger menu icon on the left hand side of the navbar which opens a dropbar that is attached to the left hand side of the page. How would I achieve what I want to with minimal change to my code?

.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-content a {
    color: white;
    padding: 30px 16px;
 text-align: center;
    text-decoration: none;
    display: block;
 box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(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-content a:hover {
 background-color: #ffffff;
 color: black;
}

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

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

 <nav>
 <div class="dropdown">
  <input type="image" width="30" height="30" src="images/burger-menu.png" class="burger-menu" />
  <div class="dropdown-content">
    <a href="#">HEADWEAR</a>
    <a href="#">HOODIES/JACKETS/LONG SLEEVES</a>
    <a href="#">SHIRTS</a>
    <a href="#">BOTTOMS</a>
    <a href="#">TOTE BAGS</a>
  </div>
</div>
 <img class="search" src="images/search-icon.png" width="30" height="30">
 </nav>

no JS yet as that is my question, how do I make it open on click? — Mack, Oct 18 '17 at 06:45

score 2 · Answer 1 · answered Oct 18 '17 at 06:59

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-content a {
    color: white;
    padding: 30px 16px;
    text-align: center;
    text-decoration: none;
    display: block;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(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 */

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

this is for text, I need users to click on an icon to activate the menu not text — Mack, Oct 19 '17 at 01:54

Hiren Vaghasiya · Accepted Answer · 2017-10-21T06:03:45.213

1

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-content a {
    color: white;
    padding: 30px 16px;
 text-align: center;
    text-decoration: none;
    display: block;
 box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(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-content a:hover {
 background-color: #ffffff;
 color: black;
}

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

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<nav>
 <div class="dropdown">
  <i class="fa fa-bars fa-2x burger-menu" ></i>  
<div class="dropdown-content">
    <a href="#">HEADWEAR</a>
    <a href="#">HOODIES/JACKETS/LONG SLEEVES</a>
    <a href="#">SHIRTS</a>
    <a href="#">BOTTOMS</a>
    <a href="#">TOTE BAGS</a>
  </div>
</div>
 <img class="search" src="images/search-icon.png" width="30" height="30">
 </nav>

edited Oct 21 '17 at 06:03

answered Oct 18 '17 at 07:05

Hiren Vaghasiya

5,454
1
11
25

hi there, this is what i'm after, although it doesn't seem to be working.. It says that there is an error in the Javascript on line 3 column 3 (missing "use strict" statement) and line 6 column 5 (missing "use strict" statement). – Mack Oct 18 '17 at 12:17
There is not javascript error,it doesn't causes error refer it,https://stackoverflow.com/questions/34801316/missing-use-strict-statement – Hiren Vaghasiya Oct 18 '17 at 15:47
I fixed this javascript problem, however it still doesnt seem to be working? – Mack Oct 18 '17 at 15:49
either way, the button doesnt seem to be functioning, any idea what the problem is? thanks (btw im very new to coding) – Mack Oct 18 '17 at 15:50
In Snippet, its working properly button click perform function propely and outside click also working.one thing you need to remember add jquery before custom click function so may be your issue will be solve – Hiren Vaghasiya Oct 18 '17 at 16:18
And other way use menuit instead of input and check – Hiren Vaghasiya Oct 18 '17 at 16:29
will that allow me to use an image as the button? – Mack Oct 19 '17 at 01:30
Take <img src="pathname"/> inside div insted of span – Hiren Vaghasiya Oct 19 '17 at 01:49
please check my answer It is the code I currently have that isn't working – Mack Oct 19 '17 at 01:57
Hello @mack sorry i am unable to check your answer because in india it is diwali and i am traveling so i am answering from mobile.....so it is take time to check your issue in real device in dreamweaver,sorry for that – Hiren Vaghasiya Oct 19 '17 at 02:05
@Mack i have changed some code and update jquery and check in dreamveawer perfectly working,check also in https://jsfiddle.net/831kpf7n/1/ and now update in your code also ,it will work – Hiren Vaghasiya Oct 21 '17 at 06:08

How to make a drop down menu from an icon in a navbar?

2 Answers2

Linked