CSS | Listas deplegables

Los menús desplegables son una de las partes más importantes de un sitio web interactivo. CSS se utiliza para diseñar los menús desplegables. Un menú desplegable es un conjunto de listas debajo de una lista desordenada, es decir, <ul>, como se le conoce popularmente en el mundo HTML. Etiquetas de lista anidada (<li>) bajo la etiqueta <ul> usadas para crear una estructura desplegable. Para resaltar los efectos, use CSS para los componentes presentes en la estructura. El CSS es una propiedad muy sencilla que se utiliza para crear el menú desplegable.

<!DOCTYPE html>
<html>
    <head>
        <title>Dropdown property</title>
    </head>
    <body>
        <nav>
            <ul>
                <li class="Lev-1">
                <a href="">Level-1</a>
                <ul>
                    <li><a href="">Link 1</a></li>
                    <li><a href="">Link 2</a></li>
                    <li><a href="">Link 3</a></li>
                    <li><a href="">Link 4</a></li>
                </ul>
                </li>
            </ul>
        </nav>
    </body>
</html>

Producción:
Menú desplegable

Ejemplo: agregar la propiedad CSS en la estructura HTML para crear una estructura desplegable interactiva.

<!DOCTYPE html>
<html>
    <head>
        <title>Navigation property</title>
        <style>
            a {
                color: white;
                background-color:#990;
                text-decoration: none;
            }
            nav{
                background: #333;
            }
            nav >ul{ margin: 0 auto; width: 80px; }
            nav ul li{
                display: block;
                float: left;
                margin-left:-40px;
                position: relative;
            }
            nav ul a{
                display: block;
                float: left;
                width: 150px;
                padding: 10px 20px;
            }
            nav ul a:hover{
                background: #090;
            }
            nav ul li ul li{
                float: none;
            }
            nav ul li ul{
                display: none;
                position: absolute;
                background: #333;
                top: 42px;
            }
            nav ul li:hover>ul{
                display: block;
            }
            nav ul li a{
                display: block;
            }
            .gfg {
                font-size:40px;
                font-weight:bold;
                color:#009900;
                Text-align:center;
            }
            p {
                font-size:20px;
                font-weight:bold;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <div class="gfg">GeeksforGeeks</div>
        <p>Dropdown Navigation property</p>
        <nav>
            <ul>
                <li class="Lev-1">
                <a href="">Level-1</a>
                <ul>
                    <li><a href="">Link 1</a></li>
                    <li><a href="">Link 2</a></li>
                    <li><a href="">Link 3</a></li>
                    <li><a href="">Link 4</a></li>
                </ul>
                </li>
            </ul>
        </nav>
    </body>
</html>                    

Producción:
navegación

El código escrito anteriormente produce una salida adecuada sobre la base de una estructura desplegable. Las partes importantes del código HTML se analizan a continuación:

  • nav es el contenedor más externo
  • nav ul li ul li – float se establece en none para que permanezca intacto cuando pasemos el mouse sobre él.
  • Use la posición relativa para que li se mueva o cambie su posición en relación con su componente.
  • Use ‘>’ después de pasar el mouse para ver el efecto de pasar el mouse sobre el siguiente ul inmediato del li.

Menú desplegable alineado a la derecha : el menú desplegable alineado a la derecha es un menú desplegable cuyo valor flotante es correcto para mostrar el contenido desplegable en la pantalla derecha. Agregue float a la derecha del div que contiene el contenido.

<!DOCTYPE html>
<html>
    <head>
        <title>right-aligned dropdown content property</title>
        <style>
            #drop {
                background-color: teal;
                color: white;
                padding: 10px;
                font-size: 16px;
                width: : 200px;
                height: : 60px;
                border-radius: 5px;
                font-size: 20px;
            }
            #drop-down {
                position: relative;
                display: inline-block;
            }
            #dropdown-menu {
                display: none;
                position: absolute;
                background-color: #666;
                width: 160px;
                margin-left:-45px;
                border-radius: 5px;
                z-index: 1;
            }
            #dropdown-menu a {
                color: black;
                padding: 12px 16px;
                text-decoration: none;
                display: block;
            }
            .gfg {
                font-size:40px;
                font-weight:bold;
                color:#009900;
                Text-align:center;
            }
            p {
                font-size:20px;
                font-weight:bold;
                text-align:center;
            }
            #dropdown-menu a:hover {background-color: #ddd;}
            #drop-down:hover #dropdown-menu {display: block;}
        </style>
    </head>
    <body>
        <div class="gfg">GeeksforGeeks</div>
        <p>Right-aligned Dropdown content property</p>
        <div id="drop-down" style=" float: right; margin-right: 70px;">
            <button id="drop">DropDown</button>
            <div id="dropdown-menu">
                <a href="">Item 1</a>
                <a href="">Item 2</a>
                <a href="">Item 3</a>
                <a href="">Item 4</a>
            </div>
        </div>
    </body>
</html>                    

Producción:
menú desplegable alineado a la derecha

Desplegable de imagen: no es un menú desplegable, pero amplía la imagen sobre la que se desplaza. Necesita CSS básico y una imagen para que funcione.

Ejemplo:

<!DOCTYPE html>
<html>
    <head>
        <title>Image Dropdown</title>
        <style>
            .dropmenu {
                position: relative;
                display: inline-block;
                margin-left:150px;
            }
            .sub-dropmenu {
                display: none;
                position: absolute;
            }
            .dropmenu:hover .sub-dropmenu {
                display: block;
            }
            .enlarge {
                padding: 15px;
                text-align: center;
            }
            .gfg {
                margin-left:40px;
                font-size:30px;
                font-weight:bold;
            }
        </style>
    </head>
    <body>
        <div class = "gfg">Image Dropdown property</div>
        <div class="dropmenu">
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/temp1.png"
            width="150" height="50" align="middle">     
            <div class="sub-dropmenu">
                <img src="https://media.geeksforgeeks.org/wp-content/uploads/temp1.png" 
                width="600" height="200"> 
            </div>
        </div>
    </body>
</html>                    

Producción:
menú desplegable de imágenes

Menús desplegables en los que se hizo clic: esto requiere una comprensión básica de JavaScript, ya que se utiliza para ejecutar algunas funciones para que el menú desplegable en el que se hizo clic funcione.
Ejemplo:

<!DOCTYPE html>
<html>
    <head>
        <title>clicked dropdown</title>
        <style type="text/css">
            button {
                background: #009900;
                width: 200px;
                height: 60px;
                color: white;
                border: 1px solid #fff;
                font-size: 20px;
                border-radius: 5px;
              
            }
            ul li {
                list-style: none;
            }
            ul li a {
                display: block;
                background: #c99;
                width: 200px;
                height: 50px;
                text-decoration: none;
                text-align: center;
                padding: 10px;
                border-radius: 5px;
                text-align: center;
                color: white; 
                font-size: 25px;
            }
            ul li a {
                text-decoration: none;
            }
            ul li a:hover {
                background: #009900; 
            }
            .open {display: none;}
            .gfg {
                font-size:40px;
                font-weight:bold;
                color:#009900;
                Text-align:center;
            }
            p {
                font-size:20px;
                font-weight:bold;
                text-align:center;
            }
        </style>
        <script type="text/javascript">
            function open_menu(){
                var clicked= document.getElementById('drop-menu');
                if(clicked.style.display=='block')
                {
                    clicked.style.display='none';
                }
                else{
                    clicked.style.display='block';
                }
            }
        </script>
    </head>
    <body>
        <div class="gfg">GeeksforGeeks</div>
        <p>Clicked Dropdown content property</p>
        <div id="dropdown">
            <button onclick="open_menu()">Click Me!</button>
            <div class="open" id="drop-menu">
            <ul>
                <li><a href="">Item-1</a></li>
                <li><a href="">Item-2</a></li>
                <li><a href="">Item-3</a></li>
                <li><a href="">Item-4</a></li>
            </ul>
            </div>
        </div> 
    </body> 
</html>                    

Producción:
menú desplegable en el que se hizo clic

Nota: Algunos aspectos destacados importantes del código:

  • La función javascript expandirá y colapsará el menú cuando se haga clic en el botón «Click Me».
  • Usamos onclick para llamar a la función javascript en la etiqueta del botón.

Publicación traducida automáticamente

Artículo escrito por RahulRanjan4 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *