0

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;
}

1 respuesta 1

1

esto fue lo mas parecido que pude hacer con la ayuda de varias paginas, espero que te sirva

html


    <footer>
    <div class="menu" id="menu">
    <nav id="navega"><ul >
    <li><a href="#">prueba 1</a>   </li>
    <li><a href="#">prueba 1</a></li>
    <li><a href="#">prueba 1</a></li>
    <li><a href="#">prueba 1</a></li>
        
    </ul></nav>
    Menu
    
    </div>
    </footer>

Css

@import url(https://fonts.googleapis.com/css?family=Roboto);
* {
  
  margin:0;
  padding:0;
}

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


nav {
  
  width:100%;
     max-height:0px;
  overflow:hidden;
  transition: 1s all; 
 
}
.mostrar {
      max-height:500px;
 
 
 
}
nav ul {
  
  list-style:none;
  display: flex;
  width:100%;
}
nav ul li{
  margin-right: 30px;
  width: 20%;
}
nav ul li a{
  
  
 text-decoration:none;
  display:flex;
  line-height:50px;
  border-bottom:1px solid #222;
  background-color:#03EBA6;
  color:#222;
  font-size:1.2em;
  padding:10px;
}

nav ul li a:hover {
  
  
  background-color:#222;
  color:#fff;
}

.menu {
  
  padding:20px;
  background-color:#222;
  color:#fff;
  width:15%;
  cursor:pointer;  
 position: fixed;
            bottom: 0;
            width: 100%;
            text-align: center;
}
footer{
  position: fixed;
            bottom: 0;
            width: 100%;
            text-align: center;
}

Js

document.getElementById("menu").addEventListener("click",function(){
  
  document.getElementById("navega").classList.toggle("mostrar");
});

document.getElementById("menu").addEventListener("click",function(){
  
  document.getElementById("navega").classList.toggle("mostrar");
});
@import url(https://fonts.googleapis.com/css?family=Roboto);
* {
  
  margin:0;
  padding:0;
}

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


nav {
  
  width:100%;
     max-height:0px;
  overflow:hidden;
  transition: 1s all; 
 
}
.mostrar {
      max-height:500px;
 
 
 
}
nav ul {
  
  list-style:none;
  display: flex;
  width:100%;
}
nav ul li{
  margin-right: 30px;
  width: 20%;
}
nav ul li a{
  
  
 text-decoration:none;
  display:flex;
  line-height:50px;
  border-bottom:1px solid #222;
  background-color:#03EBA6;
  color:#222;
  font-size:1.2em;
  padding:10px;
}

nav ul li a:hover {
  
  
  background-color:#222;
  color:#fff;
}

.menu {
  
  padding:20px;
  background-color:#222;
  color:#fff;
  width:15%;
  cursor:pointer;  
 position: fixed;
            bottom: 0;
            width: 100%;
            text-align: center;
}
footer{
  position: fixed;
            bottom: 0;
            width: 100%;
            text-align: center;
}
<footer>
  <div class="menu" id="menu">
    <nav id="navega"><ul >
    <li><a href="#">prueba 1</a>   </li>
    <li><a href="#">prueba 1</a></li>
    <li><a href="#">prueba 1</a></li>
    <li><a href="#">prueba 1</a></li>
    
  </ul></nav>
Menu

  </div>
</footer>

1
  • Me sirve eso graciass
    – Raul
    Commented el 23 oct. 2023 a las 15:04

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.