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=</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= <ul class="pure-menu-list"> <li class="pure-menu-item"> <a href= class="pure-menu-link"> About Us </a> </li> <li class="pure-menu-item"> <a href= class="pure-menu-link"> Careers </a> </li> <li class="pure-menu-item"> <a href= 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"> neveropen </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=</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= GfG </a> <ul class="pure-menu-list"> <li class="pure-menu-item"> <a href= class="pure-menu-link"> About Us </a> </li> <li class="pure-menu-item"> <a href= class="pure-menu-link"> Careers </a> </li> <li class="pure-menu-item"> <a href= 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= class="pure-menu-link"> Data Structures </a> </li> <li class="pure-menu-item"> <a href= class="pure-menu-link"> Algorithms </a> </li> <li class="pure-menu-item"> <a href= class="pure-menu-link"> Interview Preparation </a> </li> <li class="pure-menu-item"> <a href= class="pure-menu-link"> Topic-wise Practice </a> </li> <li class="pure-menu-item"> <a href= class="pure-menu-link"> C++ </a> </li> <li class="pure-menu-item"> <a href= class="pure-menu-link"> Java </a> </li> <li class="pure-menu-item"> <a href= class="pure-menu-link"> Python </a> </li> <li class="pure-menu-item"> <a href= class="pure-menu-link"> Competitive Programming </a> </li> <li class="pure-menu-item"> <a href= class="pure-menu-link"> Machine Learning </a> </li> <li class="pure-menu-item"> <a href= class="pure-menu-link"> HTML </a> </li> <li class="pure-menu-item"> <a href= class="pure-menu-link"> CSS </a> </li> <li class="pure-menu-item"> <a href= class="pure-menu-link"> JavaScript </a> </li> <li class="pure-menu-item"> <a href= class="pure-menu-link"> SDE Sheet </a> </li> <li class="pure-menu-item"> <a href= class="pure-menu-link"> Puzzles </a> </li> <li class="pure-menu-item"> <a href= class="pure-menu-link"> GFG School </a> </li> <li class="pure-menu-item"> <a href= class="pure-menu-link"> GFG Practice </a> </li> <li class="pure-menu-item"> <a href= class="pure-menu-link"> Projects </a> </li> </ul> </div> </div> <div id="main"> <div class="header"> <h1 style="color:green">neveropen</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/
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
