Creating Drop Down Menu on Click CSS

Creating Drop Down Menu on click CSS

CSS does not have a click handler. For this reason it is impossible to do with standard CSS. You could use something called the checkbox hack, but in my humble opinion, it's a bit clunky and would be awkward to work with inside a navigation menu like your use-case requires. For this reason I would suggest jQuery or Javascript... Here is a rather simple solution using jQuery.

Basically, we hide the sub-nav from the start using display: none; Then, using jQuery, when ".parent" is clicked we toggle a class ".visible" to the sub-nav element (the nested UL) with display: block; which makes it appear. When clicked again, it disappears as the class is removed.

Note that for this to work, every nested <UL> which is a "sub-nav" MUST have the .sub-nav class, and it's parent element (the <LI>) MUST have the .parent class. Also, since this uses jQuery, you will need to hook up a jQuery library to your site. You can do this by hosting it yourself and linking it like you normally would, or you can link it from google's library service (recommended).

JSFiddle Demo

$(document).ready(function() {  $('.parent').click(function() {    $('.sub-nav').toggleClass('visible');  });});

#nav ul.sub-nav {  display: none;}
#nav ul.visible {  display: block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ul id="nav">  <li>Home</li>  <li class="parent">About    <ul class="sub-nav">      <li>Johnny</li>      <li>Julie</li>      <li>Jamie</li>    </ul>  </li>  <li>Contact</li></ul>

Making drop down menu by click using css

You can trigger a css click using a hack!!

Work with an checkbox!!

Sample:

      ul{            display: none;        }        #checkbox{            opacity: 0;        }        #checkbox:checked + ul {                        display: block;        }

    <div class="container">        <label for="checkbox">Dropdown menu</label>        <input id="checkbox" type="checkbox" />                <ul>            <li><a href="#">Dropdown link 1</a></li>            <li><a href="#">Dropdown link 2</a></li>        </ul>    </div>

Pure CSS clickable dropdown?

Here you are using a hidden checkbox, and showing the menu when it is "checked".

/*hide the inputs/checkmarks and submenu*/input, ul.submenu {  display: none;}
/*position the label*/label {  position: relative;  display: block;  cursor: pointer;}
/*show the submenu when input is checked*/input:checked~ul.submenu {  display: block;}

<input id="check01" type="checkbox" name="menu" /><label for="check01">Menu</label><ul class="submenu">  <li><a href="#">Item 1</a></li>  <li><a href="#">Item 2</a></li></ul>

Making an image clickable for a dropdown menu

You mean this?

You really should resize the image to the exact size of your button

/* When the user clicks on the button, 
    toggle between hiding and showing the dropdown content */
document.getElementById("drop").addEventListener("click", function(e) {
  document.getElementById("myDropdown").classList.toggle("show");
});

// Close the dropdown if the user clicks outside of it
window.addEventListener("click", function(event) {
  if (!event.target.matches('.dropbtn')) {
    document.querySelectorAll(".dropdown-content.show")
      .forEach(openDropdown => openDropdown.classList.remove('show'))
  }
});

.dropbtn {
  color: white;
  padding: 16px;
  font-size: 16px;
  border: 1px solid black;
  cursor: pointer;
  background: url(https://boys-cry.com/wp-content/uploads/2022/04/bc_logo_black.png);
  background-repeat: no-repeat;
  background-size: 100px 50px;
}

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

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #00000000;
  min-width: 200px;
  z-index: 1;
  margin-top: 20px;
}

.dropdown-content a {
  color: black;
  font-family: helvetica;
  padding: 5px 5px;
  text-decoration: none;
  display: block;
}

hr.solid {
  border-left: none;
  border-right: none;
  border-top: 1px solid #000000;
  border-bottom: none;
}

.show {
  display: block;
}

<div class="dropdown">
  <button id="drop" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <hr class="solid">
    <a href="#">WE</a>
    <hr class="solid">
    <a href="#">CLIENTS</a>
    <hr class="solid">
    <a href="mailto:info@boys-cry.com">GET IN TOUCH</a>
    <hr class="solid">
  </div>
</div>

CSS Dropdown menu onclick

this code works for me. hope will help ...

  <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>On click Menu</title>
        <style>
            .handle{
                width: 100%;
                background:#333333;
                text-align: left;
                box-sizing: border-box;
                padding:15px 10px;
                cursor: pointer;
                color: white;
                box-sizing: border-box;
            }

            .hide {
                display: none;
            }
        </style>
    </head>
    <body>
        <nav>
            <div class="handle">Menu</div>
            <ul class="hide">
                <li><a id="active" href="index.html">HOME</a></li>
                <li><a href="collection.html">PRODUCTS</a></li>
                <li><a href="events.html">EVENTS</a></li>
                <li><a href="info.html">CONTACT</a></li>
            </ul>
        </nav>

        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script>

            $(document).ready(function() {
                $('.handle').on('click', function() {
                    $('nav ul').slideToggle();
                });
            });

        </script>
    </body>
</html>

---

Related Topics