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.
De forma predeterminada, el menú es horizontal y muestra los elementos que contiene de manera horizontal, es decir, uno al lado del otro. Para crear un menú vertical, Semantic UI nos proporciona una clase de menú vertical . Esta clase tiene la capacidad de hacer un menú vertical y mostrar sus elementos apilados unos sobre otros.
Clase de tipo de menú vertical de interfaz de usuario semántica:
- menú vertical: Esta clase se utiliza para mostrar el menú en formato vertical.
Sintaxis:
<div class="ui vertical menu">
Ejemplo 1 : en el siguiente programa, crearemos un menú vertical utilizando la clase dada.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic-UI Vertical Menu Type</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"> Vertical Menu </div> <br> <!--Vertical Menu --> <div class="ui vertical menu"> <a class="red active item"> Home <i class="home icon"></i> </a> <a class="item"> Add Friend <i class="heart icon"></i> </a> <a class="item"> My Profile <i class="plus icon"></i> </a> <div class="item"> <div class="ui transparent icon input"> <input type="text" placeholder="Search Profile"> <i class="search icon"></i> </div> </div> </div> </body> </html>
Producción:
Ejemplo 2: en el siguiente programa, crearemos un menú predeterminado que será horizontal y un menú vertical para comprender el significado de la clase de menú vertical .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic-UI Vertical Menu Type</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> <br> <div class="ui large header"> Default Horizontal Menu </div> <!--Default Menu--> <div class="ui menu"> <a class="blue active item"> <i class="futbol icon"></i> Football </a> <a class="item"> <i class="quidditch icon"></i> Quidditch </a> <a class="item"> <i class="table tennis icon"></i> Table Tennis </a> </div> <br> <div class="ui large header">Vertical Menu</div> <!--Vertical Menu --> <div class="ui vertical menu"> <a class="red active item"> Football <i class="futbol icon"></i> </a> <a class="item"> Quidditch <i class="quidditch icon"></i> </a> <a class="item"> Table Tennis <i class="table tennis icon"></i> </a> </div> </body> </html>
Producción:
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