1

Necesito poder añadir un menú despegable a mi barra de navegación.

Estuve viendo varios videos y revisando códigos de otros proyectos pero no he podido adaptarlo a mi proyecto.

introducir la descripción de la imagen aquí

Acá les muestro cómo va por ahora la página. Mi idea es que al tocar el icono de usuario se despliegue un submenú con las opciones que se encuentran en la lista del código html (sí, está horrible el diseño). Lo que va de la página lo he hecho con display flex para poder ordenar los elementos.

body{
    background-color:rgb(236, 231, 233);
    margin: 0;
    text-decoration: none;
}
header{
    background-color: #ffffff;
    border: 1px solid #000;
    height: 90px;
    width: 100%;
    display: flex;
    justify-content:space-around;
    align-items: center;
    flex-wrap:wrap;
    
}
.container{
    display: flex;
    align-items: center;
}
.container-menu{
    width: 25px;
}
.container-logo{
    width: 150px;
    margin: 10px;
}

/*CONTENEDOR 2*/
.container2{
    display: flex;
    align-items: center;
}
.container2-busqueda{
    width: 250px;
    border: none;
    border-bottom: 0.1px solid #000;
    background: transparent;
}
.container2-boton{
    border: none;
    background: transparent;
}

/*CONTENEDOR 3*/
.container3{
    display: flex;
    align-items: center;
}
.container3-usuario{
    width: 20px;
}

.container3-carrito{
    width: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="C:\Users\Usuario\Documents\LAB3\CSS\estilos(Principal).css"/>
    <script src="https://kit.fontawesome.com/b408879b64.js" crossorigin="anonymous"></script>
    <title>Document</title>
</head>
<body>
    <header>
           
            <div class="container">
                <img class="container-menu" src="C:\Users\Usuario\Documents\LAB3\img\menu.png">
                <img class="container-logo" src="C:\Users\Usuario\Documents\LAB3\img\CellMart.png">
            </div>
            
            <div class="container2">
                <input class="container2-busqueda" type="text" placeholder="Buscar">               
                <button class="container2-boton"><i class="fa-solid fa-magnifying-glass"></i></button>
            </div>
            <div class="container3">
                <a href="#"><img class="container3-usuario" src="C:\Users\Usuario\Documents\LAB3\img\usuario 1.png"></a>
                <div class="container3-submenu">
                    <ul class="container3-submenu">
                        <li><b>Francisco</b></li>
                         <li><a href="#">Compras</a></li>
                         <li><a href="#">Vender</a></li>
                        <li><a href="#">Salir</a></li>
                    </ul>
                </div>
                <a >Mis compras</a>
                <a >Vender</a>
                <a ><img  class="container3-carrito" src="C:\Users\Usuario\Documents\LAB3\img\carrito.png"></a>
            </div>
    </header>
</body>
</html>

0

2 respuestas 2

1

Hay muchos ejemplos en internet de cómo hacer un menú desplegable.

Por otro lado, si no eres muy diestro en CSS puedes usar (recomendado) una biblioteca de diseño como Bootstrap, ahí hacer un menú desplegable es muy fácil. Además con estos frameworks, puedes hacer tu sitio "responsivo" para distintas pantallas en un solo desarrollo. Recuerda que hoy día la mayoría de los visitantes web son móviles. Hay casos donde puede ser hasta del 70%.

Con lo que muestras, se puede agregar algunos estilos para crear el comportamiento.

.container3-submenu ul {
  list-style: none;
}
.container3-submenu ul li {
  position: relative;
  float: left;
}
.container3-submenu ul li:hover {
  background: #858585;
}
.container3-submenu ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0px;
}
.container3-submenu ul ul li {
  float: none;
  width: 120px;
}
.container3-submenu ul ul a {
  line-height: 118%;
  padding: 7px 15px;
}
.container3-submenu ul ul ul {
  top: 0;
  left: 100%;
}
.container3-submenu ul li:hover > ul {
  display: block;
  background: #aaaaaa;
}
<div class="container3-submenu">
  <ul>
    <li><a href="#">El Usuario</a>
      <ul>
        <li><a href="#">Compras</a></li>
        <li><a href="#">Vender</a></li>
        <hr>
        <li><a href="#">Salir</a></li>
      </ul>
    </li>
  </ul>
</div>

1
  • Lo tendre encuenta. Muchas gracias por la ayuda
    – Francisco
    Commented el 17 sept. 2023 a las 22:54
0

Te recomiendo usar bootstrap para tu pagina web:

Como usar bootstraps?

  1. Debes ir aqui https://getbootstrap.com/

  2. Ir a donde dice "Docs"

  3. En la pagina inicial, si deslizas tan solo un poco te aparecerá este código: introducir la descripción de la imagen aquí

Fijate que hay dos links, uno de css (que se debe pone en el head) y otro javascript, que se pone un poco antes de terminar el body. Asi linkeas bootstrap!

  1. Fijate ahora en el scroll, o barra de deslizamiento. Ve hasta abajo, hasta encontrar la opcion de Components, y alli encontraras componenetes utiles para copiar y pegar en tu pagina.

  2. Fijate lo que necesites, si no me equivoco, en la opcion navbar hay un pequeño menu despegable que te puede servir.

Nota: Si esto no te sirvió, también puedes ir a https://www.w3schools.com/css/css_dropdowns.asp Aquí puedes ver como se usa tan solo con css! Espero que te haya servido!

1
  • Yo recomiendo w3schools en vez de usar bootstrap, ya que con css y un poco de javascript (si quieres desplegar el menu) lo puedes hacer casi todo, aunque eso depende también de tu punto de vista.
    – Euricky999
    Commented el 7 nov. 2023 a las 18:49

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.