El marco de código abierto de la interfaz de usuario semántica brinda íconos o glifos que se usan para mostrar imágenes relacionadas con algunos elementos usando CSS y jQuery que se usan para crear excelentes interfaces de usuario. Es un marco de desarrollo utilizado para crear diseños hermosos y receptivos.
El menú de IU semántica es un grupo de elementos que muestra diferentes acciones de navegación. Podemos navegar a diferentes páginas del sitio web. Un menú puede ser una combinación de enlaces, una barra de búsqueda y menús desplegables.
El contenido del elemento desplegable del menú de la interfaz de usuario semántica se utiliza para colocar el elemento desplegable dentro del menú. Podemos colocar un menú desplegable para agrupar enlaces similares bajo un enlace usando el menú desplegable para hacer que el menú sea compacto.
Clases de contenido del elemento desplegable del menú semántico de la interfaz de usuario:
- menú desplegable : el elemento con esta clase puede contener un menú con algunos elementos dentro. Luego, cada vez que interactuamos con el menú desplegable, se muestra el menú dentro de él.
Sintaxis :
<div class="ui menu">
...
<div class="ui dropdown item">
...
</div>
</div>
Ejemplo : en el siguiente ejemplo, tenemos un elemento desplegable dentro del menú.
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet"/> <script src= "https://code.jquery.com/jquery-3.1.1.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <center> <div class="ui container"> <div class="ui header green"> <h1> GeeksforGeeks </h1> </div> <strong> Semantic UI Menu Dropdown Item Content </strong> <br/><br/> <div class="ui compact menu"> <div class="header item"> GeeksforGeeks </div> <a class="item" target="_blank" href= "https://www.geeksforgeeks.org/data-structures"> Data Structures </a> <a class="item" target="_blank" href= "https://www.geeksforgeeks.org/fundamentals-of-algorithms"> Algorithms </a> <div class="ui simple dropdown item"> Programming Languages <i class="dropdown icon"></i> <div class="menu"> <a class="item" target="_blank" href= "https://www.geeksforgeeks.org/java/"> Java </a> <a class="item" target="_blank" href= "https://www.geeksforgeeks.org/python-programming-language/"> Python </a> <a class="item" target="_blank" href= "https://www.geeksforgeeks.org/c-plus-plus/"> C++ </a> </div> </div> </div> </div> </center> </body> </html>
Producción:
Contenido del elemento desplegable del menú de interfaz de usuario semántica
Referencia: https://semantic-ui.com/collections/menu.html#dropdown-item
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA