Barra superior CSS de la Fundación

Posted on by Rudeus Greyrat

Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de sitios web, aplicaciones y correos electrónicos receptivos sorprendentes que parecen sorprendentes y pueden ser accesibles para cualquier dispositivo. Es utilizado por muchas empresas como Facebook, eBay, Mozilla, Adobe e incluso Disney. El marco se basa en un arranque similar a Saas. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles. Uno de esos componentes importantes de la Fundación es Top Bar.

En este artículo, aprenderemos sobre el componente de barra superior de Foundation CSS. Top Bar en Foundation CSS ayuda a envolver los componentes flexibles del menú dentro de un contenedor. La barra superior en Foundation CSS contiene dos secciones, a saber, la sección derecha y la sección izquierda. En los dispositivos de pantalla pequeña, estas dos partes se apilan una sobre la otra.

Elementos de la barra superior de Foundation CSS:

Clases de barra superior de Foundation CSS:

  • top-bar: esta clase se usa en la etiqueta div dentro de la cual se escribe todo el código de barras superior.
  • top-bar-left: Esta clase se usa para definir la sección izquierda de la barra superior.
  • top-bar-right: Esta clase se utiliza para definir la sección derecha de la barra superior.

Sintaxis:

<div class="top-bar">
    <div class="top-bar-left">
         ...    
    </div>
    <div class="top-bar-right">
         ...
    </div>
</div>

Diseño receptivo y avanzado : para crear una barra superior receptiva, que tendrá una barra de menú de clic de alternancia en una pantalla móvil (es decir, una pantalla pequeña), necesitamos crear una barra superior con una identificación única. Creamos un elemento de la barra de título usando la clase «title-bar» y agregamos el atributo «data-responsive-toggle» y establecemos su valor en la ID única de la barra superior. Por último, debe agregar el atributo «cambio de datos» al elemento que activará el cambio y establecerá su valor en la ID única de la barra superior.

Sintaxis:

<div class="title-bar" data-responsive-toggle="examplebar">
    <button class="..." type="button" data-toggle="examplebar">
    </button>
      <div class="title-bar-title">...</div>
 </div>
 <div class="top-bar" id="examplebar">
    <div class="top-bar-left">
      ...
    </div>
    <div class="top-bar-right">
      ...    
    </div>
</div>

Apilamiento: dos secciones de la barra superior se apilarán entre sí en pantallas pequeñas de forma predeterminada. Ahora, para habilitar el apilamiento personalizado en diferentes tamaños de pantalla, podemos usar las clases.

  • stacked-for-medium: esta clase hará que las dos secciones de la barra superior de Foundation CSS se apilen entre sí en una pantalla de tamaño mediano.
  • stacked-for-large: esta clase hará que las dos secciones de la barra superior de Foundation CSS se apilen entre sí en la pantalla grande.

Ejemplo 1: a continuación se muestra el ejemplo de una barra superior simple con 3 menús, un menú tiene un menú desplegable en la sección izquierda y la sección derecha de la barra superior contiene un cuadro de búsqueda y un botón de búsqueda.

HTML

<!DOCTYPE html>
<html lang="en">
 
<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 rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
        crossorigin="anonymous">
         
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"
            crossorigin="anonymous">
    </script>   
</head>
 
<body>
    <div class="top-bar" style="background-color:rgb(143,253,167);">
        <div class="top-bar-left" >
            <ul class="dropdown menu" data-dropdown-menu>
                <li class="menu-text" style="color:green;">
                    GeeksforGeeks
                </li>
                <li>
                    <a href="#">Articles</a>
                    <ul class="menu vertical">
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a></li>
                        <li><a href="#">js</a></li>
                        <li><a href="#">Bootstrap</a></li>
                        <li><a href="#">Foundation CSS</a></li>
                    </ul>
                </li>
                <li><a href="#">Practice</a></li>
                <li><a href="#">Interview Experience</a></li>
            </ul>
        </div>
        <div class="top-bar-right">
            <ul class="menu">
                <li><input type="search" placeholder="Search"></li>
                <li><button type="button" class="button">Search</button></li>
            </ul>
        </div>
    </div>
 
    <script>
        $(document).foundation();
    </script>
 
</body>
</html>

Producción:

 

Ejemplo 2: hemos creado la misma barra superior que en el ejemplo anterior, pero la hicimos receptiva.

HTML

<!DOCTYPE html>
<html lang="en">
 
<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 rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
        crossorigin="anonymous">
         
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"
         crossorigin="anonymous">
    </script>  
</head>
<body>   
       
    <div class="title-bar" data-responsive-toggle="responsive-menu"
          data-hide-for="medium">
        <button class="menu-icon" type="button" data-toggle="responsive-menu">
        </button>
        <div class="title-bar-title">Menu</div>
    </div>
       
    <div class="top-bar" id="responsive-menu">
        <div class="top-bar-left">
          <ul class="dropdown menu" data-dropdown-menu>
            <li class="menu-text" style="color:green;">
                GeeksforGeeks
            </li>
            <li>
                <a href="#">Articles</a>
                <ul class="menu vertical">
                    <li><a href="#">HTML</a></li>
                    <li><a href="#">CSS</a></li>
                    <li><a href="#">js</a></li>
                    <li><a href="#">Bootstrap</a></li>
                    <li><a href="#">Foundation CSS</a></li>
                </ul>
            </li>
            <li><a href="#">Practice</a></li>
            <li><a href="#">Interview Experience</a></li>
          </ul>
        </div>
        <div class="top-bar-right">
          <ul class="menu">
            <li><input type="search" placeholder="Search"></li>
            <li><button type="button" class="button">Search</button>
            </li>
          </ul>
        </div>
    </div>
     
    <script>
        $(document).foundation();
    </script>
 
</body>
</html>

Producción:

 

Navegación fija: también podemos crear una barra superior fija usando el complemento fijo aprendiendo el complemento fijo de Foundation CSS de este artículo.

Referencia: https://get.foundation/sites/docs/top-bar.html 

Publicación traducida automáticamente

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *