[英]Make menu sublinks appear when hovering over the link
My site is londontradition.com I am trying to get the menu links 'about us' and 'journal' to show the sublinks when a mouse is hovered above. 我的网站是londontradition.com。我试图将菜单链接“关于我们”和“新闻”显示在鼠标悬停在上方时的子链接。 Any help is appreciated.
任何帮助表示赞赏。
Here is the code for the part of the menu I need this effect to work on. 这是我需要此效果才能工作的菜单部分的代码。
<li id="menu-item-749" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children has-sub open"><a href="#"><span>About us</span>
</a><ul style="display: block;">
<li id="menu-item-1006" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.londontradition.com/about-us/history/"><span>HISTORY</span></a></li>
<li id="menu-item-1007" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.londontradition.com/about-us/heritage/"><span>HERITAGE</span></a></li></ul><span class="holder"></span></li>
You can do that with css. 您可以使用CSS做到这一点。
Try somthing like this: 尝试这样的事情:
.parent:hover {
.child {
display: block;
}
}
There are several ways to do this, css and javascript. CSS和javascript有几种方法可以做到这一点。 I find the easiest way is with CSS.
我发现最简单的方法是使用CSS。
.subMenu {display:none;}
.menuItem:hover .subMenu{ display:block;}
First you have to hide you children menu by display:none
. 首先,您必须通过
display:none
隐藏子菜单。 After that you can trigger the parent menu using :hover
in CSS and display:block
for the child menu there. 之后,您可以使用CSS中的
:hover
触发父菜单,并在那里display:block
子菜单的display:block
。 This should open the submenu by hovering. 这将通过悬停打开子菜单。
Here is an example: 这是一个例子:
.menu-children { display: none; } .menu-item-has-children:hover .menu-children { display: block; }
<li id="menu-item-749" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children has-sub open"><a href="#"><span>About us</span> </a> <ul class="menu-children"> <li id="menu-item-1006" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.londontradition.com/about-us/history/"><span>HISTORY</span></a> </li> <li id="menu-item-1007" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.londontradition.com/about-us/heritage/"><span>HERITAGE</span></a> </li> </ul><span class="holder"></span> </li>
Please notice to give your child menu ul
list the class menu-children
(as example in this code snippet) 请注意,要给您的子菜单
ul
列出类menu-children
(例如此代码段中的示例)
Update 更新资料
I noticed your page is using a JavaScript, which sets the display
parameter. 我注意到您的页面正在使用JavaScript,该JavaScript设置了
display
参数。 That's why you need to change your JavaScript or you can try the following CSS: 因此,您需要更改JavaScript 或尝试以下CSS:
.menu-children {
display: none !important;
}
.menu-item-has-children:hover .menu-children {
display: block !important;
}
Look at the !important
tags for the display
parameters in the CSS. 查看
!important
标签以获取CSS中的display
参数。
Hmmm, ok nobody has looked at the page... 嗯,好的,没有人看过该页面...
It is simply a selector-thing in your code is this selector written to hide all submenus. 它只是一个选择器 ,代码中的东西就是编写该选择器以隐藏所有子菜单。
#mobile-menu ul ul {
display: none;
...
}
So you have to write an selector like this with an higher priority to show the submenu on hover. 因此,您必须编写一个具有更高优先级的选择器,以显示悬停时的子菜单。
#mobile-menu ul li:hover > ul {
display: block;
}
You can read an article about selector-priorty here: https://css-tricks.com/specifics-on-css-specificity/ 您可以在此处阅读有关选择器优先级的文章: https ://css-tricks.com/specifics-on-css-specificity/
But now you got another problem, you have an Javascript function that show and hide the submenu and this collides with the :hover
: 但是现在又遇到了另一个问题,您有了一个Javascript函数,该函数可以显示和隐藏子菜单,并且此函数会与
:hover
冲突:
$('body').on('click', '.holder', function() {
... do hide and show things ...
});
So you have to add an ugly !important to your code that overwrites the inline style from the Javascript function on hover ( style="display:none;
): 因此,您必须在代码中添加一个难看的!important,以覆盖悬停时Javascript函数中的内联样式(
style="display:none;
):
#mobile-menu ul li:hover > ul {
display: block !important;
}
A better way would be to edit the function and add a new leave function too: 更好的方法是编辑函数并添加新的离开函数:
$('body').on('click mouseenter', '.holder', function() {
... do show (and hide on click) thing ...
});
and 和
$('body').on('mouseleave', '.has-sub', function() {
... do hide thing ...
});
The second function is on the complete <li class="... has-sub ...">
with submenu to get a chance to klick the submenu ;-) 第二个功能在带有子菜单的完整
<li class="... has-sub ...">
上,以便有机会点击子菜单;-)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.