Marco de código abierto de interfaz de usuario semántica que proporciona funciones de barra lateral para crear increíbles interfaces de usuario usando CSS, jQuery, que es muy similar a bootstrap. Tiene todos los elementos diferentes para crear sitios web increíbles. Utiliza una clase para agregar estilos a los elementos HTML. Una barra lateral oculta contenido adicional al lado de una página. El contenido de la página generalmente se muestra en un lado de la página web.
Ejemplo: El siguiente ejemplo demuestra la función de barra lateral de interfaz de usuario semántica en la página web.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
</head>
<body>
<div style="margin-top: 100px"
class="ui container">
<h2>Sidebar</h2>
<button class="ui button primary">
Show Menu
</button>
<div class="ui sidebar inverted
vertical menu">
<h2 style="color:white">Menu</h2>
<a class="item">
Data Structure
</a>
<a class="item">
Web Designing
</a>
<a class="item">
Basic programming
</a>
</div>
<div class="pusher">
<!-- Site content !-->
</div>
<h2>
Hello welcome to
geeksforgeeks
</h2>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
<script>
$('button').click(function () {
$('.ui.sidebar').sidebar('toggle');
})
</script>
</body>
</html>
Producción:
Ejemplo: El siguiente ejemplo muestra la barra lateral de IU semántica en la parte superior.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
</head>
<body>
<div style="margin-top: 100px"
class="ui container">
<h2>Sidebar</h2>
<button class="ui button primary">
Show Menu
</button>
<div class="ui top sidebar
inverted vertical menu">
<h2 style="color:white">Menu</h2>
<a class="item">
Data Structure
</a>
<a class="item">
Web Designing
</a>
<a class="item">
Basic programming
</a>
</div>
<div class="pusher">
<!-- Site content !-->
</div>
<h2>Hello welcome to geeksforgeeks</h2>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
<script>
$('button').click(function () {
$('.ui.sidebar').sidebar('toggle');
})
</script>
</body>
</html>
Producción:
Ejemplo: El siguiente ejemplo muestra un menú de interfaz de usuario semántica con iconos.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
</head>
<body>
<div style="margin-top: 100px"
class="ui container">
<h2>Sidebar</h2>
<button class="ui button primary">
Show Menu
</button>
<div class="ui left demo vertical
inverted sidebar labeled
icon menu">
<a class="item">
<i class="globe icon"></i>
Internet
</a>
<a class="item">
<i class="code icon"></i>
Coding
</a>
<a class="item">
<i class="phone icon"></i>
Help
</a>
</div>
<h2>Hello welcome to geeksforgeeks</h2>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
<script>
$('button').click(function () {
$('.ui.sidebar').sidebar('toggle');
})
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por iamsahil1910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA