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 estado de desplazamiento del menú de la interfaz de usuario semántica proporciona una animación de desplazamiento sobre los enlaces. Los elementos con enlaces o enlaces de nombre de clase se pueden desplazar.
Clases de estado de desplazamiento del menú de IU semántica:
- a: Los elementos con una etiqueta tienen el estado de desplazamiento.
- enlace : Elementos con esta clase el estado de desplazamiento.
Sintaxis : haga los elementos como enlaces o clase de enlace de la siguiente manera:
<div class="ui compact menu">
<a class="item" href="#"> ... </a>
<div class="link item"> ... </div>
</div>
Ejemplo : en el siguiente ejemplo, tenemos algunos enlaces con el estado de desplazamiento y el último elemento no tiene el estado de desplazamiento.
HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> <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> <div class="ui container"> <center> <div class="ui header green"> <h1>GeeksforGeeks</h1> </div> <strong>Semantic UI Menu Hover State</strong> <br /> <br /> </center> <div class="ui compact menu"> <div class="header item"> GeeksforGeeks </div> <a class="item" href="https://www.geeksforgeeks.org/data-structures" target="_blank" > Data Structures </a> <a class="item" href="https://www.geeksforgeeks.org/fundamentals-of-algorithms" target="_blank" > Algorithms </a> <div class="link item"> Machine Learning </div> <div class="item"> Java </div> </div> </div> </body> </html>
Producción
Referencia: https://semantic-ui.com/collections/menu.html#hover
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA