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 fija del menú de interfaz de usuario semántica se utiliza para fijar la posición de los elementos del menú con respecto a su contenido.
Clase utilizada de variación fija del menú de interfaz de usuario semántica:
- fixed: esta clase se utiliza para fijar la posición de los elementos del menú.
Sintaxis:
<div class="ui top fixed menu">
...
</div>
Ejemplo 1: este ejemplo describe los usos de la variación fija del menú de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Menu Fixed Variation </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body style="min-height: 800px;"> <div class="ui container center aligned"> <h2 style="color:green; padding-top: 50px;"> GeeksforGeeks </h2> <h3>Semantic-UI Menu Fixed Variation</h3> <div class="ui top fixed menu"> <a class="item"> <i class="tag icon"></i> GeeksforGeeks </a> <a class="item"> <i class="tasks icon"></i> My Tasks </a> <a class="item"> <i class="phone icon"></i> +91 98765643210 </a> <a class="item"> <i class="envelope outline icon"></i> Mail </a> <a class="item"> <i class="coffee icon"></i> Coffee </a> <a class="item"> <i class="code icon"></i> My Code </a> </div> <div class="ui bottom fixed menu"> <a class="item"> <i class="tag icon"></i> GeeksforGeeks </a> <a class="item"> <i class="tasks icon"></i> My Tasks </a> <a class="item"> <i class="phone icon"></i> +91 98765643210 </a> <a class="item"> <i class="envelope outline icon"></i> Mail </a> <a class="item"> <i class="coffee icon"></i> Coffee </a> <a class="item"> <i class="code icon"></i> My Code </a> </div> </div> </body> </html>
Producción:
Ejemplo 2: este ejemplo describe los usos de la variación fija del menú de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Menu Fixed Variation </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body style="min-height: 800px;"> <div class="ui container center aligned"> <h2 style="color:green; padding-top: 50px;"> GeeksforGeeks </h2> <h3>Semantic-UI Menu Fixed Variation</h3> <div class="ui left fixed vertical menu"> <a class="item"> <i class="tag icon"></i> GeeksforGeeks </a> <a class="item"> <i class="tasks icon"></i> My Tasks </a> <a class="item"> <i class="phone icon"></i> +91 98765643210 </a> <a class="item"> <i class="envelope outline icon"></i> Mail </a> <a class="item"> <i class="coffee icon"></i> Coffee </a> <a class="item"> <i class="code icon"></i> My Code </a> </div> <div class="ui right fixed vertical menu"> <a class="item"> <i class="tag icon"></i> GeeksforGeeks </a> <a class="item"> <i class="tasks icon"></i> My Tasks </a> <a class="item"> <i class="phone icon"></i> +91 98765643210 </a> <a class="item"> <i class="envelope outline icon"></i> Mail </a> <a class="item"> <i class="coffee icon"></i> Coffee </a> <a class="item"> <i class="code icon"></i> My Code </a> </div> </div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/collections/menu.html#fixed