Freelance Front End Developer

Responsive jQuery Slide Out Notification Bar

Posted in: Front End Code

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.

	
<aside class="sidebar">
	
	/* The hamburger button */
  <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>
    </ul>
  </div>
</aside>

<section class="content">
  <h2>Just a bunch of content to show click events still work - Reduce browser width to see the effects</h2>
  
  <p>Your Content</p>
</section>


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 acheived with pointer-events.

	
/* Sass Variables */
$mobile-width: 767px;
$transition-time: 0.3s;

/* The sidebar */

.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; /* This stops the sidebar being clickable on mobile */
     width: 250px;
  }
}

.button-open {
  background: #CCC;
  display: inline-block;
  color: black;
  width: 100%;
  border: 0;
  text-align: center;
  top: 0;
  right: 0;
  outline: 0;
  padding: 12px 20px 12px 45px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: absolute;
  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;
    }
  }
}

/* This adds the animation and styles for the slider */

.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);  /* This must be the same size as the width for .slider */
      overflow: scroll;
      height: 100vh;

      &.open{
        transform: translateX(0);
    }
  }
}

/* Simple list styles - style as you like */

.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 / Close button 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 CSS3, 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.

Tags: