Diseño de menú lateral sensible CSS puro

Posted on by Rudeus Greyrat

Pure CSS es un marco CSS gratuito y de código abierto. Es un conjunto de herramientas para crear sitios web y aplicaciones web receptivos. Esto fue creado por Yahoo y se usa para crear sitios web que son más receptivos, atractivos y rápidos. Sirve como un fuerte sustituto de Bootstrap. Pure CSS se creó teniendo en cuenta el diseño receptivo. Por lo tanto, recibimos estilos de respuesta preconstruidos que son consistentes en todas las plataformas.

El diseño de menú lateral receptivo es un tipo de barra de menú receptiva en Pure CSS, que cambia la barra de menú horizontal a un botón de alternar oculto cuando se reduce el tamaño de la pantalla. Cuando el ancho del sitio web cambia de un dispositivo a otro, como en tabletas y teléfonos inteligentes, se usa para que la barra de menú responda. El menú Responsivo de CSS puro necesita el archivo ui.js para funcionar correctamente. Necesitamos agregar una etiqueta de anclaje para crear el menú de hamburguesas que oculta el menú en los tamaños de pantalla de tabletas y dispositivos móviles.

Diseño de menú lateral receptivo puro CSS Clases utilizadas:

  • pure-menu: Esta clase se utiliza para crear el menú horizontal básico. Contiene los elementos del menú o encabezados en forma de lista.
  • pure-menu-list: esta clase se usa para agregar una lista desordenada que contiene los elementos del menú.
  • pure-menu-item: esta clase se agrega a todos los elementos dentro de esta lista .
  • pure-menu-heading: esta clase se usa para agregar un encabezado dentro o fuera de la lista del menú. Pone en mayúscula el texto interior, por defecto.

Los identificadores agregados en la siguiente sintaxis son obligatorios porque el JS está diseñado para trabajar con ellos.

Sintaxis:

<div id="layout">
    <a href="#menu" id="menuLink" class="menu-link">
       ...
    </a>
    <div id="menu">
        <div class="pure-menu">
            <a class="pure-menu-heading" href="...">
               ...
            </a>
            <ul class="pure-menu-list">
                <li class="pure-menu-item">...</li>
            </ul>
        </div>
    </div>
</div>

Ejemplo 1: el siguiente código demuestra cómo crear un diseño de menú lateral sensible a CSS puro .

HTML

<!doctype html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
        "https://purecss.io/css/pure/pure-min.css">
    <link rel="stylesheet" href=
    "https://purecss.io/layouts/side-menu/styles.css">
    <script src="https://purecss.io/js/ui.js"></script>
</head>
  
<body>
    <div id="layout">
        <a href="#menu" id="menuLink" class="menu-link">
            <!-- Hamburger icon -->
            <span></span>
        </a>
  
        <div id="menu">
            <div class="pure-menu">
                <a class="pure-menu-heading" href=
                    "https://www.geeksforgeeks.org/">GfG</a>
  
                <ul class="pure-menu-list">
                    <li class="pure-menu-item">
                        <a href=
                        "https://www.geeksforgeeks.org/about/"
                            class="pure-menu-link">
                            About Us
                        </a>
                    </li>
                    <li class="pure-menu-item">
                        <a href=
                        "https://www.geeksforgeeks.org/careers/" 
                            class="pure-menu-link">
                            Careers
                        </a>
                    </li>
                    <li class="pure-menu-item">
                        <a href=
                "https://www.geeksforgeeks.org/about/contact-us/" 
                            class="pure-menu-link">
                            Contact Us
                        </a>
                    </li>
                    <li class="pure-menu-item 
                        menu-item-divided pure-menu-selected">
                        <a href="#content" class="pure-menu-link">
                            Content
                        </a>
                    </li>
                </ul>
            </div>
        </div>
  
        <div id="main">
            <div class="header">
                <h1 style="color:green">
                    GeeksforGeeks
                </h1>
                <h2>Pure CSS Responsive Side Menu Layout</h2>
            </div>
  
            <div class="content">
                <p>
                    Free Tutorials, Millions of Articles, Live, 
                    Online and Classroom Courses, Frequent Coding 
                    Competitions ,Webinars by Industry Experts,
                    Internship opportunities and Job Opportunities.
                </p>
  
                <p>
                    Responsive Side Menu Layout is a type of 
                    responsive menu bar in Pure. CSS, which 
                    changes the horizontal menu bar to a hidden 
                    toggle button when the screen size is reduced. 
                    When the width of the website changes from 
                    device to devices, such as on tablets and 
                    smartphones, it is used to make the menu bar 
                    responsive. The Pure.CSS Responsive menu
                    does not need any JavaScript functions, its 
                    inbuilt CSS classes are sufficient for it.
                </p>
            </div>
        </div>
    </div>
</body>
  
</html>

Producción:

 

Ejemplo 2: el siguiente código muestra cómo crear un diseño de menú lateral receptivo de CSS puro con un menú desplazable en su interior.

HTML

<!doctype html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
    "https://unpkg.com/purecss@2.1.0/build/pure-min.css">
    <link rel="stylesheet" href=
    "https://purecss.io/layouts/side-menu/styles.css">
    <script src="https://purecss.io/js/ui.js"></script>
  
</head>
  
<body>
    <div id="layout">
        <a href="#menu" id="menuLink" class="menu-link">
            <!-- Hamburger icon -->
            <span></span>
        </a>
        <div id="menu">
            <div class="pure-menu">
                <a class="pure-menu-heading" href=
                    "https://www.geeksforgeeks.org/">
                    GfG
                </a>
  
                <ul class="pure-menu-list">
                    <li class="pure-menu-item">
                        <a href=
                        "https://www.geeksforgeeks.org/about/" 
                            class="pure-menu-link">
                            About Us
                        </a>
                    </li>
                    <li class="pure-menu-item">
                        <a href=
                        "https://www.geeksforgeeks.org/careers/" 
                            class="pure-menu-link">
                            Careers
                        </a>
                    </li>
                    <li class="pure-menu-item">
                        <a href=
                        "https://www.geeksforgeeks.org/about/contact-us/" 
                            class="pure-menu-link">
                            Contact Us
                        </a>
                    </li>
                    <li class="pure-menu-item menu-item-divided 
                               pure-menu-selected">
                        <a href="#content" class="pure-menu-link">
                            Content
                        </a>
                    </li>
                    <li class="pure-menu-item">
                        <a href=
                        "https://www.geeksforgeeks.org/about/contact-us/" 
                            class="pure-menu-link">
                            Data Structures
                        </a>
                    </li>
                    <li class="pure-menu-item">
                        <a href=
                        "https://www.geeksforgeeks.org/about/contact-us/"
                            class="pure-menu-link">
                            Algorithms
                        </a>
                    </li>
                    <li class="pure-menu-item">
                        <a href=
                        "https://www.geeksforgeeks.org/about/contact-us/"
                            class="pure-menu-link">
                            Interview Preparation
                        </a>
                    </li>
                    <li class="pure-menu-item">
                        <a href=
                        "https://www.geeksforgeeks.org/about/contact-us/"
                            class="pure-menu-link">
                            Topic-wise Practice
                        </a>
                    </li>
                    <li class="pure-menu-item">
                        <a href=
                        "https://www.geeksforgeeks.org/about/contact-us/" 
                            class="pure-menu-link">
                            C++
                        </a>
                    </li>
                    <li class="pure-menu-item">
                        <a href=
                        "https://www.geeksforgeeks.org/about/contact-us/"
                            class="pure-menu-link">
                            Java
                        </a>
                    </li>
                    <li class="pure-menu-item">
                        <a href=
                        "https://www.geeksforgeeks.org/about/contact-us/"
                            class="pure-menu-link">
                            Python
                        </a>
                    </li>
                    <li class="pure-menu-item">
                        <a href=
                        "https://www.geeksforgeeks.org/about/contact-us/"
                            class="pure-menu-link">
                            Competetive Programming
                        </a>
                    </li>
                    <li class="pure-menu-item">
                        <a href=
                        "https://www.geeksforgeeks.org/about/contact-us/"
                            class="pure-menu-link">
                            Machine Learning
                        </a>
                    </li>
                    <li class="pure-menu-item">
                        <a href=
                        "https://www.geeksforgeeks.org/about/contact-us/"
                            class="pure-menu-link">
                            HTML
                        </a>
                    </li>
                    <li class="pure-menu-item">
                        <a href=
                        "https://www.geeksforgeeks.org/about/contact-us/"
                            class="pure-menu-link">
                            CSS
                        </a>
                    </li>
                    <li class="pure-menu-item">
                        <a href=
                        "https://www.geeksforgeeks.org/about/contact-us/"
                            class="pure-menu-link">
                            JavaScript
                        </a>
                    </li>
                    <li class="pure-menu-item">
                        <a href=
                        "https://www.geeksforgeeks.org/about/contact-us/"
                            class="pure-menu-link">
                            SDE Sheet
                        </a>
                    </li>
                    <li class="pure-menu-item">
                        <a href=
                        "https://www.geeksforgeeks.org/about/contact-us/"
                            class="pure-menu-link">
                            Puzzles
                        </a>
                    </li>
                    <li class="pure-menu-item">
                        <a href=
                        "https://www.geeksforgeeks.org/about/contact-us/"
                            class="pure-menu-link">
                            GFG School
                        </a>
                    </li>
                    <li class="pure-menu-item">
                        <a href=
                        "https://www.geeksforgeeks.org/about/contact-us/"
                            class="pure-menu-link">
                            GFG Practice
                        </a>
                    </li>
                    <li class="pure-menu-item">
                        <a href=
                        "https://www.geeksforgeeks.org/about/contact-us/"
                            class="pure-menu-link">
                            Projects
                        </a>
                    </li>
                </ul>
            </div>
        </div>
  
        <div id="main">
            <div class="header">
                <h1 style="color:green">GeeksforGeeks</h1>
                <h2>Pure CSS Responsive Side Menu Layout</h2>
            </div>
  
            <div class="content">
                <p>
                    Free Tutorials, Millions of Articles, Live, 
                    Online and Classroom Courses, Frequent Coding 
                    Competitions, Webinars by Industry Experts,
                    Internship opportunities and Job Opportunities.
                </p>
                <p>
                    Responsive Side Menu Layout is a type of 
                    responsive menu bar in Pure.CSS, which 
                    changes the horizontal menu bar to a hidden 
                    toggle button when the screen size is reduced. 
                    When the width of the website changes from 
                    device to devices, such as on tablets and 
                    smartphones, it is used to make the menu bar 
                    responsive. The Pure.CSS Responsive menu does 
                    not need any JavaScript functions, its inbuilt 
                    CSS classes are sufficient for it.
                </p>
            </div>
        </div>
    </div>
</body>
  
</html>

Producción:

 

Referencia: https://purecss.io/layouts/side-menu/ 

Publicación traducida automáticamente

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