0

Necesito saber como hacer que el menú superior de arriba (el que tiene los href que son logos) sea desplegable. Y no tengo la más mínima idea de como hacerlo. Solo pude hacer el menú desplegable del tipo que cuando haces clic aparecen varias opciones, que debería modificar? También creo que el código está muy desorganizado y algunas cosas sobran.

Este es el código:

<!DOCTYPE html>
<html>
<head>
<div style="overflow: scroll; height: 750px;"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<title>Hospital XYZ</title>
<style>
    body {
        background-color: #D9E2F3;
        font-family: 'Open Sans', sans-serif;
        font-size: 16px;
    }
    header {
        position: relative;
        text-align: center;
    }
    header img {
        position: absolute;
        right: 0;
        top: 0;
        width: 400px;
    }
    header h1 {
        color: #003366;
        margin: 0;
    }
    nav {background-color: #003366;
  display: flex;
  align-items: center;
  justify-content: space-around;
    }
    nav a {
        color: #FFFFFF;
  text-decoration: none;
  font-size: 1.2em;

    }
    main {
        padding: 20px 80px;
    }
    footer {
        background-color: #003366;
        color: #FFFFFF;
        padding: 15px;
        text-align: center;
    }
</style>
<body>
    <header>
        <img src="https://sis.lapampa.gob.ar/Imagenes/logoSalud2020.png" style="position: absolute; top: -100; right: 0; width: 170px;">
        <h1>Hospital XYZ</h1>
        <nav>
            <a href="#" onclick="mostrar('inicio')"><i class="fa fa-home" Inicio></i></a>
            <a href="#" onclick="mostrar('solicitar-turno')"><i class="fa fa-calendar"></i></a>
            <a href="#" onclick="mostrar('Sobre Nosotros')"><i class="fas fa-book-open"></i></a>
            <a href="#" onclick="mostrar('contacto')"><i class="fas fa-phone"></i></a>
            <a href="#" onclick="mostrar('registro')"><i class="fas fa-sign-in-alt"></i></a>
        </nav>
    </header>

Como se ve, no tengo mucha idea sobre HTML, si en lenguajes pero nunca usé HTML y es algo que todavía no domino completamente. Esta es solo una parte del código porque no me deja subir todo.

1 respuesta 1

0

Para hacer que el menú superior sea desplegable, puedes utilizar un menú desplegable o "dropdown" con HTML y CSS.

Un menú desplegable se puede crear utilizando una lista no ordenada y cada elemento de la lista li contendrá un enlace . Luego, puedes utilizar CSS para ocultar el menú desplegable y mostrarlo cuando el usuario haga clic en el botón.

En este ejemplo, el menú desplegable se mostrará cuando el usuario pase el cursor sobre el botón "Menu". Puedes cambiar el evento que despliega el menú desplegable modificando la línea .dropdown:hover .dropdown-content { y utilizando un evento diferente, como .dropdown:click .dropdown-content {....

Para organizar los elementos del menú desplegable en forma vertical, puedes añadir el estilo display: block a cada elemento a dentro del div con la clase dropdown-content. Esto hará que cada elemento se muestre en una línea diferente en lugar de en una línea horizontal.

aquí te dejo algo de código que "mas o menos hace eso"

pruebalo y me dices.

<!DOCTYPE html>
<html>
<head>
<div style="overflow: scroll; height: 750px;"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<title>Hospital XYZ</title>
<style>
    body {
        background-color: #D9E2F3;
        font-family: 'Open Sans', sans-serif;
        font-size: 16px;
    }
    header {
        position: relative;
        text-align: center;
    }
    header img {
        position: absolute;
        right: 0;
        top: 0;
        width: 400px;
    }
    header h1 {
        color: #003366;
        margin: 0;
    }
    nav {
        background-color: #003366;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    nav a {
        color: #FFFFFF;
        text-decoration: none;
        font-size: 1.2em;
    }
    main {
        padding: 20px 80px;
    }
    footer {
        background-color: #003366;
        color: #FFFFFF;
        padding: 15px;
        text-align: center;
    }
    /* Dropdown */
    .dropdown {
      position: relative;
      display: inline-block;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      z-index: 1;
      min-width: 160px;
      background-color: #f6f6f6;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      padding: 12px 16px;
    }

    .dropdown a {
      display: block;
    }

    .dropdown:hover .dropdown-content {
      display: block;
    }
</style>
</head>
<body>
    <header>
        <img src="https://sis.lapampa.gob.ar/Imagenes/logoSalud2020.png" style="position: absolute; top: -100; right: 0; width: 170px;">
        <h1>Hospital XYZ</h1>
        <nav>
            <div class="dropdown">
              <a href="#">Menu</a>
              <div class="dropdown-content">
                <a href="#" onclick="mostrar('inicio')"><i class="fa fa-home" Inicio></i></a>
                <a href="#" onclick="mostrar('solicitar-turno')"><i class="fa fa-calendar"></i></a>
                <a href="#" onclick="mostrar('Sobre Nosotros')"><i class="fas fa-book-open"></i></a>
                <a href="#" onclick="mostrar('contacto')"><i class="fas fa-phone"></i></a>
                <a href="#" onclick="mostrar('registro')"><i class="fas fa-sign-in-alt"></i></a>
              </div>
            </div>
        </nav>
    </header>
    <main>
        <section id="inicio">
            <h2>Bienvenido al Hospital XYZ</h2>
            <p>blabla</p>
        </section>
    </main>
    <footer>
        Hospital XYZ &copy; 2020
    </footer>
</body>
</html>

Un saludo, Fran Doreste

2
  • Funcionó perfectamente, modifiqué algunos aspectos visuales pero funciona perfectamente! Muchas gracias, Fran.
    – D_Hur
    Commented el 3 ene. 2023 a las 21:37
  • Me alegro mucho. Un saludo! Commented el 3 ene. 2023 a las 22:56

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.