jquery - CSS 和 Jquery 顶部标题 slider

Question

我想创建一个像这样的顶部面板 slider 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. 您标记的 Logo 左侧的奇怪线条不是来自图像，而是来自链接(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-->