Open In App

Pure CSS Scrollable Vertical Menu

Improve
Improve
Like Article
Like
Save
Share
Report

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

Below 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>
</div

Note: 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/



Last Updated : 10 Apr, 2023
Like Article
Save Article
Share your thoughts in the comments
Similar Reads