Pure CSS Scrollable Vertical Menu
Scrollable vertical menus are very useful to make our web pages compact, as it may not be feasible to show all the list items which would take up the entire height of the viewport. Let us create a scrollable vertical menu using pure CSS.
Bellow mentioned and described the classes that are required to create this layout.
- pure-menu: It is the default class that generates the horizontal menu. It can contain the menu items and headings in the form of a list.
- pure-menu-horizontal: It is the class added to the default vertical ‘pure-menu’ to make it a horizontal menu.
- pure-menu-list: It is the class for the unordered list that contains the menu items. The list items inside this list must have the class ‘pure-menu-item’.
- pure-menu-item: It is the class added to the list items inside this list.
- pure-menu-heading: It is the class that is added for the headings inside or outside the menu list. By default, it capitalizes the text inside.
- pure-menu-scrollable: It is the class that makes the pure-menu-horizontal be scrolled or flicked when the width of the website is not fit to the menu size.
- pure-menu-link: It is the class that is added to the links inside the menu items.
- menu-custom: A user-defined class to specify the height of our scrollable menu. If not specified then the menu will take the entire height it needs for all it’s items to be displayed.
Syntax:
<div class="pure-menu pure-menu-scrollable menu-custom">
<ul class="pure-menu-list">
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
...
</a>
</li>
</ul>
</divNote: Do not forget to add the pure CSS CDN to be able to use the pure CSS framework
Example:
HTML
<!DOCTYPE html><html><head> <!-- Pure CSS CDN--> <link rel="stylesheet" href= integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5" crossorigin="anonymous"> <!-- Internal CSS --> <style> .menu-custom { height: 150px; } </style> <title>Scrollable-vertical-menu</title></head><body> <div class="pure-menu pure-menu-scrollable menu-custom"> <ul class="pure-menu-list"> <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"> Bootstrap </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"> JQuery </a> </li> <li class="pure-menu-item"> <a href="#" class="pure-menu-link"> React JS </a> </li> <li class="pure-menu-item"> <a href="#" class="pure-menu-link"> SQL </a> </li> <li class="pure-menu-item"> <a href="#" class="pure-menu-link"> MongoDB </a> </li> </ul> </div></body></html> |
Output:
scrollable-vertical-menu
Reference: https://purecss.io/menus/
Please Login to comment...