He estado buscando por la web el cómo colocar un dropdown en la barra de navegación. El resultado fue fácil, pero ahora quería implementar otro código de un dropdown solo que filtraba el contenido.
Intenté ponerlo todo junto en el mismo sitio y salió a medias. No consigo que quede del todo bien.
Este es el código que tengo:
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
#myInput {
box-sizing: border-box;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
}
#myInput:focus {outline: 3px solid #ddd;}
.show {display: block;}
a {
display: flex;
align-items: center;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="navbar">
<a href="#inicio">
<i class="material-icons" style="font-size:24px; color: white">home</i>Inicio</a>
<a href="#noticias">
<i class="material-icons" style="font-size:24px; color: white">map</i>Noticias</a>
<div class="dropdown" style="float:right">
<button onclick="myFunction()" class="dropbtn">Buscar
<i class="material-icons" style="font-size:24px; color: white">search</i>
</button>
<div class="dropdown-content">
<input type="text" placeholder="Buscar..." id="myInput" onkeyup="filterFunction()">
<a href="#">Casa</a>
<a href="#">Hotel</a>
<a href="#">Piso</a>
</div>
</div>
</div>
</body>
<script>
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
</script>
</html>
Esto ha sido un intento de fusión del filtro del dropdown con el dropdown en el menú al no encontrar nada parecido...
Como se puede apreciar, está más abajo que el resto y si busca algo no lo filtra.
Me gustaría que quedase alineado con el resto y que, bueno, que funcione como lo que pretende ser. Muchas gracias.