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 usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble. La mejor parte de este marco es que crea diseños hermosos y receptivos, ya que contiene componentes semánticos preconstruidos.
El menú es un componente que muestra un grupo de elementos que sirven como navegación entre una sección del sitio web y otra. Es un componente imprescindible y siempre presente en cualquier sitio web para facilitar la navegación del usuario.
El botón de menú es una clase de contenido de menú en la que el menú contiene un botón. Esta clase es útil cuando queremos crear un menú que contenga uno o varios botones en los que el usuario pueda hacer clic.
Clase de contenido del botón de menú de la interfaz de usuario semántica:
- botón: Esta clase se utiliza para crear un botón. La clase de menú se utiliza como padre para crear un botón de menú.
Sintaxis:
<div class="ui menu">
<div class="ui button">
....
</div>
....
</div>
Ejemplo 1: En el siguiente programa, crearemos un solo botón de menú .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic-UI Menu Button Content</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> </head> <body> <br> <div class="ui green huge header">GeeksforGeeks</div> <div class="ui large header">Menu Button</div> <br> <div class="ui menu"> <div class="item"> <div class="ui secondary button"> <!--Menu Button--> Register </div> </div> </div> </body> </html>
Producción:
Ejemplo 2: En el siguiente programa, crearemos varios botones de menú.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic-UI Menu Button Content</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> </head> <body> <br> <div class="ui green huge header">GeeksforGeeks</div> <div class="ui large header">Menu Button</div> <br> <div class="ui menu"> <div class="item"> <div class="ui red button"> <!--Menu Button--> Home </div> </div> <div class="item"> <div class="ui red button"> <!--Menu Button--> About </div> </div> <div class="item"> <div class="ui red button"> <!--Menu Button--> Contact </div> </div> <div class="item"> <div class="ui red button"> <!--Menu Button--> Sign Up </div> </div> </div> </body> </html>
Producción:
Enlace de referencia: https://semantic-ui.com/collections/menu.html
Publicación traducida automáticamente
Artículo escrito por shreyasnaphad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA