Navegación receptiva CSS básica

Posted on by Rudeus Greyrat

Fundación CSS

La Navegación receptiva contiene varios componentes, como el menú básico, el menú desplegable, el menú de acordeón, la barra superior, etc., que nos ayudan a diseñar y armar la navegación receptiva de manera rápida y fácil sin esfuerzo. También permite cambiar entre los diferentes patrones dependiendo de los distintos tamaños de pantalla. Los 3 componentes modulares en la Navegación receptiva son el Menú receptivo, el Alternar menú receptivo y el Alternar receptivo con animación.

  • Menú de navegación receptiva : este es el componente más básico de la navegación receptiva. El menú receptivo tiene algunas clases integradas, lo que nos permite reorientar el menú en diferentes tamaños de pantalla.
  • Alternancia de navegación receptiva : al usar esta función, podemos agregar la funcionalidad del menú de alternancia en el tamaño de pantalla que queremos (principalmente en pantallas pequeñas). Para hacer una alternancia, el atributo más importante es la alternancia de respuesta a datos y el atributo de ocultación de datos que debemos especificar para determinar en qué tamaño de pantalla se ocultará el menú de alternancia.
  • Cambio de navegación sensible con animación : esto es lo mismo que el cambio de menú sensible normal. Aquí, cuando alternamos el menú en el tamaño de pantalla pequeña, podemos animarlo. Cuando queremos usar animaciones de la biblioteca Motion UI, debemos agregar el atributo data-animate=”someAnimationIn someAnimationOut” .

Ejemplo 1: en este ejemplo, el menú se convierte en un menú desplegable en tamaño de pantalla pequeño y en un menú desplegable horizontal en tamaño mediano a grande.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" 
         crossorigin="anonymous">
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" 
         crossorigin="anonymous">
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.js">
    </script>
    <title>
        Foundation CSS Responsive Navigation
    </title>
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>Foundation CSS Responsive Menu</h3>
    <ul class="vertical medium-horizontal menu" 
        data-responsive-menu="drilldown medium-dropdown">
        <li>
            <a href="#">DSA</a>
            <ul class="vertical menu">
                <li>
                    <a href="#">Data Structures</a>
                    <ul class="vertical menu">
                        <li>
                            <a href="#">Stack</a>
                        </li>
                        <li>
                            <a href="#">Queue</a>
                        </li>
                        <li>
                            <a href="#">Linked List</a>
                        </li>
                        <li>
                            <a href="#">Binary Tree</a>
                        </li>
                        <li>
                            <a href="#">Graph</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">Algorithms</a>
                </li>
            </ul>
        </li>
        <li> 
            <a href="#">Web Technology</a>
            <ul class="vertical menu">
                <li>
                    <a href="#">HTML</a>
                </li>
                <li>
                    <a href="#">CSS</a>
                </li>
                <li>
                    <a href="#">JavaScript</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Competitive Programming</a>
            <ul class="vertical menu">
                <li>
                    <a href="#">Courses</a>
                </li>
                <li>
                    <a href="#">Problems</a>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        $(document).foundation();
    </script>
</body>
</html>

Producción:

 

Ejemplo 2 : este ejemplo describe el menú receptivo con alternar.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" 
         crossorigin="anonymous">
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" 
         crossorigin="anonymous">
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.js">
    </script>
    <title>
        Foundation CSS Responsive Navigation
    </title>
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>Foundation CSS Responsive Menu Toggle</h3>
    <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">GFG</li>
                <li class="has-submenu">
                    <a href="#0">Data Structures</a>
                    <ul class="submenu menu vertical" data-submenu>
                        <li>
                            <a href="#0">Stack</a>
                        </li>
                        <li>
                            <a href="#0">Queue</a>
                        </li>
                        <li>
                            <a href="#0">Linked List</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#0">Web Technology</a>
                </li>
                <li>
                    <a href="#0">Competitive Programming</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 3 : en este ejemplo, hemos agregado una animación para alternar la barra de navegación que hace que la navegación receptiva.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" 
         crossorigin="anonymous">
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" 
         crossorigin="anonymous">
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.js">
    </script>
    <title>
        Foundation CSS Responsive Navigation
    </title>
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>Foundation CSS Responsive Menu Toggle</h3>
    <div class="title-bar" 
         data-responsive-toggle="example-animated-menu" 
         data-hide-for="medium">
        <button class="menu-icon" 
                type="button" 
                data-toggle>
        </button>
        <div class="title-bar-title">Menu</div>
    </div>
    <div class="top-bar"
         id="example-animated-menu" 
         data-animate="hinge-in-from-top fade-out">
        <div class="top-bar-left">
            <ul class="dropdown menu" data-dropdown-menu>
                <li class="menu-text">GFG</li>
                <li> 
                    <a href="#">Data Structures</a>
                    <ul class="menu vertical">
                        <li>
                            <a href="#">Stack</a>
                        </li>
                        <li>
                            <a href="#">Queue</a>
                        </li>
                        <li>
                            <a href="#">Linked List</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">Web Technology</a>
                </li>
                <li>
                    <a href="#">Competitive Programming</a>
                </li>
            </ul>
        </div>
    </div>
    <script>
        $(document).foundation();
    </script>
</body>
</html>

Producción:

 

Referencia : https://get.foundation/sites/docs/responsive-navigation.html

Publicación traducida automáticamente

Artículo escrito por priyanshuchatterjee01 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 *