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 contenido de texto del menú de la interfaz de usuario semántica se utiliza para dar formato al contenido del menú como texto simple. Se eliminan los bordes alrededor del menú.
Clases de contenido de texto de menú de interfaz de usuario semántica:
- texto : al agregar esta clase al menú, se formateará como texto simple.
Sintaxis : agregue la clase de texto al menú de la siguiente manera:
<div class="ui text menu">
...
</div>
Ejemplo : En el siguiente ejemplo, tenemos un menú de texto y un botón para alternar el menú de texto .
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<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>
<div class="ui container">
<center>
<div class="ui header green">
<h1> GeeksforGeeks </h1>
</div>
<strong> Semantic UI Menu Text Content </strong>
<br/>
<br/>
<button class="ui inverted green button"
onclick="toggleTextMenu()">
Toggle Text Menu
</button>
</center>
<div class="ui text 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>
<a
class="item"
href=
"https://www.geeksforgeeks.org/machine-learning/"
target="_blank"
>
Machine Learning
</a>
</div>
</div>
<script>
const toggleTextMenu = () => {
$('.ui.menu').toggleClass('text')
}
</script>
</body>
</html>
Producción:
Referencia: https://semantic-ui.com/collections/menu.html#text
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA