Back to Blog

Responsive jQuery Slide Out Notification Bar

Posted in: Front End Development

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.

View demo on Codepen

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');
   });
 });

View demo on Codepen

Any improvements?

I’m all ears! Hit me up on Twitter @jo_eyre or drop me an email.


Posted in: Front End Development

Back to Blog