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.
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 menú de interfaz de usuario semántica nos ofrece tantos tipos como menú, menú secundario, tabular, señalador, texto, menú vertical, paginación. En este artículo, aprenderemos a señalar el tipo de menú junto con ejemplos.
Clase de tipo de puntero de menú de interfaz de usuario semántica:
- apuntando: esta clase se usa para crear un menú que muestra una relación con el contenido cercano.
Sintaxis:
<div class="ui pointing menu">
<a class="active item">
...
</a>
...
</div>
Ejemplo 1: el siguiente ejemplo demuestra el uso del tipo de señalización del menú de la interfaz de usuario semántica.
HTML
<html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body style="margin-inline: 10rem;"> <center> <h1 class="ui header green"> Geeksforgeeks </h1> <h3> Semantic UI Menu Pointing Type </h3> <div class="ui pointing menu"> <a class="item"> Tutorials </a> <a class="active item"> Jobs </a> <a class="item"> Events </a> <a class="item"> Courses </a> </div> <div class="ui segment"> <p></p> </div> </center> </body> </html>
Producción:
Menú de interfaz de usuario semántica que señala el tipo.
Ejemplo 2: a continuación se muestra otro ejemplo que demuestra el uso del tipo de señalización del menú de la interfaz de usuario semántica.
HTML
<html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body style="margin-inline: 10rem;"> <center> <h1 class="ui header green"> Geeksforgeeks </h1> <h3> Semantic UI Menu Pointing Type </h3> <div class="ui pointing menu"> <a class="item"> Tutorials </a> <a class="active item"> Jobs </a> <a class="item"> Events </a> <a class="item"> Courses </a> <div class="right menu"> <div class="item"> <div class="ui transparent icon input"> <input type="text" placeholder="type here...."> <i class="search link icon"></i> </div> </div> </div> </div> <div class="ui segment"> <p></p> </div> </center> </body> </html>
Producción:
Referencia: https://semantic-ui.com/collections/menu.html#pointing
Publicación traducida automáticamente
Artículo escrito por singhtripti y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA