二级下拉菜单

@ WordPress笔记

生命不息,折腾不止。今天在回访象牙塔的时候,发现了一篇好文章:大前端D4主题导航栏下拉菜单实现方法(链接失效)。解决了我使用 Optimus+ 以来的一个问题:无法使用自定义二级下拉菜单。在之前的文章里我提到过,若是弄个下拉菜单,以我的水平还得修改 css 好久,所以觉得麻烦当时就放弃了。不过,“机会就是给有准备的人”呐!偶然看到合适的文章,一下就觉得也许可行,而且就是修改 css 能搞定的,于是立马下手。哎,没文化真可怕。二话不说,贴代码(以象牙塔提供的代码为准进行了部分更改):

.nav li li {
height: 29px;
float: left;
}
.nav li li a {
line-height: 29px !important;
}
.nav li ul {
position: absolute;
left: -999em;
width: 150px;
margin: 0;
border-width: 1px 1px 0px;
z-index: 999;
}
.nav li ul li {
border-top: 0;
border-bottom: 1px solid #000000;
border-right: none;
border-left: none;
}
.nav li ul li a {
background: #484848;
width: 100px;
height:29px;
color: #CCC !important;
font-weight: normal;
opacity: .80;
filter: alpha(opacity=80);
text-shadow: 0px 1px 0px #000 !important;
}
.nav li ul li a:hover {
text-shadow: 0px 1px 0px #fff !important;
}
.nav li ul li a:hover {
background: #333333;
color: #fff !important;
text-shadow: 0px 1px 0px #000 !important;
text-decoration: none;
}
.nav li ul ul {
margin: -31px 0px 0px 150px;
}
.nav li ul ul li a {}
.nav li ul li ul li a {}
.nav li:hover,
.nav li.hover {
position: static;
}
.nav li:hover ul ul,
.nav li:hover ul ul ul,
.nav li:hover ul ul ul ul {
left: -999em;
}
.nav li:hover ul,
.nav li li:hover ul,
.nav li li li:hover ul,
.nav li li li li:hover ul {
left: auto;
}

在此基础上,总结之前在 wopus 看到的问答:二级导航条怎么实现,顺便把 jquery 下拉效果也加入进来,供需要的童鞋参考。建议在 footer.php 中的 jquery 文件之后加入:

<script type="text/javascript">
jQuery(document).ready(function($) {
$('.menu li').hover(function() {
$('ul', this).slideDown(300)
},
function() {
$('ul', this).slideUp(300)
});
});
</script>

现在发现的问题是,jquery 下拉效果在第一次悬停时并不会表现出来。若是悬停过一次,再次悬停的时候便有效果。不知道是不是跟加载速度有关。有需要的童鞋可以直接在本博 navibar 测试二级下拉菜单。


评论