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 usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble.
El menú de interfaz de usuario semántica se utiliza para mostrar el menú de navegación agrupado. Se utiliza un menú de navegación en cada sitio web para que sea más fácil de usar, de modo que la navegación a través del sitio web sea fácil y el usuario pueda buscar directamente el tema de su interés.
La variación del tamaño del menú de la interfaz de usuario semántica se utiliza para cambiar el tamaño del menú de navegación.
Clases utilizadas de variación de tamaño de menú de interfaz de usuario semántica:
- mini: Se utiliza para establecer el tamaño del menú en mini.
- tiny: Se utiliza para establecer el tamaño del menú en tiny.
- pequeño: se utiliza para establecer el tamaño del menú en pequeño.
- grande: se utiliza para establecer el tamaño del menú en grande.
- grande: se utiliza para establecer el tamaño del menú en grande.
- enorme: se utiliza para establecer el tamaño del menú en enorme.
- masivo: Se utiliza para establecer el tamaño del menú en masivo.
Sintaxis:
<div class="ui *size menu">
...
</div>
Ejemplo 1: este ejemplo describe los usos de la variación del tamaño del menú de la interfaz de usuario semántica.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Menu Size Variation
</title>
<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>
<div class="ui container center aligned">
<h2 style="color:green">
GeeksforGeeks
</h2>
<h3>Semantic-UI Menu Size Variation</h3>
<h4>Mini Size Menu Variation</h4>
<div class="ui mini menu">
<a class="active item">
GeeksforGeeks
</a>
<div class="menu">
<div class="ui dropdown item">
Programming Languages <i class="dropdown icon"></i>
<div class="menu">
<a class="item">C</a>
<a class="item">C++</a>
<a class="item">Java</a>
<a class="item">Python</a>
</div>
</div>
</div>
<div class="menu">
<div class="ui dropdown item">
Web Technology <i class="dropdown icon"></i>
<div class="menu">
<a class="item">HTML</a>
<a class="item">CSS</a>
<a class="item">JavaScript</a>
<a class="item">Bootstrap</a>
</div>
</div>
</div>
<div class="right item">
<div class="ui icon input">
<input type="text" placeholder="Search...">
</div>
</div>
</div>
<br><br><br>
<h4>Big Size Menu Variation</h4>
<div class="ui big menu">
<a class="active item">
GeeksforGeeks
</a>
<div class="menu">
<div class="ui dropdown item">
Programming Languages <i class="dropdown icon"></i>
<div class="menu">
<a class="item">C</a>
<a class="item">C++</a>
<a class="item">Java</a>
<a class="item">Python</a>
</div>
</div>
</div>
<div class="menu">
<div class="ui dropdown item">
Web Technology <i class="dropdown icon"></i>
<div class="menu">
<a class="item">HTML</a>
<a class="item">CSS</a>
<a class="item">JavaScript</a>
<a class="item">Bootstrap</a>
</div>
</div>
</div>
<div class="right item">
<div class="ui icon input">
<input type="text" placeholder="Search...">
</div>
</div>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo describe los usos de la variación del tamaño del menú de la interfaz de usuario semántica.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Menu Size Variation
</title>
<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>
<div class="ui container center aligned">
<h2 style="color:green">
GeeksforGeeks
</h2>
<h3>Semantic-UI Menu Size Variation</h3>
</div>
<br>
<div class="ui container three column grid">
<div class="column">
<h4>Mini Size Menu Variation</h4>
<div class="ui secondary mini vertical menu">
<a class="active item">
GeeksforGeeks
</a>
<div class="ui dropdown item">
<i class="dropdown icon"></i>
Programming Languages
<div class="menu">
<div class="header">C</div>
<a class="item">C++</a>
<a class="item">Java</a>
<a class="item">Python</a>
</div>
</div>
<div class="ui dropdown item">
<i class="dropdown icon"></i>
Web Technology
<div class="menu">
<div class="header">HTML</div>
<a class="item">CSS</a>
<a class="item">JavaScript</a>
<a class="item">Angular.js</a>
</div>
</div>
</div>
</div>
<div class="column">
<h4>Small Size Menu Variation</h4>
<div class="ui secondary small vertical menu">
<a class="active item">
GeeksforGeeks
</a>
<div class="ui dropdown item">
<i class="dropdown icon"></i>
Programming Languages
<div class="menu">
<div class="header">C</div>
<a class="item">C++</a>
<a class="item">Java</a>
<a class="item">Python</a>
</div>
</div>
<div class="ui dropdown item">
<i class="dropdown icon"></i>
Web Technology
<div class="menu">
<div class="header">HTML</div>
<a class="item">CSS</a>
<a class="item">JavaScript</a>
<a class="item">Angular.js</a>
</div>
</div>
</div>
</div>
<div class="column">
<h4>Big Size Menu Variation</h4>
<div class="ui secondary big vertical menu">
<a class="active item">
GeeksforGeeks
</a>
<div class="ui dropdown item">
<i class="dropdown icon"></i>
Programming Languages
<div class="menu">
<div class="header">C</div>
<a class="item">C++</a>
<a class="item">Java</a>
<a class="item">Python</a>
</div>
</div>
<div class="ui dropdown item">
<i class="dropdown icon"></i>
Web Technology
<div class="menu">
<div class="header">HTML</div>
<a class="item">CSS</a>
<a class="item">JavaScript</a>
<a class="item">Angular.js</a>
</div>
</div>
</div>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
Producción:
Nota: Podemos cambiar los diferentes tamaños de los nombres de las clases para obtener los diferentes tamaños del menú de navegación.
Referencia: https://semantic-ui.com/collections/menu.html#size