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.
Semantic-UI Menu Attached Variation se utiliza para adjuntar otros segmentos de contenido con los elementos del menú.
Clases usadas de la variación adjunta del menú de interfaz de usuario semántica:
- adjunto superior: esta clase se utiliza para adjuntar los elementos del menú a la parte superior del contenido.
- adjunto inferior: esta clase se utiliza para adjuntar los elementos del menú al final del contenido.
Sintaxis:
<div class="ui top attached menu">
...
</div>
Ejemplo 1: este ejemplo describe los usos de la variación adjunta del menú de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Menu Attached Variation </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Menu Attached Variation</h3> </div> <div class="ui container"> <div class="ui top attached tabular menu"> <a class="item active"> HTML </a> <a class="item"> CSS </a> <a class="item"> JavaScript </a> <a class="item"> Bootstrap </a> </div> <div class="ui attached segment"> HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. It is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages. A markup language is used to define the text document within tag which defines the structure of web pages. It is a markup language that is used by the browser to manipulate text, images, and other content to display in the required format. </div> </div> </body> </html>
Producción:
Ejemplo 2: este ejemplo describe los usos de la variación adjunta del menú de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Menu Attached Variation </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Menu Attached Variation</h3> </div> <div class="ui container"> <div class="ui top attached menu"> <a class="item active"> HTML </a> <a class="item"> CSS </a> <a class="item"> JavaScript </a> <a class="item"> Bootstrap </a> </div> <div class="ui attached segment"> HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. It is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages. A markup language is used to define the text document within tag which defines the structure of web pages. It is a markup language that is used by the browser to manipulate text, images, and other content to display in the required format. </div> </div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/collections/menu.html#attached