Javascript 悬停时显示的隐藏侧边栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4811807/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hidden sidebar that shows up on hover
提问by Edvard
I'm trying to create a sidebar that is hidden by default but that shows up on hover. The closest example I can think of is this one: http://www.sidlee.com/. When you're on any of the pages beyond the home page, the sidebar only shows numbers. Once you move your mouse over this area, the sidebar expands to show the text. I'm guessing there's a way to do this with JavaScript but I'm no expert so I though somebody here could help me out.
我正在尝试创建一个默认隐藏但在悬停时显示的侧边栏。我能想到的最接近的例子是这个：http: //www.sidlee.com/。当您在主页以外的任何页面上时，侧边栏仅显示数字。将鼠标移到该区域上后，侧边栏会展开以显示文本。我猜有一种方法可以用 JavaScript 做到这一点，但我不是专家，所以我虽然这里有人可以帮助我。
回答by Greg
That's just a simple example but hopefully it will put you on the right track :)
这只是一个简单的例子，但希望它能让你走上正轨:)
CSS:
CSS：
#nav{width:200px;height:100%;position:absolute;top:0;left:0;z-index:100;background:#111;color:#fff;overflow:hidden;}
#nav ul{margin:0;padding:0;width:200px;margin:10px;list-style:none;}
#nav a span{margin:0 10px 0 0;}
#nav a{color:#fff;font-size:14px;text-decoration:none;}
jQuery:
jQuery：
$(function(){
$('#nav').hover(function(){
$(this).animate({width:'200px'},500);
},function(){
$(this).animate({width:'35px'},500);
}).trigger('mouseleave');
});
HTML:
HTML：
<div id="nav">
<ul>
<li><a href=""><span>01</span> HomePage</a></li>
<li><a href=""><span>02</span> SubPage 1</a></li>
<li><a href=""><span>03</span> SubPage 2</a></li>
<li><a href=""><span>04</span> SubPage 3</a></li>
<li><a href=""><span>05</span> SubPage 4</a></li>
</ul>
</div>
If you want to show only numbers at start (without the closing animation onload) change the #nav{width:35px;}and remove the .trigger('mouseleave')
如果您只想在开始时显示数字（不加载关闭动画），请更改#nav{width:35px;}并删除.trigger('mouseleave')
Cheers
干杯
G.
G。
回答by Michele La Ferla
Found a way how to actually do this without javascript or jQuery. This answer could be very efficient for those who are working on Uni/College assignments, and cannot use third party libraries such as JQuery.
找到了一种无需 javascript 或 jQuery 即可实际执行此操作的方法。对于那些从事 Uni/College 作业且不能使用第三方库（如 JQuery）的人来说，这个答案可能非常有效。
Obviously having said that, using JQuery will give the same outcome in less code.
显然已经说过，使用 JQuery 会以更少的代码给出相同的结果。
Here you go:
干得好：
.fa {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-size: 20px;
}
.main-menu:hover,
nav.main-menu.expanded {
width: 250px;
overflow: visible;
}
.main-menu {
background: #fbfbfb;
border-right: 1px solid #e5e5e5;
position: absolute;
top: 0;
bottom: 0;
height: 100%;
left: 0;
width: 60px;
overflow: hidden;
-webkit-transition: width .05s linear;
transition: width .05s linear;
-webkit-transform: translateZ(0) scale(1, 1);
z-index: 1000;
}
.main-menu>ul {
margin: 7px 0;
}
.main-menu li {
position: relative;
display: block;
width: 250px;
}
.main-menu li>a {
position: relative;
display: table;
border-collapse: collapse;
border-spacing: 0;
color: #999;
font-family: arial;
font-size: 14px;
text-decoration: none;
-webkit-transform: translateZ(0) scale(1, 1);
-webkit-transition: all .1s linear;
transition: all .1s linear;
}
.main-menu .nav-icon {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-size: 18px;
}
.main-menu .nav-text {
position: relative;
display: table-cell;
vertical-align: middle;
width: 190px;
font-family: 'Titillium Web', sans-serif;
}
.main-menu>ul.logout {
position: absolute;
left: 0;
bottom: 0;
}
.no-touch .scrollable.hover {
overflow-y: hidden;
}
.no-touch .scrollable.hover:hover {
overflow-y: auto;
overflow: visible;
}
a:hover,
a:focus {
text-decoration: none;
}
nav {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
nav ul,
nav li {
outline: 0;
margin: 0;
padding: 0;
}
.main-menu li:hover>a,
nav.main-menu li.active>a,
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus,
.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,
.dashboard-page nav.dashboard-menu ul li.active a {
color: #fff;
background-color: #5fa2db;
}
.area {
float: left;
background: #e2e2e2;
width: 100%;
height: 100%;
}
@font-face {
font-family: 'Titillium Web';
font-style: normal;
font-weight: 300;
src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff');
}<html>
<head>
</head>
<body>
<div class="area"></div>
<nav class="main-menu">
<ul>
<li>
<a href="#">
<i class="fa fa-home fa-2x"></i>
<span class="nav-text">
Dashboard
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-laptop fa-2x"></i>
<span class="nav-text">
UI Components
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-list fa-2x"></i>
<span class="nav-text">
Forms
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-folder-open fa-2x"></i>
<span class="nav-text">
Pages
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-bar-chart-o fa-2x"></i>
<span class="nav-text">
Graphs and Statistics
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-font fa-2x"></i>
<span class="nav-text">
Typography and Icons
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-table fa-2x"></i>
<span class="nav-text">
Tables
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-map-marker fa-2x"></i>
<span class="nav-text">
Maps
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-info fa-2x"></i>
<span class="nav-text">
Documentation
</span>
</a>
</li>
</ul>
<ul class="logout">
<li>
<a href="#">
<i class="fa fa-power-off fa-2x"></i>
<span class="nav-text">
Logout
</span>
</a>
</li>
</ul>
</nav>
</body>
</html>Hope this helps :)
希望这可以帮助 ：）
回答by TALLBOY
You can use JQuery's .hover()method in conjunction with .animate()to have a divslide out when a .mouseenter()event occurs.
您可以使用jQuery的.hover()方法结合.animate()有一个div滑出时，.mouseenter()事件发生。
回答by Cole
Just start plugging away at the jQuery API. This is how you would begin the structure of it. Using .animate() will give you the ability to adjust your menu css properties how you see fit.
只需开始使用jQuery API 即可。这就是你将如何开始它的结构。使用 .animate() 将使您能够根据您认为合适的方式调整菜单 css 属性。
$("#yourmenu").hover( function() {
$(this).stop(true,true);
$(this).show();
}, function () {
$(this).hide();
});
回答by Mitch Malone
Edvard,
爱德华，
I'd suggest doing this the following way. Hopefully with some ideas and some links to the right jQuery elements you should be able to get this done.
我建议按以下方式执行此操作。希望通过一些想法和一些指向正确 jQuery 元素的链接，您应该能够完成这项工作。
First step would be to have a div that is 100% transparent and a div inside that which contains the menu. Then from the menu div I would hide that element, then when you mouse over the container dive you could use a .hover() method to animate the slide out of the inner div.
第一步是有一个 100% 透明的 div 和一个包含菜单的 div。然后从菜单 div 中隐藏该元素，然后当您将鼠标悬停在容器潜水上时，您可以使用 .hover() 方法将幻灯片从内部 div 中移出动画。
Here is some basic code which should get you started.
这是一些基本的代码，可以帮助您入门。
<div id="menuContainer">
<div id="menu">
<ul>
<li>This</li>
<li>Is</li>
<li>A</li>
<li>Menu</li>
</ul>
</div>
</div>
Then some CSS:
然后一些CSS：
/* Set the container to be fixed to the top of the screen and set it's height
This is important so we know where the mouse can hover */
div#menuContainer {
background: transparent;
position: fixed;
top: 0;
left: 0;
height: 50px;
}
/* Set the menu as hidden */
div#menu {
background: red;
width: 900px;
height:
margin: 0 auto;
display: none;
}
/* Fiddle with the menu items */
div#menu ul { list-style-type: none; }
div#menu ul li { display: inline; }
Then some jQuery:
然后一些jQuery：
$('#menuContainer').mouseenter(function(){
$('#menu').slideToggle();
}).mouseleave(function() {
$('#menu').slideToggle();
});
This is obviously untested code, but it should give you a great headstart! :-)
这显然是未经测试的代码，但它应该给你一个很好的开端！:-)
