CSS和Jquery顶部标题滑块

Question

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

屏幕截图

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

2. 我无法从此image中裁剪该幻灯片菜单图像按钮。

您想帮我吗，我真的很麻烦，如何使用此image制作可滑动或裁剪的菜单图像。

要查看原始网站的源代码，请访问此处，网站为here。

我的代码是：

apply plugin: 'com.android.library'

android {
    compileSdkVersion 26
    defaultConfig {
        minSdkVersion 24
        targetSdkVersion 26
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
        externalNativeBuild {
            cmake {
                cppFlags "-v -Wall"
            }
        }
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
    sourceSets {
        main {
            // let gradle pack the shared library into apk
            jniLibs.srcDirs = ['../src/main/jniLibs']
        }
    }
    externalNativeBuild {
        cmake {
            path "CMakeLists.txt"
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:26.1.0'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

#include <iostream>
using namespace std;

//Global Variables

int cubeLength = 0;
int cubeWidth = 0;
int cubeHeight = 0;
int cubeSurfaceArea = 0;
int cubeVolume = 0;
bool valid = true;
char choice;

int main() {
do {
//Ask user for cubeLength and validate input for integer values
do {
valid = true;
cout << "Please enter a numerical value for the length of a cube" <<endl;
cin >> cubeLength;
    if (cin.fail()) {
        valid = false;
        cin.clear();
        cin.ignore(INT_MAX, '\n');
        cout << "Invalid cube length. Input is not an integer" << endl;
        }
    } while (!valid);

//Ask user for cubeWidth and validate input for integer values
do {    
    valid = true;
    cout << "Please enter a numerical value for the width of a cube" <<endl;
    cin >> cubeWidth;
    if (cin.fail()) {
        valid = false;  
        cin.clear();
        cin.ignore(INT_MAX, '\n');
        cout << "Invalid cube width. Input is not an integer" << endl;
    }
} while (!valid);
//Ask user for cubeHeight and validate input for integer values
do {
    valid = true;
    cout << "Please enter a numerical value for the height of a cube" <<endl;
    cin >> cubeHeight;
    if (cin.fail()) {   
        valid = false;
        cin.clear();
        cin.ignore(INT_MAX, '\n');
        cout << "Invalid cube height. Input is not an integer" << endl;
    }
}while (!valid);

//Perform calculations for surface area and volume then assign them to their associated variables
if (cubeLength >= 1 && cubeWidth >= 1 && cubeHeight >= 1)
    {
        cubeSurfaceArea = ((2*(cubeWidth*cubeLength))+(2*(cubeLength*cubeHeight))+(2*(cubeWidth*cubeHeight)));
        cubeVolume = (cubeWidth*cubeLength*cubeHeight);
    }
    else {
        cout << "Sorry, one or more cube inputs is invalid. Ending program. Please restart and try again." << endl;
        return 0;
    }   

//Output surface area and volume to user
cout << "Length = " << cubeLength << " Width = " << cubeWidth << " Height = " << cubeHeight << endl;
cout << "The surface area of your cube is " << cubeSurfaceArea << "." << endl;
cout << "The volume of your cube is " << cubeVolume << "." << endl;
cout << "Would you like to try again? (y/n)" << endl;
cin >> choice;

} while (choice != 'n');

//Pause system and end program
return 0;
}

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>