Semantic UI es un marco de desarrollo de código abierto que proporciona clases predefinidas para hacer que nuestro sitio web se vea hermoso, sorprendente y receptivo. Es similar a Bootstrap que tiene clases predefinidas. Utiliza jQuery y CSS para crear las interfaces. También se puede usar directamente a través de CDN como bootstrap.
El menú de la interfaz de usuario semántica nos proporciona diferentes clases de menú para hacer que la barra de navegación o los menús laterales sean más hermosos. La interfaz de usuario semántica usa flexbox en los menús, lo que permite que cada elemento del menú se estire automáticamente al tamaño del elemento más grande. En este artículo, veamos la variación de color del menú.
Clases de variación de color del menú de segmento de IU semántica:
- rojo: Esto establece el color del elemento del menú como rojo.
- naranja: Esto establece el color del elemento del menú como naranja.
- amarillo: Esto establece el color del elemento del menú como amarillo.
- oliva: Esto establece el color del elemento del menú como oliva.
- verde: Esto establece el color del elemento del menú como verde.
- verde azulado: Esto establece el color del elemento de menú como verde azulado.
- azul: Esto establece el color del elemento del menú como azul.
- violeta: Esto establece el color del elemento de menú como violeta.
- púrpura: Esto establece el color del elemento del menú como púrpura.
- rosa: Esto establece el color del elemento del menú como rosa.
- marrón: Esto establece el color del elemento del menú como marrón.
- gris: Esto establece el color del elemento del menú como gris.
- negro: Esto establece el color del elemento del menú como negro.
- invertido: Esto establece el elemento de menú de color invertido.
Sintaxis:
<div class="ui color item menu">
<a class="item">
...
</a>
<a class="item">
....
</a>
</div>
Ejemplo-1: Este ejemplo demuestra el tipo de variación de color del menú.
HTML
<!DOCTYPE html> <html> <head> <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> <center> <h1 class="ui green header">GeeksforGeeks</h1> <strong> Semantic-UI Menu Colored Variation </strong> </center> <br /> <br /> <div class="ui container"> <div class="ui teal four item menu"> <a class="active item"> Home </a> <a class="item"> Problems </a> <a class="item"> Courses </a> <a class="item"> Events </a> </div> <div class="ui red four item menu"> <a class="active item"> Home </a> <a class="item"> Problems </a> <a class="item"> Courses </a> <a class="item"> Events </a> </div> <div class="ui green four item menu"> <a class="active item"> Home </a> <a class="item"> Problems </a> <a class="item"> Courses </a> <a class="item"> Events </a> </div> <div class="ui blue four item menu"> <a class="active item"> Home </a> <a class="item"> Problems </a> <a class="item"> Courses </a> <a class="item"> Events </a> </div> <div class="ui violet four item menu"> <a class="active item"> Home </a> <a class="item"> Problems </a> <a class="item"> Courses </a> <a class="item"> Events </a> </div> <div class="ui pink four item menu"> <a class="active item"> Home </a> <a class="item"> Problems </a> <a class="item"> Courses </a> <a class="item"> Events </a> </div> <div class="ui olive four item menu"> <a class="active item"> Home </a> <a class="item"> Problems </a> <a class="item"> Courses </a> <a class="item"> Events </a> </div> </div> </body> </html>
Producción:
Variación de color del menú de interfaz de usuario semántica
Ejemplo-2: Este ejemplo demuestra el tipo de variación de color invertida del menú.
HTML
<!DOCTYPE html> <html> <head> <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> <center> <h1 class="ui green header">GeeksforGeeks</h1> <strong> Semantic-UI Menu Colored Variation </strong> </center> <br /> <br /> <div class="ui container"> <div class="ui teal inverted menu"> <a class="active item"> Home </a> <a class="item"> Courses </a> <a class="item"> About </a> <a class="right item"> Sign in </a> </div> <div class="ui red inverted menu"> <a class="active item"> Home </a> <a class="item"> Courses </a> <a class="item"> About </a> <a class="right item"> Sign in </a> </div> <div class="ui green inverted menu"> <a class="active item"> Home </a> <a class="item"> Courses </a> <a class="item"> About </a> <a class="right item"> Sign in </a> </div> <div class="ui blue inverted menu"> <a class="active item"> Home </a> <a class="item"> Courses </a> <a class="item"> About </a> <a class="right item"> Sign in </a> </div> <div class="ui olive inverted menu"> <a class="active item"> Home </a> <a class="item"> Courses </a> <a class="item"> About </a> <a class="right item"> Sign in </a> </div> <div class="ui pink inverted menu"> <a class="active item"> Home </a> <a class="item"> Courses </a> <a class="item"> About </a> <a class="right item"> Sign in </a> </div> </div> </body> </html>
Producción :
Variación de color del menú de interfaz de usuario semántica
Referencia: https://semantic-ui.com/collections/menu.html#colored
Publicación traducida automáticamente
Artículo escrito por lokeshpotta20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA