覆盖身体区域的垂直侧边菜单

【问题标题】：Vertical side menu that overlays body area覆盖身体区域的垂直侧边菜单
【发布时间】：2014-07-18 22:10:38
【问题描述】：

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

我在这里找到了一个小演示，我非常喜欢，但这有点高级，但可以看到基本思想。

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

正如您所见，当您将鼠标悬停在某些图标上时，一个小框会覆盖在主体上，这就是我想要实现的目标。

【问题讨论】：

  • 你应该使用 css3 动画和绝对定位来实现这一点。我会尝试上传一些代码
  • @IPADDRESS 感谢您的帮助。
  • 我正在编写代码，看起来不错，我会尽快上传
  • @IPADDRESS 很好，感谢您的宝贵时间
  • 我遇到了一个我正在尝试调试的问题，但我应该在 45 分钟内上传代码

标签： javascript jquery html css asp.net


【解决方案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>

【讨论】：

  • 这正是我想要的，我将在我无法绕过第一阶段的一侧制作动画，帮了很多忙！谢谢
  • @user3129331 我很乐意提供帮助。谢谢。
【解决方案2】：

试试这个：

<!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。点击右上角的编辑按钮查看代码并进行编辑。

【讨论】：

  • 谢谢，这看起来不错，但首先可以从图标开始，然后当您将鼠标悬停在图标上时，它会随着图标信息放大。此外，当您将鼠标悬停在弹出的图标信息框上时，它应该停留在该框上并让您四处走动而不是离开？
猜你喜欢
  • 2021-05-19
  • 1970-01-01
  • 2014-12-17
  • 1970-01-01
  • 2018-04-30
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode