Skip to content
Related Articles

Related Articles

Pure CSS Responsive Side Menu Layout

View Discussion
Improve Article
Save Article
  • Last Updated : 18 Aug, 2022
View Discussion
Improve Article
Save Article

Pure CSS is a free and open-source CSS framework. It is a set of tools for building responsive websites and web applications. This was created by Yahoo and is used to create websites that are more responsive, attractive, and speedy. It serves as a strong substitute for Bootstrap. Pure CSS was created with consideration for responsive design. We thus receive prebuilt responsive styles that are consistent across all platforms.

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 device, such as on tablets and smartphones, it is used to make the menu bar responsive. The Pure CSS Responsive menu needs the ui.js file to work properly. We need to add an anchor tag to create the hamburger menu which hides the menu in tablet and mobile screen sizes.

Pure CSS Responsive Side Menu Layout Used Classes:

  • pure-menu: This class is used to create the basic horizontal menu. It contains the menu items or headings in form of a list.
  • pure-menu-list: This class is used to add an unordered list that holds the menu items.
  • pure-menu-item: This class is added to all items inside this list.
  • pure-menu-heading: This class is used to add a heading inside or outside the menu list. It capitalizes the text inside, by default.

The id(s) added in the below syntax are compulsory because the JS is designed to work with them.

Syntax:

<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>

Example 1: The below code demonstrates how to create a Pure CSS Responsive Side Menu Layout.

HTML




<!doctype html>
<html lang="en">
 
<head>
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
    <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>


Output:

 

Example 2: The below code demonstrates how to create a Pure CSS Responsive Side Menu Layout with a scrollable menu inside.

HTML




<!doctype html>
<html lang="en">
 
<head>
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
    <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">
                            Competitive 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>


Output:

 

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!