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, Smartphones, etc. The Pure.CSS Horizontal-to-Scrollable menu does not need any JavaScript functions, its inbuilt CSS classes are enough for it.
Classes: Below mentioned and described classes 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.
Syntax:
<div class="pure-menu pure-menu-horizontal pure-menu-scrollable">
.....
</div>Example 1: This example demonstrates a simple Horizontal-to-scrollable menu bar.
HTML
<!DOCTYPE html><html>
<head>
<title>Responsive horizontal-scrollable menu</title>
<link rel="stylesheet"
href=
integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
<style>
.menu{
background-color: green;
}
.menu h3, .menu a{
color: white;
}
a:hover{
background-color: white;
color: green;
}
body{
background-image: url(
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
</style>
</head>
<body>
<div class="pure-menu pure-menu-horizontal
pure-menu-scrollable menu">
<h3 class="pure-menu-heading">GeeksforGeeks</h3>
<ul class="pure-menu-list">
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Home
</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">
React
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Angular
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Nodejs
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Express
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Mongodb
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
About
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Contact
</a>
</li>
</ul>
</div>
</body>
</html>
|
Output:
Example 2: The following code demonstrates that when the website width decrease to 72em, the horizontal-to-Scrollable list items in the menu bar will separate from the heading. We should use @media() rule to detect the changes in the width of the website. The code under the @media() rule will execute when the condition becomes “true”.
HTML
<!DOCTYPE html><html>
<head>
<title>Responsive horizontal-scrollable menu</title>
<link rel="stylesheet"
href=
integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
<style>
.menubar {
background-color: green;
position: relative;
}
.menu {
display: inline-block;
width: auto;
vertical-align: middle;
}
.menu a {
color: white;
}
.menu a:hover {
background-color: white;
color:green;
}
.website_name {
display: block;
text-align: center;
position: relative;
}
body{
background-image: url(
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
/* To toggle the normal menu bar to
Horizontal-scrollable menu bar
when the window size reduced to particular size*/
@media (max-width: 72em)
{
.menu
{
display:block;
}
.menubar_top
{
position: relative;
padding: 0.5em;
}
.scrollable_links
{
position: absolute;
width: 100%;
background-color: transparent;
background-color: black;
}
}
</style>
</head>
<body>
<div class="menubar">
<div class="pure-menu menu menubar_top">
<a href="#" class="pure-menu-heading website_name">
GeeksforGeeks
</a>
</div>
<div class="pure-menu pure-menu-horizontal pure-menu-scrollable
menu scrollable_links">
<ul class="pure-menu-list">
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Home
</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">
React
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Angular
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Nodejs
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Express
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Mongodb
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
About
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Contact
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
|
Output: