【js实现二级菜单显示和收缩】的更多相关文章

js实现二级菜单显示和收缩

window.onload=function(){ var aLi=document.getElementsByTagName('li'); for(var i=0; i<aLi.length; i++){ aLi[i].onmouseover=function(){ var oSubNav=this.getElementsByTagName('ul')[0]; if(oSubNav){ var This=oSubNav; clearInterval(This.time); This.time=…

css实现二级菜单显示和收缩

<ul class="nav"> <li><a href="#">一级菜单</a> <ul class="subNav"> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> <l…

JS三级折叠菜单特效 自动收缩其它级

真的很不错!很实用,在IE6.IE7.IE8.FF.chrome等浏览器都正常运行,去掉CSS中 #menu ul中 {height:100px; overflow:auto;} 即可高度自适应 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html x…

PHPCMS v9 导航显示二级菜单,显示相邻栏目，内容页显示二级栏目

导航显示二级栏目 <div class="menu">{pc:content action="category" catid="0" num="25" siteid="$siteid" order="listorder asc"}<ul><li><a href="{siteurl($siteid)}"><img s…

js面向对象二级菜单

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> ul{float: left;} ul li{list-style: none;position: relative;} ul li ul{display: none; cursor:pointer…

【京东详情页】——原生js爬坑之二级菜单

一.引言 做京东详情页仿写的时候,要用原生js实现顶部菜单的二级菜单显示与隐藏事件的触发. 过程中遇到了一个坑,在这里与大家分享.要实现的效果如下: 二.坑 谁触发事件?显示.隐藏二级菜单      a? 如果绑给a 查找a   怎么查? 选择器  怎么写? 调试  看是否找到全部a ,找到的是不是自己想要的a区域. 遍历a,添加事件 用上了this,当"鼠标移入"a时,触发showSub事件.因为前面showSub已经定义好了,所以不用再写function了.此处,"鼠标移…

JS+css滑动菜单简单实现

JS+css滑动菜单 制作一个简单的滑动菜单,当鼠标指向菜单标题时,滑出二级菜单.移开时二级菜单隐藏.目标很简单,实践时有一些细节需要注意,比如鼠标移向二级菜单的 过程中,二级菜单消失了.还有定位出错等等.. 一.使用了如下HTML标记结构 ul // 菜单条块 li // 子项块 a // 菜单(链接) div // 二级菜单块 二.主要样式设置 1.ul list-style:none // 去掉前面圆点 其它样式,边框内外补等等 2.ul li float:left;// 左浮,让菜单在同…

鼠标经过显示二级菜单的js特效

本文章来给大家推荐一个不错的鼠标经过显示二级菜单js特效效果,有需要了解的朋友可以参考一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &…

JS-鼠标经过显示二级菜单

在css处添加了border样式为了看得更清楚——源代码有一个程序漏洞,存在一个很烦人的大bug. <ul class="nav"> <li class="li"> <a href="#">一级菜单</a> <ul class="subNav"> <li> <a href="#">二级菜单</a> </li…

JS+CSS打造三级折叠菜单，自动收缩其它级 js

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JS+CSS打造三级折叠菜单,自动收缩其它级</title> <style> *,body,ul,h1,h2{ marg…