메뉴 하위 메뉴 위로 이동

Question

설명 : 사용자가 메뉴를 가리키면 하위 메뉴를 표시하는 메뉴를 만들었습니다. 이 메뉴는 jQuery를 사용합니다. 또한, 내 메뉴가 설정되는 방식은 사용자가 메뉴에서 특정 div를 가리키면 jQuery가 해당 div 이름을 사용하고 jQuery에게 어떤 하위 메뉴 div가 표시되는지 알려주는 하위 메뉴 id를 추가한다는 것입니다.

는 jQuery를 사용 :

$(function() { 
    $('#nav div').hover(function() { 
     var menu_name = $(this).attr('id'); //gets current div id 
     sub_menu_name = '.sub_' + menu_name; //creates the sub menu that matches that div menu 
     $(sub_menu_name).css('display', 'block'); 
    }, function() { 
     $(sub_menu_name).css('display', 'none'); 
    });  
}); 

Jsfiddle 링크 : 제발보기 :

이

[1] : http://jsfiddle.net/tech_noob/nXR5Y/1/ 내가이 메뉴에 사용되는 모든 코드를 볼 수 있습니다.

문제 : 사용자가 메뉴를 떠났을 때 하위 메뉴 위로 마우스를 가져 가면 하위 메뉴도 사라집니다. 사용자가 하위 메뉴를 가리키고 새 메뉴 링크로 이동 한 경우에만 하위 메뉴를 유지하고 싶습니다. 또한 가능하다면 HTML에서 사용한 코드 구조를 보존하고 싶습니다 (예를 들어, 개발자가 하위 메뉴를 각 메뉴 링크 부모의 자식으로 사용한 다른 메뉴를 보았습니다).

사이드 노트 : 내 로컬 호스트의 UI는 jsfiddle의 해당 메뉴 링크 아래에 하위 메뉴를 표시하며 하위 메뉴는 꺼져 있습니다. 왜 그런지는 잘 모르지만 이것은 사소한 문제입니다.

Answer 1

네가 가지고있는 것보다 조금 길지만 네임 스케이프를 유지한다면 메뉴와 하위 메뉴까지 처리해야하는 모든 것을 처리한다. 이름을 변경해야한다면 코드를 변경해야합니다.

Example

// a little prep work would really help make this easier 
// something like: 
var tmrMenu; // used to keep submenu open long enough for hover over 
// select only menu items via class name 
// and add data variable containing the element you want 
//  you could also hard code this in HTML like: <div data-sub-menu=".sub_menu_1" ... 
//  and later select it using something like: $($('menu_1').data('sub-menu')) 
$("#nav [class^='menu_']").each(function(i) { $(this).data('subMenu', $('#nav .sub_' + $(this).attr('id'))); }) 
// now each menu has its sub-menu directly associated 
// we continue the chain 
.on('mouseenter', function(e) { 
    clearTimeout(tmrMenu); // clears hiding timer 
    var sub = $(this).data('subMenu'); 
    $("#nav [class^='sub_menu']").not(sub).hide(); // ensure siblings are hidden 
    sub.show(); 
}) 
.on('mouseleave', function(e) { 
    var $this = $(this); 
    tmrMenu = setTimeout(function() { 
     $this.data('subMenu').hide(); 
    }, 250); // a decent amount of time to reach a sub menu 
}); 

// now a little work on sub-menus 
$("#nav [class^='sub_menu']").on('mouseenter', function(e) { 
    clearTimeout(tmrMenu); // clears hiding timer 
}) 
.on('mouseleave', function(e) { 
    var $this = $(this); 
    tmrMenu = setTimeout(function() { $this.hide(); }, 250); 
}); 

Example

나머지는 당신과 CSS로 모든 걸 포기이다! 희망이 도움이! 즐겨!

Answer 2

혼자 힘들었습니다. 이것은 다른 HTML (임베디드 UL) 및 CSS로 수행 될 수 있고해야하며, jQuery가 전혀 필요하지 않습니다. 훨씬 적은 코드를 사용하고 CSS로 구동되는 my example을 참조하십시오.

HTML :

이

<ul id="nav"> 
    <li>Menu 1 
     <div> 
      <ul> 
       <li><a href="#">Sub Menu Item 1</a></li> 
       <li><a href="#">Sub Menu Item 2</a></li> 
       <li><a href="#">Sub Menu Item 3</a></li> 
      </ul> 
     </div> 
    </li> 
    <li>Menu 2 
     <div> 
      <ul> 
       <li><a href="#">Sub Menu Item A</a></li> 
       <li><a href="#">Sub Menu Item B</a></li> 
       <li><a href="#">Sub Menu Item C</a></li> 
      </ul> 
     </div> 
    </li> 
    <li>Menu 3 
     <div> 
      <ul> 
       <li><a href="#">Sub Menu Item X</a></li> 
      </ul> 
     </div> 
    </li> 
</ul> 

CSS :

body, 
html { 
    padding: 10px; 
} 
ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 
li { 
    padding: 0; 
} 
#nav { 
    position: relative; 
    height: 30px; 
    float: left; 
    cursor: default; 
} 
#nav > li { 
    font-size: 120%; 
    font-weight: bold; 
    background: #ccc000; 
    height: 50px; 
    width: 150px; 
    float: left; 
    text-align: center; 
    border: 1px solid #000; 
    line-height: 2.2; 
} 
#nav > li > div { 
    position: absolute; 
    left: 0; 
    top: 50px; 
    padding: 10px 0; 
    width: 100%; 
    font-weight: normal; 
    font-size: 80%; 
    display: none; 
} 
#nav > li:hover > div { 
    display: list-item; 
} 
#nav > li > div > ul { 
    background: orange; 
    width: 250px; 
    border: 1px solid #000; 
    text-align: left; 
    padding: 0 20px; 
} 
a { 
    text-decoration: none; 
    color: #000; 
} 

Answer 3

것은, 당신은 순수 CSS를 사용하여이 똑같은 효과를 복제 할 수 있습니다. 코드의 문제는 메인 메뉴를 가리키면 sub_menu에 "display : block"만 적용된다는 것입니다. 그리고 sub_menu는 mainmenus의 일부조차도 아니기 때문에, 당신이 그것 위에 올려 놓더라도 함수는 일어나지 않을 것입니다.

MiniRagnarok에서 제안한 것과 마찬가지로 하위 div를 하위 div로 설정하는 것이 가장 좋은 방법입니다.

"메뉴"와 같은 기본 메뉴에 일반 클래스를 추가하고 하위 메뉴를 클래스 sub_menu와 함께 넣을 수 있습니다.

.menu:hover .sub_menu{ 
    display: block; 
} 

는 여기에 바이올린입니다 : 당신은 sub_menu이 스타일을 사용하여 표시 할 수 있습니다 격차가 문제이기 때문에 http://jsfiddle.net/nXR5Y/8/

또한 하위 메뉴를 상단에 약간 조정해야합니다. 하지만 실제로 간격이 필요한 경우 sub_menu를 다른 div에 넣고 .sub_menu 대신 div에 위의 스타일을 적용 할 수 있습니다.

희망이 있습니다.

Answer 4

My Example을 참조하십시오. 이것은 작은 코드이며 wordpress로 실행됩니다.

HTML :

<div id="ewm_header"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <header id="ewm_header1"> 
        <div class="logo"> 
         <a href="http://cssmenufree.com" title="logo"> 
          <img src="http://cssmenufree.com/img/logo.png" alt="logo" data-retina="http://cssmenufree.com/img/logo@2x.png" width="131" height="21"> 
         </a> 
        </div> 
        <div class="menu-nav right"> 
         <nav class="mainnav" id="mainnav"> 
          <ul class="menu-wrap anima-bottom"> 
           <li class="children"> 
            <a href="#">HOME</a> 
            <ul class="sub-menu" style="margin-left: 0px;"> 
             <li class="children"> 
              <a href="#">HOME VERSION 1</a> 
              <ul class="sub-menu"> 
               <li class=""><a href="#">HOME DARK</a></li> 
               <li class=""><a href="#">HOME LIGHT</a></li> 
              </ul> 
             </li> 
             <li class=""><a href="#">HOME VERSION 2</a></li> 
             <li class=""><a href="#">HOME VERSION 3</a></li> 
            </ul> 
           </li> 
           <li class="children"> 
            <a href="#">ABOUT</a> 
            <ul class="sub-menu" style="margin-left: 0px;"> 
             <li class=""><a href="#">ABOUT VERSION 1</a></li> 
             <li class=""><a href="#">ABOUT VERSION 2</a></li> 
            </ul> 
           </li> 
           <li class=""><a href="#">PORTFOLIO</a></li> 
           <li class=""><a href="#">BLOG</a></li> 
           <li class=""><a href="#">SERVICES</a></li> 
           <li class=""><a href="#">CONTACT</a></li> 
          </ul> 
         </nav> 
        </div> 
       </header> 
      </div> 
     </div> 
    </div> 
</div> 
<span>You can copy code css. It run with menu in wordpress</span> 

CSS :

#ewm_header { 
    background: #011d27; 
    float: left; 
    padding: 15px; 
} 

#ewm_header a { 
    color: #fff; 
    text-decoration: none; 
} 

#ewm_header a:hover { 
    color: #11c21d; 
} 

#ewm_header ul { 
    list-style: none; 
    margin: 0; 
    paddingL 0; 
} 

.logo { 
    float: left; 
    margin-right: 30px; 
} 

.menu-wrap > li { 
    float: left; 
    position: relative; 
    padding: 5px 15px; 
} 

.menu-wrap li ul { 
    position: absolute; 
    visibility: hidden; 
    top: 100%; 
    left: 0; 
    background: #011d27; 
    z-index: 999; 
    width: 200px; 
} 

.menu-wrap li:hover > ul, 
.menu-wrap li ul li:hover ul { 
    visibility: visible; 
} 

.menu-wrap li ul li { 
    padding: 10px 5px; 
} 

.menu-wrap li ul li ul { 
    left: 100%; 
    top: 0; 
}