菜單項的滾動效果

我的HTML代碼有一長菜單。我只想向用戶顯示前五個菜單項。其餘項目將顯示在（鼠標）懸停效果上。菜單項的滾動效果

<ul id="slider"> 
    <li>Menu Content 1</li> 
    <li>Menu Content 2</li> 
    <li>Menu Content 3</li> 
    <li>Menu Content 4</li> 
    <li>Menu Content 5</li> 
    <li>Menu Content 6</li> 
    <li>Menu Content 7</li> 
    <li>Menu Content 8</li> 
    <li>Menu Content 9</li> 
    <li>Menu Content 10</li> 
    <li>Menu Content 12</li> 
    <li>Menu Content 13</li> 
    <li>Menu Content 14</li> 
    <li>Menu Content 15</li> 
    <li>Menu Content 16</li> 
</ul>

我想是這樣的： -

http://css-tricks.com/examples/LongDropdowns/

「還挺高大菜單」

我嘗試了幾種解決方案，但他們並沒有爲我工作。

來源

2013-12-18 Laxman Rana

什麼樣的方法你嘗試？ – arik

一個例子[JSFiddle]（http://jsfiddle.net/）會幫助我們很多。 – Nunners

當你說滾動，你的意思是你想元素保持相同的大小 - 所以只有顯示5項，但允許用戶滾動？在這種情況下看看CSS溢出 –

你想隱藏你最初不想看到的所有li（我是通過將它們全部添加到一個類中來隱藏的）。然後，當您將鼠標懸停在菜單上時，它會滑動這些li，並且mouseleave會將它們滑回。

HTML

<ul id="slider"> 
<li>Menu Content 1</li> 
<li>Menu Content 2</li> 
<li>Menu Content 3</li> 
<li>Menu Content 4</li> 
<li>Menu Content 5</li> 
<li class="hide">Menu Content 6</li> 
<li class="hide">Menu Content 7</li> 
<li class="hide">Menu Content 8</li> 
<li class="hide">Menu Content 9</li> 
<li class="hide">Menu Content 10</li> 
<li class="hide">Menu Content 12</li> 
<li class="hide">Menu Content 13</li> 
<li class="hide">Menu Content 14</li> 
<li class="hide">Menu Content 15</li> 
<li class="hide">Menu Content 16</li> 
</ul>

CSS

.hide{ 
display:none; 
}

$("#slider").on("mouseover",function(){ 
$("li.hide").slideDown(); 
}); 

$("#slider").on("mouseleave",function(){ 
$("li.hide").stop(true,true).slideUp(); 
});

http://jsfiddle.net/Tpqg7/1/

來源

2013-12-18 14:02:45 tjboswell

感謝隊友，但我想滾動效果 –

@LuckyBoy你是什麼意思的「滾動效果」？這是一個非常模糊的要求。 – tjboswell

我編輯了post..chck鏈接，看到「Kinda Tall Menu」 –

var n = 5; 
$('li').slice(n).hide(); 

$("li").mouseenter(function() { 
    $('li').show(); 
}).mouseleave(function() { 
    $('li').slice(n).hide(); 
});

JSfiddle：http://jsfiddle.net/4J4e4/

來源

2013-12-18 14:05:19 onionpsy

你可以做到這一點，沒有JavaScript。這裏是CSS：

#slider li{ 
    display:none; 
} 
#slider li:first-child, 
#slider li:first-child+li, 
#slider li:first-child+li+li, 
#slider li:first-child+li+li+li, 
#slider li:first-child+li+li+li+li{ 
    display:block; 
} 
#slider:hover li{ 
    display:block; 
}

來源

2013-12-18 14:23:55 Voivoda

嘗試......或者檢查JSFiddle ...我申請上mousehover我的邏輯。一次只顯示three <li>。

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('li').bind('mouseenter', function() { 
       if ($(this).next().css('display') == 'none') { 
        $(this).next().css('display', ''); 
        $(this).prev().css('display', ''); 
        $(this).prev().prev().css('display', 'none'); 
        $(this).next().next().css('display', 'none'); 
       } 
       else if ($(this).prev().css('display') == 'none') { 
        $(this).next().css('display', ''); 
        $(this).prev().css('display', ''); 
        $(this).next().next().css('display', 'none'); 
        $(this).prev().prev().css('display', 'none'); 

       } 
      }); 
     }); 

     function Apply() { 
      var i = 0; 
      $('li').each(function() { 
       if (i > 2) { 
        $(this).css('display', 'none'); 
       } 
       i = i + 1; 
      }); 
     } 
    </script> 
</head> 
<body onload="Apply()"> 
    <form id="form1" runat="server"> 
    <div > 
     <ul id="slider"> 
      <li>Menu Content 1</li> 
      <li>Menu Content 2</li> 
      <li>Menu Content 3</li> 
      <li>Menu Content 4</li> 
      <li>Menu Content 5</li> 
      <li>Menu Content 6</li> 
      <li>Menu Content 7</li> 
      <li>Menu Content 8</li> 
      <li>Menu Content 9</li> 
      <li>Menu Content 10</li> 
      <li>Menu Content 12</li> 
      <li>Menu Content 13</li> 
      <li>Menu Content 14</li> 
      <li>Menu Content 15</li> 
      <li>Menu Content 16</li> 
     </ul> 
    </div> 
    </form> 
</body> 
</html>

.....

來源

2013-12-18 14:44:47

@LuckyBoy請你讓我知道你是否可以或不... ...？ –

菜單項的滾動效果

回答

相關問題