CSS & Jquery 顶部 header 滑块

Question

我想创建一个与此相同的顶部面板滑块website 当我查看该网站源代码时，我看到了所有内容，因为我复制了有助于创建它的特定代码，但我有两个问题。

屏幕截图

当我点击选项时，我无法让我的代码滑动。
我无法从这个 image 裁剪那个幻灯片菜单图像按钮。

你好，请帮助我，我真的有麻烦了，如何从这个 image.

制作可滑动或裁剪菜单图像

要查看原始网站的源代码，请点击此处，网址为 here。

我的代码是：

#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

如果我理解正确，你需要做一些修改：

您需要添加js代码来处理按钮上的click事件。
我稍微更改了 css 和 html 以使其适合您想要的行为。
我正在使用 css3 过渡来创建 "slide" 效果。有关详细信息，请阅读此 post
您标记的徽标左侧的奇怪线条不是来自图像，而是来自 link（a 标记）。你在那里放了一个 space 字符，而 a 标签默认有 text-decoration: underline，所以根据这个规则画线。

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-->

Answer 2

您可以在每个元素上使用 jQuery 和 onclick 事件来向下滑动并显示它们。

别忘了导入 jQuery 库 :7

使用这个：

    <div id="netbanking_branches" class="netbanking_branches">
      <a href="" class="netbanking_button" id="netbanking_button" title="Netbanking Branches" tabindex="4"></a>
      <div id="netbanking_popup">
        <div id="netbanking_content">
          <div id="netbanking_content_heading">
            <p>contant</p>
          </div>
        </div>
      </div>
    <div id="content">
     content in your upper slider
    <div id="netbanking_button">close</div>
   </div>
    <script>
      jQuery('#netbanking_button').on('click',function(){
         $('#content').slideDown();
      });
      jQuery('#netbanking_button_close').on('click',function(){
         $('#content').slideUp();
      });
    </script>

CSS & Jquery 顶部 header 滑块

CSS & Jquery top header slider

html

css

jquery

slide