CSS & Jquery top header slider

Question

I want create a top panel slider same like this website when I view that website source I see everything , since I copy the particular codes which help to create this but I have two issues.

Screenshot Image

1. I am not able to make my code slidable when I hit the option.

2. I am unable to crop that slide menu image button from this image.

Hii wanna please help me, I am really in trouble , how to I make slidable or crop menu image from this image.

To view source code of that original website is here and website is here.

My code is:

#netbanking_branches {
  margin: 0 0px 0 10px;
}

.netbanking_button {
  background-position: -58px -643px;
  height: 35px;
  width: 200px;
}

#netbanking_branches,
.netbanking_button {
  float: left;
}

.netbanking_button,
.netbanking_button_up {
  background-image: url("https://corp.onlinesbi.com/personal/images/sprite_a.png") ! important;
  background-repeat: no-repeat;
}

#netbanking_popup {
  border-bottom: 5px solid #cbcbcb;
  z-index: 1000;
  left: 0px;
  top: 0px;
  background: #d9d9d9 url("https://corp.onlinesbi.com/personal/images/netbanking_repeat.png" repeat-x;
  width: 100%;
}

#netbanking_content {
  background: url("https://corp.onlinesbi.com/personal/images/netbanking_img.png") no-repeat left top;
  height: 123px;
  padding: 10px 0 0 255px;
  color: #6f6f6f;
  line-height: 20px;
}

#netbanking_content_heading {
  color: #0197c0;
  font-size: 15px;
  font-weight: bold;
  margin: 5px 0;
}

#netbanking_popup,
.product_content {
  display: none;
}

#netbanking_popup {
  position: absolute;
}

#netbanking_content_heading {
  font-size: 13px;
}

<!-- Header core info -->
<div id="netbanking_branches" class="netbanking_branches">
  <a href="" class="netbanking_button" title="Netbanking Branches" tabindex="4">&nbsp;</a>
  <div id="netbanking_popup">
    <div id="netbanking_content">
      <div id="netbanking_content_heading">
        <p>contant</p>
      </div>
    </div>
  </div>
  <!-- Header core info Ends-->

Answer 1

If I understand you correctly, you need to do some changes:

1. You need to add js code to handle the click event on the button.
2. I changed the css and the html a bit so it will fit to the behaviour you want.
3. I'm using css3 transition to create the "slide" effect. For more info, read this post
4. The strange line in the left of the logo you marked is not coming from the image but from the link (a tag). You put there a space character and the a tag has text-decoration: underline by default so the line draw by this rule.

const netbankingPopup = document.querySelector('#netbanking_popup');
document.querySelector('.netbanking_button').addEventListener('click', e => {
  netbankingPopup.classList.toggle('visible');
  e.preventDefault();
});

body{
  margin: 0;
}

#netbanking_branches {
  text-align: center;
}

.netbanking_button {
  background-position: -58px -643px;
  height: 35px;
  width: 200px;
}

.netbanking_button {
  display: inline-block;
}

.netbanking_button,
.netbanking_button_up {
  background-image: url("https://corp.onlinesbi.com/personal/images/sprite_a.png");
  background-repeat: no-repeat;
}

#netbanking_popup {
  background: #d9d9d9 url("https://corp.onlinesbi.com/personal/images/netbanking_repeat.png") repeat-x;
  width: 100%;
  max-height: 0;
  transition: max-height .3s ease;
  overflow: hidden;
  text-align: left;
}

#netbanking_popup.visible {
  max-height: 100px;
  border-bottom: 5px solid #cbcbcb;
}

#netbanking_popup.visible + .netbanking_button {
  background-position: -58px -590px;
}

#netbanking_content {
  background: url("https://corp.onlinesbi.com/personal/images/netbanking_img.png") no-repeat left top;
  height: 123px;
  padding: 10px 0 0 255px;
  color: #6f6f6f;
  line-height: 20px;
}

#netbanking_content_heading {
  color: #0197c0;
  font-size: 15px;
  font-weight: bold;
  margin: 5px 0;
}

.product_content {
  display: none;
}

#netbanking_content_heading {
  font-size: 13px;
}

<!-- Header core info -->
<div id="netbanking_branches" class="netbanking_branches">
  <div id="netbanking_popup">
    <div id="netbanking_content">
      <div id="netbanking_content_heading">
        <p>contant</p>
      </div>
    </div>
  </div>
  <a href="" class="netbanking_button" title="Netbanking Branches" tabindex="4"></a>
</div>
<!-- Header core info Ends-->