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. Utiliza una clase para agregar CSS a los elementos.
El menú es una excelente manera de agrupar elementos que navegan a varias páginas. El menú es una parte esencial de cada sitio web, ya que nos ayuda a navegar a través de varias páginas web. La interfaz de usuario semántica nos proporciona un menú de estilo personalizado. Podemos hacer que los elementos del menú no tengan bordes en la interfaz de usuario semántica utilizando la clase sin bordes .
Clases de variación sin bordes del menú de la interfaz de usuario semántica:
- sin bordes: elimina el borde de los elementos del menú.
Sintaxis:
<div class="ui borderless menu"> <a class="item">Item Name</a> ... </div>
Ejemplo 1: En el siguiente ejemplo, hemos creado un menú estándar sin bordes.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI Menu Borderless Variation</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 style="width: 100vw; height: 100vh;"> <div class="ui container"> <h2 style="color: green;">GeeksForGeeks</h2> <h4>Semantic UI Menu Borderless Variation</h4> <hr> <br /> <div class="ui borderless menu"> <a class="item">Home</a> <a class="item">About</a> <a class="item">Profile</a> <a class="item">Learn</a> </div> </div> </body> </html>
Producción:
Variación sin bordes del menú de interfaz de usuario semántica
Ejemplo 2: En el siguiente ejemplo, hemos creado un menú vertical sin bordes.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI Menu Borderless Variation</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 style="width: 100vw; height: 100vh;"> <div class="ui container"> <h2 style="color: green;">GeeksForGeeks</h2> <h4>Semantic UI Menu Borderless Variation</h4> <hr> <br /> <div class="ui vertical borderless menu"> <a class="item">Home</a> <a class="item">About</a> <a class="item">Profile</a> <a class="item">Learn</a> </div> </div> </body> </html>
Producción:
Menú vertical sin bordes
Referencia: https://semantic-ui.com/collections/menu.html#borderless
Publicación traducida automáticamente
Artículo escrito por tejsidda34 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA