垂直侧面菜单覆盖身体区域

时间：2014-06-30 11:00:11

标签： javascript jquery html css asp.net

我一直试图找到一些示例代码或帮助，在页面左侧有一个显示图标的垂直菜单栏，并且在图像悬停时菜单将展开并覆盖背景身体并显示图标代表的内容。

我在这里有一个小小的演示，我发现并且我很喜欢，但是这种情况更为先进，但可以看到基本的想法。

http://codecanyon.net/item/jquery-wahmenu/full_screen_preview/5533383

正如你可以看到当你将鼠标悬停在某些图标上时，一个小盒子会覆盖身体，这就是我想要实现的目标。

2 个答案:

答案 0 :(得分：1)

查看此网址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>

   

答案 1 :(得分：0)

试试这个：

<!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>

   

您可以在此处查看演示：http://jsbin.com/zoguqezu/1。单击右上角的编辑按钮以查看代码并进行编辑。

相关问题
最新问题