Ign*_*oft 5 html javascript css wordpress jquery
是的,这里的一个大问题是我有一个WP生成的修复html格式,来自wp_list_pages('title_li ='); 功能.这是一堆嵌套列表.现在我希望将其设置为具有悬停功能的下拉菜单.
http://hedag.openskin.org/?page_id=286你可以看到我到目前为止所做的工作,我正在使用z-index尝试用当前的subnav覆盖当前的subnav.现在我已经阅读了z-index,我不认为只使用css就可以使用它,因为单独的"children"列表位于不同的堆栈上下文中.
所以现在我的尝试是当你将鼠标悬停在另一个主导航元素上时使用jquery删除它.你们中的任何一个人都会很友好吗？
<head>标签中.当前的jQuery代码:
<script>
jQuery(document).ready(function($) {
$('ul#nav>li').hover( function () {
if ($(window).width() > 767) {
$('ul#nav>li.current_page_item .children').hide();
$('ul#nav>li.current_page_ancestor .children').hide();
}
});
});
jQuery(document).ready(function($) {
$('ul#nav>li').mouseleave( function () {
if ($(window).width() > 767) {
$('ul#nav>li.current_page_item .children').show();
$('ul#nav>li.current_page_ancestor .children').show();
}
});
});
</script>
使用jQuery,菜单现在按预期工作,找到一个纯粹的css解决方案仍然很有趣,因为我很确定嵌套列表是一个非常标准的导航方案,下拉线通常是最好的选择.可能有趣的另一件事就是让子导航器与父级ul左右对齐,而不是父级li.
小智 0
CSS z-index 属性的棘手之处在于，它仅应用于样式表中指定位置的元素：relative、absolute或fixed。
查看您链接的页面上的源代码，您应该能够使用纯 CSS 解决方案对其进行样式设置。仅当您想支持旧版本的 Internet Explorer 时才真正需要使用 JavaScript。
ul li{ /* your top-level list */}
ul li ul{ display:hidden; position:relative; }
ul li:hover ul{ display:block; }
ul li.over ul{ /* if you want to support old versions of IE */ }
为了可访问性，您可以使用left:-9999px代替display:hidden. 这里有关于此技术的详细文章：http://www.htmldog.com/articles/suckerfish/dropdowns/，在页面底部，您将找到水平导航菜单的示例（如果这就是您的最终设计）要求。