CSS & Jquery 顶部标题滑块

Question

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

屏幕截图

1. 当我点击该选项时，我无法使我的代码可滑动。

2. 我无法从此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

如果我理解正确，您需要做一些更改：

1. 需要添加js代码来处理按钮上的click事件。
2. 我稍微更改了 css 和 html，使其适合您想要的行为。
3. 我正在使用 css3 过渡来创建“幻灯片”效果。欲了解更多信息，请阅读此post
4. 您标记的徽标左侧的奇怪线条不是来自图像，而是来自链接（a 标签）。你放了一个空格字符，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

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

不要忘记导入 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>