CSS 플라이 아웃 메뉴와 스크롤 메뉴

나는 자바 스크립트를 처음 사용하는데 메뉴에 문제가 있습니다. 플라이 아웃 메뉴를 사용할 수 있으며, 스크롤 메뉴를 사용할 수 있습니다 (스크롤 메뉴 데모 http://css-tricks.com/examples/LongDropdowns/).CSS 플라이 아웃 메뉴와 스크롤 메뉴

그러나 효과를 병합하는 방법을 알 수 없습니다. 누군가가 아래의 플라이 아웃 코드를 도와 주시겠습니까?

// HTML LIST

<script> 
    var maxHeight = 600; 

    $(function(){ 

     $(".dropdown > li").hover(function() { 

      var $container = $(this), 
      $list = $container.find("ul"), 
      $anchor = $container.find("a"), 
      height = $list.height() * 1.1,  // make sure there is enough room at the bottom 
      multiplier = height/maxHeight;  // needs to move faster if list is taller 

      // need to save height here so it can revert on mouseout    
      $container.data("origHeight", $container.height()); 

      // so it can retain it's rollover color all the while the dropdown is open 
      $anchor.addClass("hover"); 


      // don't do any animation if list shorter than max 
      if (multiplier > 1) { 
       $container 
       .css({ 
        height: maxHeight, 
        overflow: "hidden" 
       }) 
       .mousemove(function(e) { 
        var offset = $container.offset(); 
        var relativeY = ((e.pageY - offset.top) * multiplier) - ($container.data("origHeight") * multiplier); 
        if (relativeY > $container.data("origHeight")) { 
         $list.css("top", -relativeY + $container.data("origHeight")); 
        }; 
       }); 
      } 

     }, function() { 

      var $el = $(this); 

      // put things back to normal 
      $el 
      .height($(this).data("origHeight")) 
      .find("ul") 
      .css({ top: 0 }) 
      .show() 
      .find("a") 
      .removeClass("hover");  
     });          
    });     
</script>

이 내가 시도 것입니다,하지만 난 오프 오전을 스크롤 할 수 있도록

<ul class="dropdown"> 
<li><a href="#">CITIES BY STATE</a> 
<ul> 
for (var p = 0; p < state.length; p++) { 

    <li><a href="#"> + states[p][0] + "</a>"); 

    <ul id="city\" class="city"> 
    <li>CITY 1</li> 
    <li>CITY 2</li> 
    <li>CITY 3</li> 
    </ul>"); 

    </li>"); 

} 
</ul> 
</ul> 
</li>

// SCRIPT. 나는 상태에 맴돌 때 도시 목록을 상태 목록 오른쪽에 표시하고 싶습니다.

/*code to show/hide city menu*/ 

#city li:hover ul ul, #city li:hover ul ul ul, #city li:hover ul ul ul ul{ 
display:none; 
} 

#city li:hover ul, #city li li:hover ul, #city li li li:hover ul, #city li li li li:hover ul{ 
display:block; 
}

출처

2013-03-12 user2107906

자신을 시도한 적이 있습니까? 플라이 아웃이란 무엇을 의미합니까? 당신이하려는 일의 몇 가지 예를 좀 더 구체적으로 기재하십시오. –

@JordyvanEijk - 위의 시도를 포함했습니다. – user2107906

매우 멋진 메뉴 아이디어 – blackhawk

크리스 모프입니다.

<ul class="dropdown"> 
<li><a href="#">CITIES BY STATE</a> 
<ul> 
for (var p = 0; p < state.length; p++) { 

    <li><a href="#"> + states[p][0] + "</a>"); 

    <ul id="city\" class="city"> 
    <li>CITY 1</li> 
    <li>CITY 2</li> 
    <li>CITY 3</li> 
    </ul>"); 

    </li>"); 

} 
</ul> 
</ul> 
</li>

이것은 syntactially 올바른 HTML/자바 스크립트 : 이것은 단지 jibberish입니다. 스크류 ... 내가 심심해서 그냥 코드를 작성하기로 결정했는데, HTML/자바 스크립트로 돌아 가야합니다.

<html>   
    <head>   
     <title>test</title>   
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>   
     <script type="text/javascript">   
      $(document).ready(function()   
      {   
       var map = [   
        {state: "NSW", cities: ["Sydney", "Newcastle", "Orange"]},   
        {state: "QLD", cities: ["Brisbane", "Cairns", "Townsville"]},   
        {state: "VIC", cities: ["Melbourne", "Geelong", "Ballarat"]},   
        {state: "SA", cities: ["Radelaide", "Mount Gambier"]},   
        {state: "TAS", cities: ["Hobart", "Devonport", "Launceston"]}   
       ];   

       for (var i = 0; i < map.length; i++)   
       {   
        var a = $('<a href="#">').html(map[i].state);   
        var li = $('<li>').append(a);   
        var cities = $('<ul>').attr('id', map[i].state).addClass('cityList');   

        for(var j = 0; j < map[i].cities.length; j++)   
        {   
         cities.append($('<li>').html(map[i].cities[j]));   
        }   

        li.append(cities);   

        $('#citiesByState').append(li);   
       }   
      });   
     </script>   
    </head>   
    <body>   
     <ul class="dropdown">   
      <li>   
       <a href="#">CITIES BY STATE</a>   
       <ul id="citiesByState"></ul> 
      </li>   
     </ul>   
    </body>   
</html>

이제 돌아가서 질문 를 해결하고 우리는 새로운 문제를 살펴 보겠습니다 테스트합니다.

출처

2013-04-24 16:11:25 SimonDever

CSS 플라이 아웃 메뉴와 스크롤 메뉴

답변

관련 문제