我的html页面中有一个nav-side-menu,显示固定的顶部和固定的左侧。我想做的是让它折叠到左侧,并在小屏幕上显示时带有3条的按钮(我不希望它消失)。例如,当窗口变小时,边栏折叠的方式为:https://pro.propeller.in/components/sidebar.php。这就是我走的距离:
.nav-side-menu {
overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: #2e353d;
/*position: fixed;*/
position: fixed;
top: 100px;
/*width: 300px;*/
width: 210px;
height: 100% !important; /*this line made sure when the screen is maximized, the side menu's height is restored*/
color: #033c73;
}
.nav-side-menu .brand {
background-color: #23282e;
line-height: 50px;
display: block;
text-align: center;
font-size: 14px;
}
.nav-side-menu .toggle-btn {
/*display: none;*/
}
.nav-side-menu ul,
.nav-side-menu li {
list-style: none;
/*padding: 0px;*/
margin: 0px;
line-height: 15px;
/*line-height: 10px;*/
cursor: pointer;
padding-left: 10px;
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
font-family: FontAwesome;
content: "\f078";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
background-color: #181c20;
border: none;
line-height: 28px;
border-bottom: 1px solid #23282e;
margin-left: 0px;
}
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
background-color: #020203;
}
.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
font-family: FontAwesome;
content: "\f105";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
}
.nav-side-menu li {
/*JS: edited*/
/*padding-left: 0px;*/
padding-left: 10px;
border-left: 3px solid #2e353d;
border-bottom: 1px solid #23282e;
}
.nav-side-menu li a {
text-decoration: none;
/*color: #e1ffff;*/
color: white;
}
.nav-side-menu li a i {
padding-left: 10px;
width: 20px;
padding-right: 20px;
}
.nav-side-menu li a:hover {
color: red;
}
@media (max-width: 767px) {
.nav-side-menu {
/*position: relative;*/
/*position: absolute;*/
/*width: 100%;*/
margin-bottom: 10px;
margin-top: 100px;
z-index: 10 !important; /* for overlay */
display: none; /* this hides the menu when the screen is made smaller */
}
.nav-side-menu .toggle-btn {
display: block;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
z-index: 10 !important;
padding: 3px;
background-color: #ffffff;
color: #000;
width: 40px;
text-align: center;
}
.brand {
text-align: left !important;
font-size: 22px;
padding-left: 20px;
line-height: 50px !important;
}
}
@media (min-width: 767px) {
.nav-side-menu .menu-list .menu-content {
display: block;
}
<body>
<h1>Hello, world!</h1>
<nav class="navbar-inverse" role="navigation">
<div>
<div class="nav-side-menu sticky-top" style="padding-top: 100px">
<!--<ul class="nav navbar-nav">-->
<ul class="nav navbar-nav nav-pills nav-stacked">
<li>
<a href="" class="nav-link expanded" data-toggle="collapse" style="padding-top:10px;padding-bottom:10px;font-size:15px;font-weight:bold;color:white;background-color:#2e353d;cursor:default">
Profile
<!--<span class="caret"></span>-->
</a>
<!--<ul class="dropdown-menu">-->
<ul class="flex-column nav">
<li class="nav-item">
<a style="padding-top:10px;padding-bottom:10px;font-size:15px;" class="nav-link" href="Profile/Item1">Item 1</a>
</li>
<li class="nav-item">
<a style="padding-top:10px;padding-bottom:10px;font-size:15px;" class="nav-link" href="Profile/Item2">Item 2</a>
</li>
<li class="nav-item">
<a style="padding-top:10px;padding-bottom:10px;font-size:15px;" class="nav-link" href="Profile/Item3">Item 3</a>
</li>
<li class="nav-item">
<a style="padding-top:10px;padding-bottom:10px;font-size:15px;" class="nav-link" href="Profile/Item4">Item 4</a>
</li>
<li class="nav-item">
<a style="padding-top:10px;padding-bottom:10px;font-size:15px;" class="nav-link" href="Profile/Item5">Item 5</a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li>
<a href="" class="nav-link expanded" data-toggle="collapse" style="padding-top:10px;padding-bottom:10px;font-size:15px;font-weight:bold;color:white;background-color:#2e353d;cursor:default">
Options
</a>
<ul class="flex-column nav">
<li class="nav-item">
<a style="padding-top:10px;padding-bottom:10px;font-size:15px;" class="nav-link" href="Options/Item6">Item 6</a>
</li>
<li class="nav-item">
<a style="padding-top:10px;padding-bottom:10px;font-size:15px;" class="nav-link" href="Options/Item7">Item 7</a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li>
<a href="" class="nav-link expanded" data-toggle="collapse" style="padding-top:10px;padding-bottom:10px;font-size:15px;font-weight:bold;color:white;background-color:#2e353d;cursor:default">
Reports
</a>
<ul class="flex-column nav">
<li class="nav-item">
<a style="padding-top:10px;padding-bottom:10px;font-size:15px;" class="nav-link" href="Report/Item8">Item 8</a>
</li>
<li class="nav-item">
<a style="padding-top:10px;padding-bottom:10px;font-size:15px;" class="nav-link" href="Report/Item9">Item 9</a>
</li>
<li class="nav-item">
<a style="padding-top:10px;padding-bottom:10px;font-size:15px;" class="nav-link" href="Report/Item10">Item 10</a>
</li>
<li class="nav-item">
<a style="padding-top:10px;padding-bottom:10px;font-size:15px;" class="nav-link" href="Report/Item11">Item 11</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="navbar-header" style="padding-top: 0px">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".nav-side-menu">
<span class="icon-bar">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
感谢您的帮助。 谢谢
编辑:现在,我可以在调整窗口大小时隐藏和显示侧面菜单。并且还显示切换按钮隐藏并在较小的屏幕中显示。 但是,当菜单在较小的屏幕中切换(隐藏)并调整窗口大小时,如何使菜单再次出现?
答案 0 :(得分:0)
由于您已经在使用Bootstrap 4,因此它具有这样的内置类。看看Bootstrap Navbar Responsive
它是可取的,它可以自动响应从手机到台式机等更多屏幕的每个屏幕。因此,请仔细阅读。
答案 1 :(得分:0)
通过调整CSS样式,我能够在较小的屏幕上隐藏和显示菜单。请查看原始帖子的评论。