我的目标:
使用Boostrap 3,创建一个带有独立滚动的侧边栏菜单。切换按钮需要位于固定的导航标题中。 Semantic UI具有我正在寻找的确切行为。我不喜欢在不使用插件的情况下这样做。
我尝试过的事情:
答案 0 :(得分:1)
您可以轻松实现,无需任何插件,您可以根据自己的需要进行自定义:
CSS:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/ListViewSeries" />
</LinearLayout>
JS:
body {
overflow-x: hidden;
}
.off-canvas {
width: 300px;
position: fixed;
left: 0;
top: 0;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
background-color: #333;
transform: translateX(-100%);
transition: .4s ease-in-out;
z-index: 1060;
}
.off-canvas-active .off-canvas {
transform: translateX(0);
}
.navbar-fixed-top {
transition: .4s ease-in-out;
width: 100%;
}
.page-wrapper {
padding-top: 50px;
transition: .4s ease-in-out;
}
.off-canvas-active .page-wrapper,
.off-canvas-active .navbar-fixed-top {
transform: translateX(300px);
}
.list-group {
padding: 20px;
}
.off-canvas-overlay {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
z-index: 1050;
visibility: hidden;
opacity: 0;
transition: .4s ease-in-out;
}
.off-canvas-active .off-canvas-overlay {
opacity: 1;
visibility: visible;
}