2

Estoy haciendo una pagina web y he puesto un "DropDownButton". A mi me gustaria poder darle a click en todas las partes del boton, pero solo funciona si doy click en la parte superior del boton. Aqui un video de lo que me pasa: https://gyazo.com/eeb539544445735b23434ed69f7db3af

Aqui el CSS y HTML (puede que haya algun fallo en el script, ya que soy principiante, si hay, porfavor decidmelo):

.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>

2
  • Y porque no pones la imagen de fondo? así evitas ese div tambie, creo que lo que genera conflicto es el div porque superpones el div arriba del button, entonces esto hace que el boton se quede debajo y lo que accionas no es el boton sino el div... Juega con el CSS
    – cignius
    el 9 nov. 2016 a las 13:22
  • En Firefox funciona pero no en Chrome. De todas formas no es correcto meter un div en un button
    – user7176
    el 9 nov. 2016 a las 13:29

1 respuesta 1

2

El problema principal que tienes es que haz metido elementos dentro del <button>.

Te lo he solucionado poniendo la imagen como background al <button> y eliminando el elemento <div>.

(He reducido el código un poco para demostración)

.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:

Te dejo una version sin 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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.