Pure CSS Scrollable Vertical Menu Last Updated : 10 Apr, 2023 Comments Improve Suggest changes Like Article Like 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= "https://unpkg.com/[email protected]/build/pure-min.css" 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/ Comment More infoAdvertise with us S suavethapa Follow Improve Article Tags : Web Technologies CSS Pure CSS Similar Reads Pure CSS Pure CSS is a CSS framework. It is a set of free and open-source tools for building responsive websites and web applications. Yahoo developed this, which is used to make websites that are quicker, more elegant, and more responsive. It is a viable alternative to Bootstrap. Pure CSS is designed with k 2 min read Pure CSS Introduction Pure CSS is a framework of CSS. It is a free and open-source tool collection for creating responsive websites and web applications. Pure CSS is developed by Yahoo and is used for creating faster, beautiful, and responsive websites. It can be used as an alternative to Bootstrap. Why we use Pure CSS? 2 min read Pure CSS BasePure CSS Hiding ElementsWhile making an interactive website, there may be elements that need to be hidden by default or on some action of the user. In this article, we will be seeing how to hide elements in Pure CSS. Pure CSS Hiding Elements Classes: hidden: This class is used to hide elements while supporting old browsers 2 min read Pure CSS ImagesPure CSS is a framework of CSS. It is a free and open-source tool collection for creating responsive websites and web applications. Pure CSS is developed by Yahoo and is used for creating faster, beautiful, and responsive websites. It can be used as an alternative to Bootstrap. Pure CSS provides cla 2 min read Pure CSS Responsive Horizontal-to-Scrollable Menu Layout A Horizontal-to-Scrollable menu is a type of responsive menu bar in Pure.CSS, which changes the horizontal menu bar to a horizontally scrollable menu bar. It is used to make the menu bar responsive when the width of the website increases or decreases from device to device, For example, Tablets, Smar 4 min read Pure CSS ButtonsPure CSS ButtonsButtons are one of the most common UI elements. They made it possible for users to interact with a system and take action by making selections. We can create different types of buttons with the help of Pure CSS. Pure CSS Buttons Classes: Default ButtonsDisabled buttonsPrimary buttonsActive buttonsCu 4 min read Pure CSS Disabled ButtonsButtons are one of the most common UI elements. It is used for users to interact with a system and take action by making selections. Pure CSS Disabled Button is used to create a disabled button. To make the disabled button, we will use the Pure CSS class “pure-button-disabled†with the class "pure-b 1 min read Pure CSS Active ButtonsButtons are one of the most common UI elements. It is used for users to interact with a system and take action by making selections. Pure CSS Active Buttons are used to create an active button that works when the user clicks on the button. The button can be created using <a> and <button> 1 min read Pure CSS Primary ButtonsButtons are one of the most common UI elements. It is used for users to interact with a system and take action by making selections. Pure CSS Primary Button is used to create a primary action button. The primary button is created using Pure CSS class. Pure CSS Primary Buttons Class: pure-button-prim 1 min read Pure CSS Customizing ButtonsPure CSS is a CSS framework. It is a set of free and open-source tools for building responsive websites and web applications. Yahoo developed this, which is used to make websites that are quicker, more elegant, and more responsive. It can be used as an alternative to Bootstrap. The Customizing Butto 3 min read Pure CSS Colored buttons with rounded cornersButtons serve to be an important component of web pages as they help improve the overall user experience. So it is quite important to learn how to customize them according to our requirements. Pure CSS helps us create buttons on the go. We can use the following 3 properties to style our button. Some 3 min read Pure CSS Buttons SizesButtons are one of the most common UI elements. They made it possible for users to interact with a system and take action by making selections. Sometimes we required different size buttons, there it comes, with the help of the Pure CSS Button Size class. Pure CSS Button Sizes class: There is no pred 2 min read Pure CSS Buttons IconsButtons are one of the most common UI elements. They made it possible for users to interact with a system and take action by making selections. To make the buttons more user-friendly we can put icons on the buttons. Pure CSS does not ship with the icons, there are so many icon packages available tha 2 min read Pure CSS Button GroupsButtons are one of the most common UI elements. To create buttons group use "pure-button-group" class and add the buttons as number as you want with the help of "pure-button" class. You can also make the button active by using "pure-button-active" class. Pure CSS Button Groups Classes: pure-button-g 1 min read Pure CSS TablesPure CSS TablesIntroduction: Before starting with Pure we must know the basics of plain CSS. Basically, Pure CSS is a Cascading Style Sheet framework developed by YAHOO. The main reason for developing Pure CSS is used to develop responsive and reactive websites like Bootstrap which is also compatible with mobile d 5 min read Pure CSS Bordered TableTable is an arrangement of data in rows and columns, or possibly in a more complex structure. Tables are widely used in communication, research, and data analysis. In Pure CSS, we will add "pure-table" class to add styles on table. This class adds the padding and borders to table elements, and empha 2 min read Pure CSS Table with Horizontal BordersA table is an arrangement of data in rows and columns, or possibly in a more complex structure. Tables are widely used in communication, research, and data analysis. In Pure CSS, we will add a "pure-table" class to add styles to the table. This class adds padding and borders to table elements and em 2 min read Pure CSS Stripped TableA table is an arrangement of data in rows and columns, or possibly in a more complex structure. Tables are widely used in communication, research, and data analysis. In Pure CSS, we will add a "pure-table" class to add styles to the table. This class adds padding and borders to table elements and em 2 min read Pure CSS FormsPure CSS FormsForms are essential in websites to collect data or information for various purposes. Using Pure CSS we can create different types of forms. Pure CSS Forms Classes: Default Form Stacked Form Aligned Form Grouped Inputs Default Form: Add the class "pure-form" to any <form> element to create a de 4 min read Pure CSS Stacked FormPure CSS is a framework of CSS. It is a free and open-source tool collection for creating responsive websites and web applications. Pure CSS is developed by Yahoo and is used for creating faster, beautiful, and responsive websites. It can be used as an alternative to Bootstrap. In this article, we w 2 min read Pure CSS Aligned FormPure CSS is a framework of CSS. It is a free and open-source tool collection for creating responsive websites and web applications. Pure CSS is developed by Yahoo and is used for creating faster, more beautiful, and more responsive websites. It can be used as an alternative to Bootstrap. Pure CSS Al 2 min read Pure CSS Form Grouped InputsPure CSS is a framework of CSS. It is a free and open-source tool collection for creating responsive websites and web applications. Pure CSS is developed by Yahoo and is used for creating faster, beautiful, and responsive websites. It can be used as an alternative to Bootstrap. In this article, we w 2 min read Pure CSS Form Input SizingForms are essential in websites to collect data or information for various purposes. Using Pure CSS Forms, we can create different types of forms. The size of the inputs of forms is always important. So inputs are important in any webpage form. It is used to take various inputs from the user which a 2 min read Pure.CSS Required InputsIn some cases when we ask someone to fill a form and few things are optional and few things are a must to fill in that form. In that case, we can use the HTML required in Pure CSS as well. This attribute works with other types of input like radio, checkbox, number, text, etc. Syntax: <input requi 1 min read Pure CSS Disabled InputsIn this article, we will see how to disable the input field in Pure CSS. In some cases, when we ask someone to fill a form few things are activated as well a few things are disabled for their previous choices. In that case, we can use HTML disabled in Pure CSS as well. This attribute works with othe 2 min read Pure CSS Rounded InputsPure CSS is a framework of CSS. It is a free and open-source tool collection for creating responsive websites and web applications. Pure CSS is developed by Yahoo and is used for creating faster, beautiful, and responsive websites. It can be used as an alternative to Bootstrap. Pure CSS provides a " 1 min read Pure CSS Checkboxes and Radio ButtonsIn Pure CSS, we do not have any particular layout for Checkboxes and Radio Button type inputs. But we can use those types of inputs by using the Pure CSS classes. The below-mentioned classes are used for checkboxes and radio buttons. Checkbox: To use checkboxes, we can apply the input tag inside of 2 min read Pure CSS GridsPure CSS GridsWhile creating a genuine responsive website layout the grid system is a crucial tool for web developers. A grid is a set of classes that helps us to divide the width of the screen or display into smaller units and make the website look responsive on various devices. Pure.CSS also comes up with such 4 min read Pure CSS ImagesPure CSS is a framework of CSS. It is a free and open-source tool collection for creating responsive websites and web applications. Pure CSS is developed by Yahoo and is used for creating faster, beautiful, and responsive websites. It can be used as an alternative to Bootstrap. Pure CSS provides cla 2 min read Pure CSS MenusPure CSS MenusIn this article we will learn about Pure CSS Menus, Menus are the main tools for visitors to navigate throughout a website. Pure.CSS comes up with very simple vertical and horizontal menus that can be easily customized by the developer. Pure CSS Menu Classes: Vertical MenuHorizontal MenuSelected and 5 min read Pure CSS Horizontal MenuWe come across horizontal menus on almost every website. Pure CSS helps us implement such menus with ease by using the pure-menu class. Pure-menu class by default creates a vertical menu which we can simply convert into a horizontal one by adding the class pure-menu-horizontal. One of the most commo 2 min read Pure CSS Selected and Disabled ItemsMenus are the main tools for visitors to navigate throughout a website. Pure CSS comes up with very simple vertical and horizontal menus that can be easily customized by the developer. Pure CSS Selected and Disabled Items Menu provides default classes that enable us to highlight a menu item as disab 2 min read Pure CSS DropdownPure CSS is a CSS framework. It is a free and open-source tool collection for creating responsive websites and web applications. Pure CSS is developed by Yahoo and is used for creating faster, beautiful, and responsive websites. It can be used as an alternative to Bootstrap. Dropdowns are one of the 2 min read Pure CSS Scrollable Horizontal MenuWhen there isn't enough room, the scrollable horizontal menu items can be used. It gives responsiveness to the web pages. To create a scrollable horizontal menu, add the pure-menu-scrollable class. Pure.CSS provides vertical menus by default. You can change the vertical menu to a horizontal menu by 3 min read Pure CSS Scrollable Vertical MenuScrollable 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 t 2 min read Like