La interfaz de usuario semántica es un marco moderno que se utiliza para desarrollar diseños perfectos para el sitio web. Brinda al usuario una experiencia liviana con sus componentes. Utiliza CSS y jQuery predefinidos para incorporar diferentes marcos.
La barra lateral de la interfaz de usuario semántica se utiliza para colocar enlaces adicionales para que podamos navegar a diferentes posiciones de la aplicación web con facilidad. El elemento de la barra lateral oculta una parte de la página web debajo de él para mostrar la página.
El estado visible de la barra lateral de la interfaz de usuario semántica se usa para hacer que una barra lateral sea visible en una página web. Podemos cargar la barra lateral en la página web al iniciar el sitio web.
Clase de estado visible de barra lateral de interfaz de usuario semántica:
- visible : agregue esta clase a la barra lateral y la barra lateral se mostrará en la página web al cargar la página.
Sintaxis : agregue la clase visible al elemento de la barra lateral de la siguiente manera:
<div class="ui sidebar visible ...">
...
</div>
Ejemplo : en el siguiente ejemplo, tenemos la barra lateral visible al cargar la página.
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>
<style></style>
</head>
<body>
<div class="ui container">
<div class="ui sidebar visible inverted vertical menu">
<a class="item">
Data Structures
</a>
<a class="item">
Algorithms
</a>
<a class="item">
Machine Learning
</a>
<button class="ui button" onclick="openSidebar()">
Close Sidebar</button>
</div>
<div class="pusher">
<center>
<div class="ui header green">
<h1>
GeeksforGeeks
</h1>
</div>
<strong>
Semantic UI Sidebar Visible State
</strong>
</center>
<div class="ui segment">
<h1>Welcome to GeeksforGeeks</h1>
<p>Find the best programming tutorials here.</p>
<button onclick="openSidebar()">Open Sidebar</button>
</div>
</div>
</div>
<script>
const openSidebar = () => {
$('.ui.sidebar').sidebar('toggle')
}
</script>
</body>
</html>
Producción
Estado visible de la barra lateral de la interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/sidebar.html#visible
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA