Bug with dropdownbutton

Question

Bug with dropdownbutton

Navigation

#1 by (2 votes)

2

I'm making a website and I've put a "DropDownButton". I would like to be able to click on all the parts of the button, but it only works if I click on the top part of the button. Here is a video of what happens to me: link

Here is the CSS and HTML (there may be a bug in the script, since I am a beginner, if there is, please tell me):

.dropbtn {
    background-color: #e0e0e0;
    color: black;
    padding: 16px;
    font-size: 30px;
    border: none;
    cursor: pointer;
	position:fixed;
	left: 9px;
	top:146px;
    width: 15.6%;
	height: 55px;
	font-family: Times New Roman;


}


}
.text_btn {
	position:fixed;
	left: 48px;
	top:140px;

}

.dropbtn:hover, .dropbtn:focus {
    background-color: #4dd6e2;
	color:white;
}
.dropbtn_active {
 
    padding: 16px;
    font-size: 30px;
    border: none;
    cursor: pointer;
	position:fixed;
	left: 9px;
	top:146px;
    width: 13.3%;
	height: 3.6%;
	font-family: Times New Roman;
	background-color: #309ba5;
    color: white;
}

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

height:30px;
width:30px;
border:0px;
position:fixed;
top:167px;
left:8px;
}

.active {    
background-color: #309ba5;
color: white;
}

.dropdown-content {
    display: none;
    position: fixed;
    background-color: #f9f9f9;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    left: 10px;
	top:202px;
	
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
	font-size:27px;
	text-align:left;
}

.dropdown a:hover {background-color: #e2e2e2}

.show {display:block;}

<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">
<div class="text_btn">Multimedia</div>
<img class="icon_dropdown" src="dropdown_icon.png" alt="icon_dropdown">

</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="mp4.html">MP4</a>
    <a href="png.html">PNG</a>
    <a href="gif.html">GIF</a>
  </div>
</div>

<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>

html css

asked by JuanVan12 09.11.2016 в 13:46

source

1 answer

Open URL from EditText Save data to files

score 2 · Accepted Answer

The main problem you have is that you have put elements within <button> .

I've fixed it by putting the image as a background at <button> and removing the element <div> .

(I've reduced the code a bit for demonstration)

.dropbtn {
    background: #e0e0e0 url('https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-08-128.png') no-repeat 0;
    background-size: 25px 25px;
    color: black;
    padding: 16px 25px;
    font-size: 30px;
    border: none;
    outline: none;
    cursor: pointer;
    font-family: Times New Roman;
}

.active {    
  background-color: #309ba5;
  color: white;
}

.dropdown {
  width: 190px;
}

.dropdown-content {
    display: none;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);	
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size:27px;
}

.dropdown a:hover {background-color: #e2e2e2}

.show {display:block;}

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Multimedia</button>
  
  <div id="myDropdown" class="dropdown-content">
    <a href="mp4.html">MP4</a>
    <a href="png.html">PNG</a>
    <a href="gif.html">GIF</a>
  </div>
  
</div>

<script>
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>

UPDATE:

I leave you a version without Javascript :

body {
  font-family: 'Calibri', sans-serif;
}

a {
  width: 100%;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  border: 0;
  outline: 0;
}

.navbar {
  width: 200px;
  font-size: 1.3rem;
}

.navbar > li {
  text-align: left;
  display: block;
}

.navbar-menu {
  padding: 10px;
  color: #000;
}

.navbar-menu:hover {
  background-color: #2f99a3;
  color: #fff;
}

.dropdown > a:focus {
  color: #fff;
  background-color: #3fc5d2;
}

.dropdown {
  position:relative;
}

.dropdown > ul {
  width: 100%;
  margin: 0;
  padding: 0 20px 0 0;
  box-shadow: 0 1px 2px #ccc;
  color: #000;
  list-style: none;
  position: absolute;
  display: none;
}

.dropdown > ul > li > a {  
  font-size: 1rem;
  padding: 10px;
  color: #000;
}

.dropdown > ul li a:hover {  
  background-color: #29ddef;
  color: #fff;
}

.dropdown.dropdown-click a:focus + ul {
  top: 46px;
  display:block;
}

<ul class='navbar'>
  <li><a class="navbar-menu" href="#">Home</a></<li>
  <li><a class="navbar-menu" href="#">Contact</a></<li>  
  <li class='dropdown dropdown-click'>
    <a href="#" class="navbar-menu">Multimedia</a>
    <ul>
      <li><a href="#">MP4</a></li>
      <li><a href="#">PNG</a></li>
      <li><a href="#">GIF</a></li>
    </ul>
  </li>  
</ul>