Sidebar navigation with scroll bar
How to » Sidebar navigation with scroll bar
Study in this chapter:
- How to Implement a Scrollbar on a Web Page using CSS
CSS Style is the language we can use to improve the form and feel of website pages in our applications. Using the current CSS scrollbar specification from W3C, we can customize the scrollbar's appearance using CSS.
We can add CSS style an element as:
Internal Style - by using a <style> element in the <head> section
External Style - by using an external CSS file as style.css
Example:
Browser Support
| Element |  Chrome |
 IE |
 Firefox |
 Opera |
 Safari |
| vertical scrolling menu | Yes | Yes | Yes | Yes | Yes |
Implement scrollbar on web page using CSS
- ::-webkit-scrollbar - entire scrollbar.
- ::-webkit-scrollbar-button - the buttons on the scrollbar.
- ::-webkit-scrollbar-thumb - draggable handle to make scrolls.
- ::-webkit-scrollbar-track - progress bar.
CSS style:
<style>
*, *:before, *:after {
box-sizing: border-box;
}
html, body {
height: 98%;
}
html {
background-color: #222;
}
body {
position: relative;
max-width: 1024px;
min-width: 768px;
margin: 0 auto;
}
header {
color: #fff;
background-color: #666;
}
h1 {
font-weight: normal;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 36px;
}
.sidebar, .main {
transition: all 0.3s ease-out;
overflow: scroll;
-webkit-overflow-scrolling: touch;
position: absolute;
top: 64px;
bottom: 0;
}
.sidebar {
width: 260px;
background-color: #333;
left: 0;
}
.main {
background-color: #f5f5f5;
position: absolute;
left: 260px;
right: 0;
padding: 20px;
}
h2 {
margin: 0 0 1em 0;
}
h3 {
background-color: #555;
color: #ccc;
margin: 0;
padding: 0 20px;
font-weight: normal;
line-height: 2;
text-transform: uppercase;
font-size: 90%;
}
.toggle-menu {
color: #ccc;
text-decoration: none;
font-size: 50px;
float: left;
display: block;
position: absolute;
left: 0;
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease-out;
}
.toggle-menu:hover {
color: #fff;
}
.toggle-menu:before {
height: 64px;
width: 64px;
display: block;
text-align: center;
line-height: 64px;
font-size: 24px;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
background-color: #444;
}
nav ul li {
padding: 20px;
color: #ccc;
background-color: #333;
margin-bottom: 1px;
border-left: 10px solid transparent;
}
nav ul li.active {
border-color: #e35205;
}
@media all and (max-width: 1024px) {
.sidebar.toggled {
left: 0;
z-index: 10;
box-shadow: 3px 1px 10px rgba(0, 0, 0, 0.8);
}
.sidebar.toggled + .main {
overflow: hidden;
}
.sidebar {
left: -260px;
}
.main {
left: 0;
}
.toggle-menu {
z-index: 1;
opacity: 1;
}
h1 {
left: 40px;
}
}
</style>
Related subjects:
Display flex
Border Style
Border width
HTML code - Sidebar navigation with scroll bar
We Write the HTML code for our web page structure.
<header>
<h1>Title</h1>
</header>
<aside class="sidebar">
<h3>Contents</h3>
<nav>
<ul>
<li>Chapter 1</li>
<li>Chapter 2</li>
<li>Chapter 3</li>
<li>Chapter 4</li>
<li class="active">Chapter 5</li>
<li>Chapter 6</li>
<li>Chapter 7</li>
<li>Chapter 8</li>
<li>Chapter 9</li>
<li>Chapter 10</li>
<li>Chapter 11</li>
<li>Chapter 12</li>
<li>Chapter 13</li>
<li>Chapter 14</li>
<li>Chapter 15</li>
</ul>
</nav>
</aside>
<section class="main">
<h2>Chapter 2</h2>
<p>Scrolling if needed. Use overflow-auto to add scrollbars to an element in the event that its content overflows the bounds of that element. Make the scrollbar always visible along a webpage or in a drop-down menu when using a Mac computer · In the Menu bar, click Apple Menu > System Offer a scrollbar if an area has scrolling content. ... the triangles on either side of the pictures would scroll through different options </p>
<p>DAutomatic overflow means a scroll bar won't be present if it isn't needed [3]: Make it smooth scrolling on iOS devices before. A side scroll layout is an attractive and practical choice, especially for portfolio websites, catalogues, maps, and similar. Discovering projects, exploring</p>
</section>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script id="rendered-js" >
$(function () {
$('.toggle-menu').click(function (e) {
e.preventDefault();
$('.sidebar').toggleClass('toggled');
});
});
//# sourceURL=pen.js
</script>
Tags: sidebar navigation with scroll bar, scrooling navigation bar, vertical scrooling menu, how to add scroll bar in sidebar,
Sidebar scroll - entire code
column-gap: sets the gap between the columns
row-gap: sets the gap between the rows
<!DOCTYPE html>
<html lang="en" ><head>
<meta charset="UTF-8">
<title> Scrolling Sidebar</title><style>
*, *:before, *:after {
box-sizing: border-box;
}
html, body {
height: 98%;
}html {
background-color: #222;
}body {
position: relative;
max-width: 1024px;
min-width: 768px;
margin: 0 auto;
}header {
color: #fff;
background-color: #666;}
h1 {
font-weight: normal;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 36px;
}.sidebar, .main {
transition: all 0.3s ease-out;
overflow: scroll;
-webkit-overflow-scrolling: touch;
position: absolute;
top: 64px;
bottom: 0;
}.sidebar {
width: 260px;
background-color: #333;
left: 0;
}.main {
background-color: #f5f5f5;
position: absolute;
left: 260px;
right: 0;
padding: 20px;
}h2 {
margin: 0 0 1em 0;
}h3 {
background-color: #555;
color: #ccc;
margin: 0;
padding: 0 20px;
font-weight: normal;
line-height: 2;
text-transform: uppercase;
font-size: 90%;
}.toggle-menu {
color: #ccc;
text-decoration: none;
font-size: 50px;
float: left;
display: block;
position: absolute;
left: 0;
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease-out;
}
.toggle-menu:hover {
color: #fff;
}
.toggle-menu:before {
height: 64px;
width: 64px;
display: block;
text-align: center;
line-height: 64px;
font-size: 24px;
}nav ul {
list-style: none;
padding: 0;
margin: 0;
background-color: #444;
}
nav ul li {
padding: 20px;
color: #ccc;
background-color: #333;
margin-bottom: 1px;
border-left: 10px solid transparent;
}
nav ul li.active {
border-color: #e35205;
}@media all and (max-width: 1024px) {
.sidebar.toggled {
left: 0;
z-index: 10;
box-shadow: 3px 1px 10px rgba(0, 0, 0, 0.8);
}
.sidebar.toggled + .main {
overflow: hidden;
}.sidebar {
left: -260px;
}.main {
left: 0;
}.toggle-menu {
z-index: 1;
opacity: 1;
}h1 {
left: 40px;
}
}
</style><script>
window.console = window.console || function(t) {};
</script><script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body >
<header><h1>Title</h1>
</header><aside class="sidebar">
<h3>Contents</h3>
<nav>
<ul>
<li>Chapter 1</li>
<li>Chapter 2</li>
<li>Chapter 3</li>
<li>Chapter 4</li>
<li class="active">Chapter 5</li>
<li>Chapter 6</li>
<li>Chapter 7</li>
<li>Chapter 8</li>
<li>Chapter 9</li>
<li>Chapter 10</li>
<li>Chapter 11</li>
<li>Chapter 12</li>
<li>Chapter 13</li>
<li>Chapter 14</li>
<li>Chapter 15</li>
</ul>
</nav>
</aside>
<section class="main">
<h2>Chapter 2</h2>
<p>Scrolling if needed. Use overflow-auto to add scrollbars to an element in the event that its content overflows the bounds of that element. Make the scrollbar always visible along a webpage or in a drop-down menu when using a Mac computer · In the Menu bar, click Apple Menu > System Offer a scrollbar if an area has scrolling content. ... the triangles on either side of the pictures would scroll through different options </p>
<p>DAutomatic overflow means a scroll bar won't be present if it isn't needed [3]: Make it smooth scrolling on iOS devices before. A side scroll layout is an attractive and practical choice, especially for portfolio websites, catalogues, maps, and similar. Discovering projects, exploring</p>
</section>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script id="rendered-js" >
$(function () {
$('.toggle-menu').click(function (e) {
e.preventDefault();
$('.sidebar').toggleClass('toggled');
});
});
//# sourceURL=pen.js
</script></body>
</html>
Summary of description
scrolling navigation bar, vertical scrolling menu, how to add scroll bar in sidebar
Sidebar navigation with scroll bar - how to
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.