Contenido de entrada del menú de interfaz de usuario semántica

El marco de código abierto de la interfaz de usuario semántica brinda íconos o glifos que se usan para mostrar imágenes relacionadas con algunos elementos usando CSS y jQuery que se usan para crear excelentes interfaces de usuario. Es un marco de desarrollo utilizado para crear diseños hermosos y receptivos.

El menú de IU semántica es un grupo de elementos que muestra diferentes acciones de navegación. Podemos navegar a diferentes páginas del sitio web. Un menú puede ser una combinación de enlaces, una barra de búsqueda y menús desplegables.

El contenido de entrada del menú de la interfaz de usuario semántica se utiliza para colocar elementos de entrada dentro del menú. El elemento de entrada se puede utilizar para buscar artículos, blogs o contenido en su sitio.

Clase de contenido de entrada de menú de interfaz de usuario semántica:

entrada: cree un contenedor con esta clase y coloque el elemento de entrada dentro de él. Entonces este elemento se puede colocar dentro del menú.

Sintaxis : agregue el elemento de contenido de entrada dentro del menú de la siguiente manera:

<div class="ui menu">
    <div class="item">
        <div class="ui icon input">
            <input type="text" placeholder="...." />
            ...
        </div>
    </div>
</div>

Ejemplo : En el siguiente ejemplo, tenemos un menú con un elemento de entrada HTML .

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
          rel="stylesheet"
    />   
</head>
  
<body>
    <div class="ui container">
      <center>
        <div class="ui header green">
          <h1> GeeksforGeeks </h1>
        </div>
        <strong> Semantic UI Menu Input Content </strong>
        <br/>
        <br/>
      </center>
  
      <div class="ui menu">
        <div class="header item">
          GeeksforGeeks
        </div>
        <a
          class="item"
          href="https://www.geeksforgeeks.org/data-structures"
          target="_blank"
        >
          Data Structures
        </a>
        <a
          class="item"
          href="https://www.geeksforgeeks.org/fundamentals-of-algorithms"
          target="_blank"
        >
          Algorithms
        </a>
        <div class="item">
          <div class="ui icon input">
            <input type="text" placeholder="Find Tutorials  ..." />
            <i class="search icon"></i>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Producción:

Enlace de referencia: https://semantic-ui.com/collections/menu.html#input

Publicación traducida automáticamente

Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

Deja una respuesta Cancelar la respuesta