Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para su uso y tiene diferentes elementos para hacer que su sitio web se vea más sorprendente. Utiliza una clase para agregar CSS a los elementos.
El menú se utiliza para agrupar elementos que se utilizan para navegar por el sitio web. La interfaz de usuario semántica nos proporciona un menú con estilo. Echemos un vistazo a varios estados del menú .
Estados del menú de la interfaz de usuario semántica:
- Pasar el mouse : este estado hace que el fondo de los elementos del menú se oscurezca cuando se pasa el mouse sobre él, lo que indica que se puede realizar una acción al hacer clic en él.
- Activo : Esto nos brinda la opción de oscurecer un elemento del menú, que se puede usar para indicar un elemento importante.
Sintaxis:
<div class="ui menu">
<div class="active item">
...
</div>
...
</div>
Ejemplo 1: en el siguiente ejemplo, hemos creado elementos de menú que se pueden desplazar usando la clase de enlace .
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI Menu States</title> <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" integrity= "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div class="ui container"> <h2 class="ui green header">GeeksforGeeks</h2> <h4>Semantic UI Menu States</h4> <hr> <br /> <div class="ui compact menu"> <div class="link item"> Home hoverable </div> <div class="item"> About </div> <div class="link item"> Profile hoverable </div> <div class="item"> Contact Us </div> </div> </div> </body> </html>
Producción:
Estados del menú de la interfaz de usuario semántica
Ejemplo 2: En el siguiente ejemplo, hemos creado un menú con elementos activos .
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI Menu States</title> <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" integrity= "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div class="ui container"> <h2 class="ui green header">GeeksforGeeks</h2> <h4>Semantic UI Menu States</h4> <hr> <br/> <div class="ui compact menu"> <div class="link active item"> Home </div> <div class="link item"> About </div> <div class="link active item"> Profile </div> <div class="link item"> Contact Us </div> </div> </div> </body> </html>
Producción:
Estados del menú de la interfaz de usuario semántica
Referencia: https://semantic-ui.com/collections/menu.html
Publicación traducida automáticamente
Artículo escrito por coder_srinivas y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA