Open In App

Pure CSS Responsive Side Menu Layout

Last Updated : 18 Aug, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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






                        










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=


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


                            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/ 


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                            
 
                                

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Pure CSS Responsive Horizontal-to-Scrollable Menu Layout
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Pure CSS Responsive Horizontal-to-Vertical Menu Layout
            

        
    
        
            

                Pure CSS Responsive Horizontal-to-Scrollable Menu Layout
            

        
    
        
            

                Server Side Rendering vs Client Side Rendering vs Server Side Generation
            

        
    
        
            

                Pure CSS Responsive Grids
            

        
    
        
            

                What to understand Pure CSS Responsive Design ?
            

        
    
        
            

                Pure CSS Regular Grid vs Responsive Grid
            

        
    
        
            

                Pure CSS Layout Complete Reference
            

        
    
        
            

                Pure CSS Photo Gallery Layout
            

        
    
        
            

                Pure CSS Landing Page Layout
            

        
    
        
            

                Pure CSS Blog Layout
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
T

        

            
        

        

                                    


                                    

                                        triashabiswas                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox