隐藏边栏显示在悬停

Question

我试图创建一个默认隐藏的边栏，但显示在悬停。我能想到的最接近的例子是这个：http://www.sidlee.com/。当您在主页之外的任何页面上时，侧栏仅显示数字。将鼠标移到该区域后，侧栏会展开以显示文字。我猜想有一种方法可以用JavaScript做到这一点，但我不是专家，所以我尽管有人可以帮助我。

Answer 1

这只是一个简单的例子，但希望这将让你在正确的轨道:)

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：

$(function(){ 
    $('#nav').hover(function(){ 
     $(this).animate({width:'200px'},500); 
    },function(){ 
     $(this).animate({width:'35px'},500); 
    }).trigger('mouseleave'); 
}); 

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> 

如果你要只显示号码在启动（无需关闭动画onload事件）改变#nav{width:35px;}并删除.trigger('mouseleave')

干杯

G.

Answer 2

当发生.mouseenter()事件时，可以使用JQuery的.hover()方法与.animate()一起使div滑出。

JQuery API for Hover

Answer 3

刚开始刻苦攻读的jQuery API。这就是你如何开始它的结构。使用.animate（）将使您能够调整菜单CSS属性，使其看起来合适。

$("#yourmenu").hover(function() { 
    $(this).stop(true,true); 
    $(this).show(); 
}, function() { 
    $(this).hide(); 
}); 

Answer 4

爱德华，

我建议这样做，下面的方法。希望有一些想法和一些正确的jQuery元素的链接，你应该能够做到这一点。

第一步将是一个100％透明的div和一个包含菜单的div。然后，从菜单div中我将隐藏该元素，然后当您将鼠标悬停在容器潜水上时，可以使用.hover（）方法将幻灯片移出内部div。

这是一些基本的代码，应该让你开始。

<div id="menuContainer"> 
    <div id="menu"> 
     <ul> 
      <li>This</li> 
      <li>Is</li> 
      <li>A</li> 
      <li>Menu</li> 
     </ul> 
    </div> 
</div> 

然后一些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; } 

那么一些jQuery的：

$('#menuContainer').mouseenter(function(){ 
    $('#menu').slideToggle(); 
}).mouseleave(function() { 
    $('#menu').slideToggle(); 
}); 

这显然是未经测试的代码，但它应该给你一个很好的领先地位！ :-)

Answer 5

找到一种方法如何真正做到这一点没有JavaScript或jQuery的。对于那些从事Uni/College作业的人来说，这个答案可能非常有效，并且不能使用第三方库（如JQuery）。

很明显，在使用JQuery的情况下，使用较少的代码会得到相同的结果。

在这里你去：

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

希望这有助于:)