隱藏邊欄顯示在懸停

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>

希望這有助於:)