Jquery 以可变宽度居中子菜单项
我试图将子菜单置于菜单项下的中心,但我似乎遇到了障碍。下面是一个我现在所处位置的工作示例: 由于子菜单的宽度可变,我似乎无法理解如何将其相对于父菜单项放置在中心 HTML:Jquery 以可变宽度居中子菜单项,jquery,html,css,wordpress,Jquery,Html,Css,Wordpress,我试图将子菜单置于菜单项下的中心,但我似乎遇到了障碍。下面是一个我现在所处位置的工作示例: 由于子菜单的宽度可变,我似乎无法理解如何将其相对于父菜单项放置在中心 HTML: <ul class="menu"> <li><a href="#">Menu Item 1</a></li> <li><a href="#">Menu Item 2</a> <ul class
<ul class="menu">
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a>
<ul class="sub-menu">
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item Long Name Example 2</a></li>
<li><a href="#">Sub Item 3</a></li>
</ul>
</li>
<li><a href="#">Menu Item 3</a></li>
</ul>
/*
NAV
*/
body {
background: #000;
}
.menu {
position: absolute;
left: 40px;
top: 20px;
color: #d6dcbd;
font-family: 'nevis', Arial, "Arial Black", "Arial Bold", Gadget, sans-serif;
}
.menu .sub-menu {
text-align: center;
display:none;
padding-top: 4px;
width: auto;
z-index: 20;
position: absolute;
left: -6px;
}
.menu .sub-menu li {
text-align: center;
background: #a9d6e4;
display: block;
float: none;
width: auto;
white-space: nowrap;
padding: 4px 6px;
margin-bottom: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.menu .sub-menu li a {
color: #121212;
text-transform: uppercase;
}
.menu .sub-menu li:hover {
color: #FFF;
background: #d6dcbd;
}
#menu-default > li {
float: left;
position: relative;
}
.menu li {
width: auto;
position: relative;
display: block;
float: left;
padding: 0 25px 0 0;
}
.menu a {
font-family: 'nevis', Arial, "Arial Black", "Arial Bold", Gadget, sans-serif;
color: #d6dcbd;
text-decoration: none;
}
.menu a:hover {
color: #FFF;
}
.menu .current-menu-item a {
color: #FFF;
}
jQuery
$('.menu li').hover(
//Mouseover, fadeIn the hidden hover class
function() {
$(this).children('.sub-menu').stop(true, true).fadeIn('1000');
},
//Mouseout, fadeOut the hover class
function() {
$(this).children('.sub-menu').stop(true, true).fadeOut('1000');
})
尝试并更新以下规则:
.menu.子菜单{
/* ... */
左-25%;
左边缘:-50%;
}
尝试并更新以下规则:
.menu.子菜单{
/* ... */
左-25%;
左边缘:-50%;
}
工作演示-
工作演示-我刚刚更新了你的JSFIDLE这里是链接我刚刚更新了你的JSFIDLE这里是链接 只是我的方法。这里需要考虑的另外一件事是,如果父元素一直在页面左边,并且有一个中心的长子菜单元素。元素将离开浏览器的左侧。
只是我的方法。这里需要考虑的另外一件事是,如果父元素一直在页面左边,并且有一个中心的长子菜单元素。元素将从浏览器的左侧消失。我最终使用了您的元素。非常感谢你。有道理,我用了你的。非常感谢你。有道理。
$('.menu li').hover(
//Mouseover, fadeIn the hidden hover class
function() {
var $this = $(this),
$subMenu = $this.children('.sub-menu')
$subMenu.stop(true, true).fadeIn('1000')
.css("left", -1*($subMenu.width()/2) + $this.width()/2)
},
//Mouseout, fadeOut the hover class
function() {
$(this).children('.sub-menu').stop(true, true).fadeOut('1000');
});