菜单项的滚动效果

我的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请你让我知道你是否可以或不... ...？ –

菜单项的滚动效果

回答

相关问题