| 标题 | 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方法确可以正常工作。 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。