WordPress 드롭 다운 메뉴 CSS

WordPress 용 사용자 지정 테마를 개발 중입니다.

나는 이안 스튜어트를 사용하여 테마의 기본 골격 개발 :
How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial WordPress 드롭 다운 메뉴 CSS

을 그리고 사용하여 메뉴 CSS 개발 : 둘 다 좋은 완료
Create a multilevel Dropdown menu with CSS and improve it via jQuery

합니다.

나는이 주제에 사용자 정의 메뉴 등록을 시도

는 CSS 서브 메뉴에 나를 위해 작동하지 않습니다. 는 사용자 정의 메뉴를 등록하려면, 나는 header.php에 다음 코드를 사용 : 그것은 나를 위해 작동, 나는에 지정된 내 사용자 지정 메뉴를 보여주는 것

<?php wp_nav_menu (array ('theme_location'=>'primary', 'fallback_cb'=>'')); ?>

. 그러나 사용자 정의 CSS를 사용하면 드롭 다운 메뉴 (하위 메뉴)가 표시되지 않습니다. 후속 메뉴에는 z-index을 사용했지만 숨길 때까지 사용했습니다.

그걸 참고 : wp_nav_menu()이 같은 태그를 만드는 : 그래서

<ul id="menu-new-custom-menu" class="menu">

, 내 CSS에서 나는 .menu 모든 #nav을 교체했다. 그러나 부 메뉴가 보이지 않을 때까지.

제 전체 코딩의 버그를 알아내는 데 도움을주십시오.
P.S. .: 메뉴와 관련하여 플러그인이없는 WP 3.4.2를 사용하고 있습니다. 내 CSS는 .menu을 제외하고는 자습서와 정확히 동일합니다.

출처

2012-10-25 Mayeenul Islam

어딘가에 코드를 게시 할 수 있습니까?지금까지 제공 한 정보에 대한 대답은 분명하지 않습니다. – skybondsor

문제가있는 사이트/페이지에 대한 링크를 제공해 주시겠습니까? – Andy

[여기] (http://code.google.com/p/blogger-nano/downloads/list)가 필요한 코드입니다. 불행히도 그 주제가 다른 곳에서는 활발하지 않습니다. 관심을 가져 주셔서 감사합니다. –

아마도이 질문은 jquery 문제일까요? 난 당신의 CSS를 확인하고 그것에 아무것도 잘못 본 게 아니라면 내가 header.php 거기 jquery 라이브러리 및 jquery 사용자 정의 코드가 포함되어 있는지 확인합니다.

jquery 코드 앞에 jquery 라이브러리를 넣었습니까? 아래를 보시고 머리 태그의 header.php에 넣으십시오.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> 
<script> 
    function mainmenu(){ 
     $(" .menu ul ").css({display: "none"}); // Opera Fix 
     $(" .menu li").hover(function(){ 
     $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400); 
    },function(){ 
    $(this).find('ul:first').css({visibility: "hidden"}); 
    }); 
} 



$(document).ready(function(){     
mainmenu(); 
}); 
</script>

출처

2012-10-26 00:58:24 loQ

좋아, 나는 결국 해결책을 얻었다.
jQuery 문제가 아니기 때문에 jQuery는 메뉴 만 애니메이션으로 처리했습니다. 나는 nano.css에, CSS에 잘못된 속성을 발견하십시오 overflow:hidden는 하위 메뉴를 숨기고

#access{ 
    background-color: #333; 
    height: 25px; 
    font-size:16px; 
    text-transform:uppercase; 
    }

#access{ 
    background-color: #333; 
    height: 25px; 
    font-size:16px; 
    text-transform:uppercase; 
    overflow:hidden; 
    }

이 될 것입니다. 서브 메뉴의

.menu li:hover ul, .menu li li:hover ul, .menu li li li:hover ul, .menu li li li li:hover ul{ 
display:block; 
position:absolute; 
z-index:5000; 
}

는 또한 I는 z-index에 추가. 이제 여기서 잘 작동합니다.
버그 수정을 통해 도움을 주신 Amit Chowdhury에게 감사드립니다.

출처

2012-11-01 14:17:59

WordPress 드롭 다운 메뉴 CSS

답변

관련 문제