Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para su uso y tiene diferentes elementos para hacer que su sitio web se vea más sorprendente. Utiliza una clase para agregar CSS a los elementos.
El menú desplegable permite a los usuarios elegir un valor entre múltiples valores. Es una parte esencial de una página web, ya que aumenta la interactividad. La interfaz de usuario semántica nos proporciona un menú desplegable con estilo. Echemos un vistazo a varias variaciones desplegables.
Variaciones desplegables de la interfaz de usuario semántica:
- Desplazamiento : esta variación permite que el menú desplegable sea desplazable.
- Compacto : esta variación elimina el ancho mínimo del menú desplegable.
- Fluido : el menú desplegable ocupa todo el ancho de su padre.
- Dirección del menú : la interfaz de usuario semántica nos permite especificar la dirección en la que se debe abrir el menú.
Sintaxis:
<div class="ui Dropdown-Variation-class dropdown">
<i class="dropdown icon"></i>
<div class="text">...</div>
<div class="menu">
<div class="item">...</div>
...
</div>
</div>
Nota: Utilice la sintaxis anterior según la necesidad mediante una combinación de las clases mencionadas anteriormente. Consulte los ejemplos a continuación para una mejor comprensión de las clases.
Ejemplo 1: en el siguiente ejemplo, hemos creado un menú desplegable de desplazamiento .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Dropdown Variations</title>
<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"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<div class="ui container">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Dropdown Variations</h4>
<hr>
<br />
<div class="ui scrolling dropdown">
<input type="hidden" name="partner">
<div class="default text">Select your lab partner</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">Lilly</div>
<div class="item">Jon</div>
<div class="item">Dave</div>
<div class="item">Joey</div>
<div class="item">Ross</div>
<div class="item">Monica</div>
<div class="item">Rachel</div>
<div class="item">Chandler</div>
<div class="item">Phoebe</div>
<div class="item">Mike</div>
<div class="item">Richard</div>
<div class="item">Vikram</div>
<div class="item">Regina</div>
<div class="item">Philangie</div>
<div class="item">Thomas</div>
</div>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
Producción:
Menú desplegable de desplazamiento
Ejemplo 2: En el siguiente ejemplo, hemos creado un menú desplegable compacto .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Dropdown Variations</title>
<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"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<div class="ui container">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Dropdown Variations</h4>
<hr>
<br />
<div class="ui compact selection dropdown">
<input type="hidden" name="partner">
<div class="default text">Select your lab partner</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">Lilly</div>
<div class="item">Jon</div>
<div class="item">Dave</div>
<div class="item">Joey</div>
<div class="item">Ross</div>
<div class="item">Monica</div>
<div class="item">Rachel</div>
<div class="item">Chandler</div>
<div class="item">Phoebe</div>
<div class="item">Mike</div>
<div class="item">Richard</div>
<div class="item">Vikram</div>
<div class="item">Regina</div>
<div class="item">Philangie</div>
<div class="item">Thomas</div>
</div>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
Producción:
Menú desplegable compacto
Ejemplo 3: En el siguiente ejemplo, hemos creado un menú desplegable fluido .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Dropdown Variations</title>
<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"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<div class="ui container">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Dropdown Variations</h4>
<hr>
<br />
<div class="ui fluid selection dropdown">
<input type="hidden" name="partner">
<div class="default text">Select your lab partner</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">Lilly</div>
<div class="item">Jon</div>
<div class="item">Dave</div>
<div class="item">Joey</div>
<div class="item">Ross</div>
<div class="item">Monica</div>
<div class="item">Rachel</div>
<div class="item">Chandler</div>
<div class="item">Phoebe</div>
<div class="item">Mike</div>
<div class="item">Richard</div>
<div class="item">Vikram</div>
<div class="item">Regina</div>
<div class="item">Philangie</div>
<div class="item">Thomas</div>
</div>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
Producción:
Menú desplegable de fluidos
Ejemplo 4: en el siguiente ejemplo, hemos creado un menú desplegable con una dirección de menú izquierda .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Dropdown Variations</title>
<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"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<div class="ui container">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Dropdown Variations</h4>
<hr>
<br />
<div class="ui floating labeled icon dropdown button">
<i class="dropdown icon"></i>
<span class="text">Select your lab partner</span>
<div class="right menu">
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Male</span>
<div class="right menu">
<div class="item">Joey</div>
<div class="item">Ross</div>
<div class="item">Chandler</div>
<div class="item">Richard</div>
<div class="item">Vikram</div>
</div>
</div>
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Female</span>
<div class="right menu">
<div class="item">Monica</div>
<div class="item">Rachel</div>
<div class="item">Phoebe</div>
<div class="item">Regina</div>
<div class="item">Philangie</div>
</div>
</div>
</div>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
Producción:
Desplegable de dirección del menú izquierdo
Referencia: https://semantic-ui.com/modules/dropdown.html
Publicación traducida automáticamente
Artículo escrito por coder_srinivas y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA