Wordpress中的Dropline菜单

对，这里最大的问题是我有一个WP从wp_list_pages（'title_li ='）生成的修复html格式;功能。这是一堆嵌套列表。现在我希望将它作为具有悬停功能的dropline菜单进行设置。Wordpress中的Dropline菜单

http://hedag.openskin.org/?page_id=286你可以看到我到现在为止已经管理的东西，我使用z-index来尝试覆盖当前subnav与悬停subnav中的那个。现在我已经阅读了z-index，并且我不认为只用css就可以使用它，因为单独的“children”列表在不同的堆栈上下文中。

所以，现在我试图将鼠标悬停在另一个主要导航元素上时，使用jquery将其删除。是否有任何的你还跟要么

告诉我，这有什么错我的z-index/CSS的东西，并修复它的方式（首选，这会是很酷的）或 ~~2.修复我的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的解决方案这是我相当肯定嵌套名单一个非常标准的导航方案和支线往往是最好的选择。另一个可能有趣的解决方法是让子导航左对齐父对象而不是父对象。

来源

2014-01-27 IgnianSoft

首先，究竟发生了什么事与代码片段？其次，由于你使用的是wordpress，'$'不一定就定义好了，所以使用'jQuery（document）.ready（function（$）{/ *你现在可以使用$ HERE * /}）;'而不是。 – kei

谢谢你，我有点工作。你可以看看我现在拥有的东西吗？我似乎无法让第二个选择器工作。 – IgnianSoft

好吧，看起来选择器正在工作，但由于某种原因，代码对输出没有任何影响。例如，这个'jQuery（document）.ready（function（$）{$（“li.current_page_item> ul”）.css（“border”，“3px double red”）;}）;'将CSS样式添加到HTML，但不会改变渲染的输出... – IgnianSoft

关于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 */ }

对于辅助功能，可以代替display:hidden使用left:-9999px。这里有一个关于这种技术的详细描述：http://www.htmldog.com/articles/suckerfish/dropdowns/，在页面的底部，你会发现一个水平导航菜单的例子，如果这就是你最终的设计所要求的。

来源

2014-01-27 23:07:41 nightowl

这并不能解决问题，你可以在这里看到：http://hedag.openskin.org/?page_id=9“Unternehmen”子导航出现在“工程”子导航的前面，因为“安装”子导航位于“工程”子导航的后面。所有的子导航都是位置：相对而言，z-index的问题在于我知道单独的“.children”子导航处于单独的堆叠环境中。 – IgnianSoft

当我访问该页面时，两个子菜单都按照预期相对于父菜单项出现。也许你已经解决了这个问题？在CSS中，一个元素会继承其父级的z-index，除非您专门为其指定了一个不同的值。 – nightowl

如果你想使用

jquery.dropy

来源

2014-01-28 10:34:48 giraysam

真的吗？您是否阅读过标题，下拉列表，而不是下拉菜单。不同的概念。 – IgnianSoft

只有少数需要编辑css。 – giraysam

Wordpress中的Dropline菜单

回答

相关问题