如何使用HTML和CSS隐藏侧面导航栏

Question

嗨，我希望在移动鼠标时自动隐藏导航栏。我想 https://codepen.io/JFarrow/pen/fFrpg 使用一个例子。我在网上阅读了一些文档，但我仍然不知道如何..这是我的代码：

li .glyphicon {
margin-right: 10px;
}
/* Highlighting rules for nav menu items */
li.link-active a,
li.link-active a:hover,
li.link-active a:focus {
background-color: #4189C7;
color: white;
}
/* Keep the nav menu independent of scrolling and on top of other items */
.main-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1;
}
@media (min-width: 768px) {
/* On small screens, convert the nav menu to a vertical sidebar */
.main-nav {
height: 100%;
width: calc(25% - 20px);
}
.navbar {
border-radius: 0px;
border-width: 0px;
height: 100%;
}
.navbar-header {
float: none;
}
.navbar-collapse {
border-top: 1px solid #444;
padding: 0px;
}
.navbar ul {
float: none;
}
.navbar li {
float: none;
font-size: 15px;
margin: 6px;
}
.navbar li a {
padding: 10px 16px;
border-radius: 4px;
}
.navbar a {
/* If a menu item's text is too long, truncate it */
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class='main-nav'>
<div class='navbar navbar-inverse'>
<div class='navbar-header'>
<a class='navbar-brand' [routerLink]="['/home']">Navbar</a>
<button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
<span  (click)="isCollapsed = !isCollapsed">Toggle navigation</span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
</div>
<div class='clearfix'></div>
<div class='navbar-collapse collapse' >
<ul class='nav navbar-nav'>
<li [routerLinkActive]="['link-active']">
<a [routerLink]="['/home']">
<span class='glyphicon glyphicon-home'></span> Home
</a>
</li>
<li [routerLinkActive]="['link-active']">
<a [routerLink]="['/login']">
<span class='glyphicon glyphicon-log-in'></span> Log In
</a>
</li>
<li [routerLinkActive]="['link-active']">
<a [routerLink]="['/margin']">
<span class='glyphicon glyphicon-list'></span> Report
</a>
</li>
<li [routerLinkActive]="['link-active']">
<a [routerLink]="['/smart-table']">
<span class='glyphicon glyphicon-list'></span> Smart table
</a>
</li>
</ul>
</div>
</div>
</div>

而且我不确定我应该在哪里添加代码。网上有关于添加 js 函数的代码，或者在引导函数中使用一些 buid，只是对我不起作用......

感谢您的帮助。

Answer 1

您只需使用几行 CSS 即可实现此效果。

首先为您的导航项标签添加一个包装器，即.nav-label：

...
<span class='glyphicon glyphicon-home'></span> <span class="nav-label">Home</span>
...

现在，通过对悬停时.main-nav使用不同的width，应用transition效果并默认隐藏.nav-labels：

.main-nav {
height: 100%;
width: 100px;
transition: all .1s linear;
}
.main-nav:hover {
width: calc(25% - 20px)
}
.main-nav:hover .nav-label {
display: inline-block;
}

以下是您的代码的工作示例(以全屏模式查看以查看侧边栏操作(：

li .glyphicon {
margin-right: 10px;
}
/* Highlighting rules for nav menu items */
li.link-active a,
li.link-active a:hover,
li.link-active a:focus {
background-color: #4189C7;
color: white;
}
/* Keep the nav menu independent of scrolling and on top of other items */
.main-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1;
}
.main-nav .navbar-nav>li {
float: none;
}
.nav-label {
display: none;
margin-left: 2em;
}
@media (min-width: 768px) {
/* On small screens, convert the nav menu to a vertical sidebar */
.main-nav {
height: 100%;
width: 100px;
transition: all .1s linear;
}
.main-nav:hover {
width: calc(25% - 20px)
}
.main-nav:hover .nav-label {
display: inline-block;
}
.navbar {
border-radius: 0px;
border-width: 0px;
height: 100%;
}
.navbar-collapse {
border-top: 1px solid #444;
padding: 0px;
}
.navbar li {
display: block;
font-size: 15px;
margin: 6px;
}
.navbar li a {
display: block;
padding: 10px 16px;
border-radius: 4px;
}
.navbar a {
/* If a menu item's text is too long, truncate it */
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class='main-nav'>
<div class='navbar navbar-inverse'>
<div class='navbar-header'>
<a class='navbar-brand' [routerLink]="['/home']">Navbar</a>
<button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
<span  (click)="isCollapsed = !isCollapsed">Toggle navigation</span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
</div>
<div class='clearfix'></div>
<div class='navbar-collapse collapse'>
<ul class='nav navbar-nav'>
<li [routerLinkActive]="['link-active']">
<a [routerLink]="['/home']">
<span class='glyphicon glyphicon-home'></span> <span class="nav-label">Home</span>
</a>
</li>
<li [routerLinkActive]="['link-active']">
<a [routerLink]="['/login']">
<span class='glyphicon glyphicon-log-in'></span> <span class="nav-label">Log In</span>
</a>
</li>
<li [routerLinkActive]="['link-active']">
<a [routerLink]="['/margin']">
<span class='glyphicon glyphicon-list'></span> <span class="nav-label">Report</span>
</a>
</li>
<li [routerLinkActive]="['link-active']">
<a [routerLink]="['/smart-table']">
<span class='glyphicon glyphicon-list'></span> <span class="nav-label">Smart table</span>
</a>
</li>
</ul>
</div>
</div>
</div>

Answer 2

您需要查找 mouseenter/mouseleave 事件并将一些类添加到导航中。

例：

$(document).on('mouseenter', '.main-nav', function() {
$(this).addClass('expanded'); //Add Class for full nav
});
$(document).on('mouseleave', '.main-nav', function() {
$(this).removeClass('expanded');  //Return to small nav
});

这是Javascript的解决方案，或者您可以使用简单的CSS解决方案，只需更改导航的一部分的显示/宽度即可。