我一直在尝试寻找一些示例代码或帮助在页面左侧下方显示一个垂直菜单栏，该菜单栏显示一个图标，并且在图像悬停时菜单将展开并覆盖背景正文并显示图标所代表的内容。
我在这里找到了一个小演示，我很喜欢，但这有点高级，但可以看出基本思想。
http://codecanyon.net/item/jquery-wahmenu/full_screen_preview/5533383
如您所见，当您将鼠标悬停在一些图标上时，一个小框将覆盖主体，这就是我想要实现的目标。
最佳答案
在这个 url http://jsbin.com/yiyenadi/1/ 查看代码.
如您所见，我没有为其制作动画，因为这会花费更多时间，但可以做到。 如果您需要更多帮助，请给我回消息。并请评论您的观点。
[编辑]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>side bar</title>
<script type="text/javascript">
<style type="text/css">
body {
margin:0px;
background-color: rgb(255, 0, 214);
}
#side_bar_container {
width:50px;
background-color: #555C66;
height: 100%;
position:absolute;
transition:.5s;
}
.line_container{
height:50px;
background-color: #555C66;
padding-top: 4px;
padding-bottom: 4px;
border-bottom: 2px solid rgba(0, 0, 0, 0.18);
overflow: hidden;
position: relative;
}
#line_container1{
border-top: 2px solid rgba(0, 0, 0, 0.18)
}
.line_image{
width: 50px;
height: 50px;
float: left;
border-radius: 16px;
color: white;
}
.line_text{
margin-top: 16px;/*depends on other values*/
font-size:18px;
width:300px;
height:50px;
float: left;
color: black;
font-family: sans-serif;
position: relative;
z-index: -3px;
}
#logo {
width:50px;
height:50px;
margin-top: 5px;
margin-bottom: 5px;
border-radius: 50%;
}
.sidebar_loader{
width: 300px;
height: 100%;
display: ; /*very very important*/
z-index: -3;
position: absolute; /*works with fixed - absolute is experimantal*/
left: 50px;
top: 0px;
background-color: rgb(69,75,83);
display: none;
transition: .5s;
}
#texter {
font-family: sans-serif;
color: white;
padding: 10px;
}
/*the power starts here*/
#line_container1:hover{
background-color: rgb(69,75,83);
}
#line_container2:hover{
background-color: rgb(69,75,83);
}
#line_container3:hover{
background-color: rgb(69,75,83);
}
#line_container4:hover{
background-color: rgb(69,75,83);
}
#sidebar_loader1:hover < #line_container1 {
background-color: red;
}
/*more*/
#line_container1:hover ~ #sidebar_loader1 {
z-index: -2;
}
#line_container2:hover ~ #sidebar_loader2 {
z-index: -2;
}
#line_container3:hover ~ #sidebar_loader3 {
z-index: 2;
}
#line_container4:hover ~ #sidebar_loader3 {
z-index: 2;
}
</style>
</head>
<body>
<div id="side_bar_container">
<div style="width:50px;height:50px;margin-left:auto;margin-right:auto;background-color:black;" id="logo" onmouseover="document.getElementById('sidebar_loader1').style.display='none';"></div>
<div class="line_container" id="line_container1" onmouseover="document.getElementById('sidebar_loader1').style.display='block';document.getElementById('sidebar_loader2').style.display='none';document.getElementById('sidebar_loader2').style.display='none';" onmouseout="">
<img src="http://www.maxwellmcmahon.com/img/source.png" alt="IMAGE" class="line_image">
<span class="line_text">
HTML5/JAVASCRIPT CODES
</span>
</div>
<div class="sidebar_loader" id="sidebar_loader1" onmouseover="document.getElementById('line_container1').style.background='rgb(69,75,83)';" onmouseout="document.getElementById('sidebar_loader1').style.display='none';document.getElementById('line_container1').style.background=''">
<span id="texter">TEST for 1</span>
</div>
<div class="line_container" id="line_container2" onmouseover="document.getElementById('sidebar_loader2').style.display='block';document.getElementById('sidebar_loader3').style.display='none';document.getElementById('sidebar_loader1').style.display='none';" onmouseout="">
<img src="1.png" alt="IMAGE" class="line_image" id="line_image">
<span class="line_text">
VIDEOS
</span>
</div>
<div class="sidebar_loader" id="sidebar_loader2" onmouseover="document.getElementById('line_container2').style.background='rgb(69,75,83)';" onmouseout="document.getElementById('sidebar_loader2').style.display='none';document.getElementById('line_container2').style.background=''">
<span id="texter">TEST for 2</span>
</div>
<div class="line_container" id="line_container3" onmouseover="document.getElementById('sidebar_loader3').style.display='block';document.getElementById('sidebar_loader4').style.display='none';document.getElementById('sidebar_loader2').style.display='none';" onmouseout="">
<img src="http://www.ejprescott.com/media/icons/tools-equipment.png" alt="IMAGE" class="line_image">
<span class="line_text">
SETTINGS
</span>
</div>
<div class="sidebar_loader" id="sidebar_loader3" onmouseover="document.getElementById('line_container3').style.background='rgb(69,75,83)';" onmouseout="document.getElementById('sidebar_loader3').style.display='none';document.getElementById('line_container3').style.background=''">
<span id="texter">TEST for 3</span>
</div>
<div class="line_container" id="line_container4" onmouseover="document.getElementById('sidebar_loader4').style.display='block';document.getElementById('sidebar_loader3').style.display='none';document.getElementById('sidebar_loader3').style.display='none';" onmouseout="">
<img src="https://cdn2.iconfinder.com/data/icons/freecns-cumulus/16/519591-089_Speechbubble2-128.png" alt="IMAGE" class="line_image">
<span class="line_text">
Forum
</span>
</div>
<div class="sidebar_loader" id="sidebar_loader4" onmouseover="document.getElementById('line_container4').style.background='rgb(69,75,83)';" onmouseout="document.getElementById('sidebar_loader4').style.display='none';document.getElementById('line_container4').style.background='';">
<span id="texter">TEST for 4</span>
</div>
<button onclick="document.getElementById('side_bar_container').style.display='none';" onmouseover="document.getElementById('sidebar_loader4').style.display='none';" title="close this navigation pane" style="width:50px;">X</button>
关于javascript - 覆盖正文区域的垂直侧边菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24488614/