Pure CSS Responsive Side Menu Layout
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.
<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.
Example 2: The below code demonstrates how to create a Pure CSS Responsive Side Menu Layout with a scrollable menu inside.