Me gustaria que hubiera una barra en la parte de abajo de mi web y cuando yo clicase se desplegase un panel y hubiera un texto
HTML
<div class="navbar">
<button class="dropdown-btn">Menú</button>
<div class="dropdown-content">
<a href="#">Pruebas</a>
<a href="#">Pruebas1</a>
<a href="#">Pruebas2</a>
</div>
</div>
CSS
.navbar {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
background-color: rgba(51, 51, 51, 0.7);
color: #fff;
border: 1px solid #444;
border-radius: 5px;
padding: 10px;
}
Estilo para el botón desplegable
.dropdown-btn {
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
}
Estilo para el contenido desplegable
.dropdown-content {
display: none;
position: absolute;
background-color: #333;
min-width: 160px;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
z-index: 1;
}
Estilo para las opciones del menú
.dropdown-content a {
color: #fff;
padding: 12px 16px;
text-decoration: none;
display: block;
}
Estilo para el input y botón de añadir información
.info-input {
padding: 10px;
display: flex;
flex-direction: column;
}
Mostrar el menú desplegable cuando se pasa el ratón sobre el botón
.navbar:hover .dropdown-content {
display: block;
}