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 del menú emergente de la interfaz de usuario semántica se utiliza para mostrar contenido grande o un menú adicional mediante un menú emergente. El menú emergente puede contener un menú completamente nuevo. El menú se muestra mediante la ventana emergente semántica.
Clases de contenido del menú emergente de la interfaz de usuario semántica:
- popup : esta clase se usa para crear un contenedor y se mostrará la ventana emergente.
Sintaxis:
<div class="ui menu">
<a class="browse item">
Other tutorials
<i class="dropdown icon"></i>
</a>
<div class="ui fluid popup">
...
</div>
</div>
Ejemplo : En el siguiente ejemplo, tenemos una ventana emergente al frente del menú que muestra un menú adicional.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/>
<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>
<center>
<div class="ui container">
<div class="ui header green">
<h1>
GeeksforGeeks
</h1>
</div>
<strong>
Semantic UI Popup Menu Content
</strong>
<br/><br/>
<div class="ui menu">
<a class="browse item">
Other tutorials
<i class="dropdown icon"></i>
</a>
<div class="ui fluid popup">
<div class="ui three column relaxed
equal height divided grid">
<div class="column">Data Structure</div>
<div class="column">Algorithms</div>
<div class="column">Web Development</div>
</div>
</div>
<div class="header item">
GeeksforGeeks
</div>
<a class="item"
target="_blank"
href=
"https://www.geeksforgeeks.org/data-structures">
Data Structures
</a>
<a class="item"
target="_blank"
href=
"https://www.geeksforgeeks.org/fundamentals-of-algorithms">
Algorithms
</a>
</div>
</div>
</center>
<script>
$('.item').popup({})
</script>
</body>
</html>
Producción:
Contenido del menú emergente de interfaz de usuario semántica
Referencia: https://semantic-ui.com/collections/menu.html#popup-menu
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA