足球游戏_中国足彩网¥体育资讯$

wordpress3.0无限级分类下拉菜单制作方法
来源:易贤网 阅读:856 次 日期:2016-06-21 09:21:04
温馨提示:易贤网小编为您整理了“wordpress3.0无限级分类下拉菜单制作方法”,方便广大网友查阅!

帮朋友做个小导航时用到了下拉菜单,话说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方法确可以正常工作。

中国足彩网信息请查看CMS教程
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!

2025国考·省考课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 足球游戏_中国足彩网¥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65099533/13759567129 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标