El marco de código abierto de la interfaz de usuario semántica brinda íconos o glifos que se usan para mostrar imágenes relacionadas con algunos elementos usando CSS y jQuery que se usan para crear excelentes interfaces de usuario. Es un marco de desarrollo utilizado para crear diseños hermosos y receptivos.
El menú de IU semántica es un grupo de elementos que muestra diferentes acciones de navegación. Podemos navegar a diferentes páginas del sitio web. Un menú puede ser una combinación de enlaces, una barra de búsqueda y menús desplegables.
El estado activo del menú de la interfaz de usuario semántica especifica que se ha hecho clic en el elemento y está activo. El botón aparece en un contraste más oscuro con otros botones o enlaces.
Clase de estado activo del menú de IU semántica:
- activo: al agregar esta clase al elemento, el elemento se vuelve activo.
Sintaxis: agregue la clase activa al elemento de la siguiente manera:
<div class="link active item">
Machine Learning
</div>
Ejemplo: en el siguiente ejemplo, si el usuario hace clic en cualquier enlace, el elemento se vuelve activo y, si se vuelve a hacer clic, se vuelve inactivo.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
</script>
</head>
<body>
<div class="ui container">
<center>
<div class="ui header green">
<h1>GeeksforGeeks</h1>
</div>
<strong>Semantic UI Menu Active State</strong>
<br />
<br />
</center>
<div class="ui compact menu">
<div class="header item">
GeeksforGeeks
</div>
<a class="item" href=
"https://www.geeksforgeeks.org/data-structures"
target="_blank">
Data Structures
</a>
<a class="item" href=
"https://www.geeksforgeeks.org/fundamentals-of-algorithms"
target="_blank">
Algorithms
</a>
<div class="link item">
Machine Learning
</div>
</div>
</div>
<script>
$('.item').click(function() {
$(this).toggleClass('active')
})
</script>
</body>
</html>
Producción:
Referencia: https://semantic-ui.com/collections/menu.html#active
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA