사용자 지정 드롭 다운 메뉴를 만들려고합니다.Wordpress 메뉴 항목 호버
내 코드 같이 보인다 :
<div id="header"> </div>
<div class="layer1_col">
<?php wdg::displayMenu('main'); ?>
</div>
<div class="programmingTable"></div>
<div id="main">
WDG :: displayMenu ('주'); 분명히 "메인"이라는 워드 프레스 백엔드에서 생성 된 메뉴를 생성합니다. theres는 wdg를 사용하기 때문에 변경하지 않습니다.
그리고 메뉴 항목 -12를 편집하려고하는데 크롬에서 사이트를 편집 할 때 메뉴가 빌드 된 방식입니다 (즉, 메뉴 항목 -12에있는 방법입니다).
<ul id="menu-main" class=""><li id="menu-item-96" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-96"><a href="http://jouwfm.100200.nl/">NIEUWS</a></li>
<li id="menu-item-103" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-103"><a href="http://jouwfm.100200.nl/archief/">ARCHIEF</a></li>
<li id="menu-item-12" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12"><a>PROGRAMMERING</a></li>
<li id="menu-item-97" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-97"><a href="http://jouwfm.100200.nl/vacatures/">VACATURES</a></li>
<li id="menu-item-102" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-102"><a href="http://jouwfm.100200.nl/adverteren/">ADVERTEREN</a></li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27"><a href="http://jouwfm.100200.nl/contact/">CONTACT</a></li>
</ul>
반면에 메뉴 항목 -12는 실제 메뉴 항목이 아닙니다. 연결된 링크가 없으며 div (.programmingTable)는 모든 다른 게시물로 채워지지만 질문은 제외).
.programmingTable{
display:none;
margin-left: 10px;
margin-right: 10px;
padding: 0;
height: 380px;
line-height: 1.5em;
background-color: #e3e3e3;
position: absolute;
z-index: 5;
width: 934px;
top: 87px;
padding-left: 8px;
padding-right: 8px;
padding-top: 45px;
border-bottom-left-radius: 8px;
-moz-border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
-moz-border-bottom-right-radius: 8px;
-webkit-box-shadow: 0 7px 9px rgba(50,50,50,0.41);
-moz-box-shadow: 0 7px 9px rgba(50,50,50,0.41);
box-shadow: 0 7px 9px rgba(50,50,50,0.41);
background: -webkit-gradient(linear,0% 0,0% 90%,from(#d9d9d9),to(#fbfbfb));
background: -webkit-linear-gradient(top,#d9d9d9,#fbfbfb);
background: -moz-linear-gradient(top,#d9d9d9,#fbfbfb);
background: -ms-linear-gradient(top,#d9d9d9,#fbfbfb);
background: -o-linear-gradient(top,#d9d9d9,#fbfbfb);
}
#menu-item-12:hover .programmingTable{
display:block;
}
이 또한 불투명, Z- 인덱스를 사용하여 시도 : 같은
내 CSS를 보인다. 어디에서 Z 색인은 작동 할 것이나 div의 나머지는 동일한 색깔이 아니다. 그것은 옳지 않습니다.
나는 이미이를 사용하여 일어날 수 있도록 jQuery를 사용하여 시도했다 :이 작동하지 않습니다
jQuery('#menu-item-12').mouseover(
jQuery(document).ready(function() {
jQuery('.programmingTable').fadeIn(200)
})
);
jQuery('#menu-item-12').mouseleave(
jQuery(document).ready(function() {
jQuery('.programmingTable').fadeOut(200)
})
);
. 그럼 반은 내가 짐작한다. 항목을 페이드 인시킨 다음 다시 페이드 아웃합니다 (페이지로드시 한 번). 문제의 div 위로 마우스를 가져 가면 아무 것도하지 않습니다.
저는이 문제에 며칠 동안 고생했습니다. 어떤 도움을 주시면 감사하겠습니다.
"Programmering"위로 마우스를 이동하면 this site이 표시됩니다.
편집 : 여기에 클래스가 나는 당신의 jQuery 코드가 일할 수있는 확신 displayMenu
static public function displayMenu($name, $atts=array())
{
// Getting/Setting the variablen
extract(shortcode_atts(array('container' => 'div',
'containerid' => '',
'containerclass' => '',
'menuid' => '',
'menuclass' => '',
'afterlabel' => '',
'beforelabel' => '',
), $atts
));
wp_nav_menu(array('menu' => $name,
'menu_id' => $menuid,
'menu_class' => $menuclass,
'link_before' => $beforelabel,
'link_after' => $afterlabel,
'container' => $container,
'container_id' => $containerid,
'container_class' => $containerclass,
));
}
드롭 다운 메뉴에 문제가 있습니까? – James
@James 드롭 다운 메뉴가 없으며 마우스를 올리면 나타나는 div 만 있습니다. – Bjorn9000