您好,欢迎光临本店!  登录  免费注册
当前位置: 首页 > 站长资讯 > 网站建设知识 > WordPress3.0无限级分类下拉菜单制作方法

WordPress3.0无限级分类下拉菜单制作方法

WEB新概念建站源码超市 / 2011-12-02
[] [] []

帮朋友做个小导航时用到了下拉菜单,话说WordPress3.0以上版本的”wp_nav_menu()”真是好用,加上主题自定义菜单的设置简直可以说是完美的网站导航。

涉及到下拉菜单制作的方法最核心的还是鼠标移动到上面的处理。下面是调用wp_nav_menu()函数后的HTML结构(做解释用):

<div class="menu-菜单名-container">
    <ul class="menu" id="menu-菜单名">
        <li class="menu-tiem"><a href="#">菜单项目1</a>
            <ul class="sub-menu">
                <li><a href="#">子菜单项目1-1</a></li>
                <li><a href="#">子菜单项目1-2</a></li>
                 …
            </ul>
        </li>
        <li><a href="#">菜单项目2</a></li>
    </ul>
</div>

这是一种很经典很优雅的导航HTML代码,在IE6以上以及标准浏览器中要实现下拉效果只用一句CSS就能搞定。比如下面的示例代码(可自定义):

.menu li a { float:left; height:35px; width:100px;/*菜单高度与宽度*/ line-height:35px; text-align:center; color:#ccc; text-align:center; }

.menu li { float:left; height:1%; background:#000; }

.menu-sjys-container { position:absolute; z-index:1000;}

.menu li ul li { clear:both; border-bottom:1px solid #333; border-right:none; }

.menu-item { position:relative; border-right:1px dotted #333; }

.menu-item:hover>.sub-menu{ display:block; /*下拉效果只用到这一段代码*/ }

.sub-menu { position:relative; left:1px; margin:0; z-index:101; display:none;/*一般情况下隐藏子菜单*/ }

.sub-menu ul.sub-menu { position:absolute; left:100px; top:0;}

上面的这两段代码在IE6以上以及标准浏览器中表现的很完美,原因是IE6这种老浏览器还不支持任何标签的伪类属性,即htmlTag:hover。所以为了兼容我们又不得不用JS来实现(纯CSS亦可)。我大概写了一段JS可以勉强达到效果,但不知道为什么在IE中切换菜单时会有闪动的感觉,这个得求教JS高手了哈。

<!–[if lt IE 7]>
<script type="text/javascript">
//<![CDATA[
/*导航联动效果*/
(function(){
function getElementsByClass(searchClass,node,tag) {
    var classElements = new Array();
    if ( node == null )
        node = document;
    if ( tag == null )
        tag = '*';
    var els = node.getElementsByTagName(tag);
    var elsLen = els.length;
    var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
    for (i = 0, j = 0; i < elsLen; i++) {
        if ( pattern.test(els[i].className) ) {
            classElements[j] = els[i];
            j++;
        }
    }
    return classElements;
}
function hoverSubMenu(node, flag) {
    node.onmouseover = function() {
        var subMenu = getElementsByClass("sub-menu", this)[0];
        if (subMenu) {
            subMenu.style.display = "block";
        }
    }
    node.onmouseleave = function() {
        var subMenu = getElementsByClass("sub-menu", this)[0];
        if (subMenu) {
            subMenu.style.display = "none";
        }
    }
}
var menuItems = getElementsByClass("menu-item");
for (var i=0; i<menuItems.length; i++) {
    hoverSubMenu(menuItems[i], i);
}
})();
//]]>
</script>
<![endif]—>

问题在于W3C对onmouseout事件处理方法不是很理想,微软IE支持的onmouseleave方法确可以正常工作。

用户评论
暂时还没有任何用户评论
用户名: 匿名用户
E-mail:
评价等级:
评论内容:
验证码: captcha

相关商品

网店帮助

© 2005-2017 WEB新概念建站源码超市 版权所有,并保留所有权利。
广东省东莞市南城行政中心区簪花路华南建设大厦707室WEB新概念网络科技 Tel: 罗先生13480055593,黄先生15102077200 E-mail: server@webxgn.com
QQ 784159683 QQ 2267914584 MSN Messi.h2009@hotmail.com
ICP备案证书号:粤ICP备10099352号
支付宝信任商家 广东省网站信用联盟 支付宝信任商家 网络消费安全港 网警
分享到:
新概念源码超市
源码咨询:
源码咨询:
代理咨询:
代理咨询: