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 interfaz de usuario semántica tiene un montón de componentes para el diseño de la interfaz de usuario. Uno de ellos es “Menú”. Se utiliza para mostrar el menú de navegación agrupado. Se utiliza un menú en cada sitio web para hacerlo más fácil de usar, de modo que la navegación a través del sitio web sea fácil y el usuario pueda buscar directamente el tema de su interés.
Variaciones del menú de la interfaz de usuario semántica :
- Fijo : esta variación se utiliza para fijar la posición de los elementos del menú con respecto a su contenido.
- Apilable : esta variación se utiliza para mostrar el menú apilable en la pantalla del móvil.
- Invertido : Esta variación se utiliza para hacer que los elementos del menú se inviertan (en cuanto al color).
- Coloreado : esta variación se usa para agregar color a los elementos del menú.
- Iconos : esta variación se utiliza para mostrar los iconos en los elementos del menú.
- Iconos etiquetados : esta variación se utiliza para mostrar los iconos del menú con etiquetas.
- Fluido : esta variación se utiliza para que el menú tome el tamaño completo de su contenedor.
- Compacto : esta variación se utiliza para que el menú ocupe el tamaño completo de su contenedor.
- Dividido uniformemente: esta variación se utiliza para mostrar los elementos del menú en un espacio dividido uniformemente.
- Adjunto : esta variación se usa para adjuntar otros segmentos de contenido con los elementos del menú.
- Tamaño : Esta variación se utiliza para que el menú varíe de tamaño.
- Empotrado : Esta variación hace que el menú quepa en el menor espacio posible.
- Sin bordes : esta variación elimina el borde de los elementos del menú.
Ejemplo 1 : el siguiente código también demuestra algunas de las variaciones de menú anteriores.
HTML
<!DOCTYPE html>
<html>
<head>
<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">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body style="margin:200px">
<center>
<h1 class="ui green header">
GeeksforGeeks
</h1>
<strong>
<u>Semantic UI Menu Variations</u>
</strong>
<br /><br />
<strong>
Colored, Fluid, Evenly Divided, Labeled Icon Menu
</strong>
<div class="ui fluid four item labeled icon menu">
<a class="active green item">
<i class="tag icon"></i> GeeksforGeeks
</a>
<a class="orange item">
<i class="envelope outline icon"></i> Mail
</a>
<a class="brown item">
<i class="coffee icon"></i> Coffee
</a>
<a class="blue item">
<i class="code icon"></i> Code
</a>
</div>
</center>
<script>
$('.ui.menu .ui.dropdown').dropdown({
on: 'hover'
});
$('.ui.menu a.item').on('click', function () {
$(this).addClass('active')
.siblings().removeClass('active');
})
</script>
</body>
</html>
Salida :
Variaciones del menú
Ejemplo 2: el siguiente código demuestra las otras clases junto con el uso de los métodos addClass() y removeClass() .
HTML
<!DOCTYPE html>
<html>
<head>
<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">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body style="margin:200px">
<center>
<h1 class="ui green header">
GeeksforGeeks
</h1>
<strong>
<u>Semantic UI Menu Variations</u>
</strong><br />
<strong>
Colored, Evenly Divided,
Borderless, Huge Menu
</strong>
<div class="ui huge inverted green
borderless four item menu">
<a class="active item"> Item One </a>
<a class="item"> Item Two </a>
<a class="item"> Item Three </a>
<a class="item"> Item Four </a>
</div>
</center>
<script>
$('.ui.menu .ui.dropdown').dropdown({
on: 'hover'
});
$('.ui.menu a.item').on('click', function () {
$(this).addClass('active')
.siblings().removeClass('active');
})
</script>
</body>
</html>
Salida :
Variaciones del menú
Referencia: https://semantic-ui.com/collections/menu.html
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA