Responsive jQuery Slide Out Notification Bar
Last modified: 22nd September 2022
This is a piece of code I developed for a project I was working on at the time, which is similar in functionality to the notification bar you find on the right side of Facebook, except responsive.
When you reduce the browser down / view on mobile, the sidebar is now hidden and activated using the ‘feed’ button.
I added this little animated hamburger/cross icon, which is a nice touch I feel. Languages uses in this: HTML, CSS/Sass, jQuery.
The HTML
The HTML is pretty simple.
<div class="sidebar">
<a href="#" class="button-open">
<span href="#" class="open-button">
<span></span>
<span></span>
<span></span>
</span>
<span class="hidden">Activity</span> Feed
</a>
<div class="slider">
<ul class="activity-feed">
<li class="activity-feed__item"><a href="#">Item</a></li>
<li class="activity-feed__item"><a href="#">Item</a></li>
<li class="activity-feed__item"><a href="#">Item</a></li>
<li class="activity-feed__item"><a href="#">Item</a></li>
<li class="activity-feed__item"><a href="#">Item</a></li>
<li class="activity-feed__item"><a href="#">Item</a></li>
<li class="activity-feed__item"><a href="#">Item</a></li>
</ul>
</div>
</div>
The CSS
So I’ve added some comments in this part to hopefully help you edit it how you want.
The main issue I had with this was getting the sidebar content hidden on mobile, and not blocking any of the content underneath, which was achieved with pointer-events:none;
$mobile-width: 767px;
$transition-time: 0.3s;
.sidebar {
width: 20%;
float: right;
overflow: hidden;
padding-top: 40px;
position: relative;
height: 100vh;
background: white;
pointer-events: all;
transition: 0.3s;
transition-delay: 0.2s;
@media (max-width: 1279px) {
width: 30%;
}
@media (max-width: $mobile-width) {
background: transparent;
position: absolute;
right: 0;
pointer-events: none;
width: 250px;
}
}
.button-open {
background: #CCC;
display: inline-block;
color: black;
width: 100%;
border: 0;
text-align: center;
top: 0;
outline: 0;
padding: 12px 20px 12px 45px;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
position: absolute;
right: 0;
transition: $transition-time;
transition-delay: 0.1s;
pointer-events: none;
@media (max-width: $mobile-width) {
width: 120px;
pointer-events: all;
}
.hidden {
@media (max-width: $mobile-width) {
display: none;
}
}
&.open {
@media (max-width: $mobile-width) {
width: 100%;
text-align: left;
}
}
}
.slider{
background: white;
pointer-events: all;
transition: $transition-time ease-out;
@media (max-width: $mobile-width) {
height: 100px;
width: 250px;
position:absolute;
transform: translateX(250px);
overflow: scroll;
height: 100vh;
&.open{
transform: translateX(0);
}
}
}
.activity-feed {
list-style-type: none;
padding: 0;
margin: 0;
&__item {
a {
color: green;
padding: 10px 20px;
display: block;
border-bottom: 1px solid #EEE;
&:hover {
background: #EEE;
}
}
}
}
/* Hamburger Styles */
.open-button {
width: 15px;
height: 20px;
transform: rotate(0deg);
transition: .5s ease-in-out;
position: absolute;
cursor: pointer;
border-bottom: 0;
top: 14px;
left: 15px;
z-index: 9999;
border-bottom: 0;
@media (min-width: 768px) {
display: none;
}
&:hover {
border-bottom: 0;
}
}
.open-button span {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: black;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: .25s ease-in-out;
}
.open-button span:nth-child(1) {
top: 0;
transform-origin: left center;
}
.open-button span:nth-child(2) {
top: 5px;
transform-origin: left center;
}
.open-button span:nth-child(3) {
top: 10px;
transform-origin: left center;
}
.open-button.open span:nth-child(1) {
transform: rotate(45deg);
top: 0px;
left: 3px;
}
.open-button.open span:nth-child(2) {
width: 0;
opacity: 0;
}
.open-button.open span:nth-child(3) {
transform: rotate(-45deg);
top: 11px;
left: 3px;
}
The jQuery
All the animations are achieved using CSS, the jQuery merely adds click events for toggling classes
/* Click events */
$(function() {
$(".button-open").on("click", function(e) {
$(".open-button").toggleClass("open");
$(".button-open").toggleClass("open");
$('.slider').toggleClass('open');
});
});
Any improvements?
I’m all ears! Hit me up on Twitter @jo_eyre or drop me an email.