메뉴 항목의 스크롤 효과

내 HTML 코드에 긴 메뉴가 있습니다. 처음 다섯 개의 메뉴 항목 만 사용자에게 표시하려고합니다. 나머지 항목은 (마우스) 호버 효과에 표시됩니다.메뉴 항목의 스크롤 효과

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

"일종의 키가 큰 메뉴"

나는 몇 가지 솔루션을 시도했지만 그들은 나를 위해 작동하지 않았다 - :

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

나는 이런 식으로 뭔가를 할 수 있습니다.

출처

2013-12-18 Laxman Rana

당신은 무엇을하려고 않았다 접근 방법? – arik

[JSFiddle] (http://jsfiddle.net/) 예는 우리에게 많은 도움이 될 것입니다. – Nunners

스크롤 할 때 요소가 같은 크기로 유지되기를 원한다는 것을 의미합니까? 즉, 5 개 항목 만 표시하고 스크롤 할 수있게하려면? 어떤 경우에는 CSS 오버플로보세요 –

처음에는 보이지 않게하려는 모든 li을 숨기고 싶습니다. (이 모든 것을 클래스에 추가하여 '숨기기'). 그런 다음 메뉴를 마우스로 가리키면 해당 아이콘이 아래로 이동하고 마우스를 놓으면 다시 아이콘이 이동합니다.

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

자바 스크립트 없이도이 작업을 수행 할 수 있습니다.

#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 내 논리를 적용 확인 : 다음은 CSS입니다. 한 번에 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 나에게 당신과 잘 어울리는지 알려주시겠습니까 ...? –

메뉴 항목의 스크롤 효과

답변

관련 문제