`
阅读更多
【前言】       本文简单说下js实现二级导航   【主体】 (1) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS</title> <style type="text/css"> *{ margin: 0; padding: 0; } li{ list-style: none; } a{ text-decoration: none; } .nav{ width: 80%; height: 40px; line-height: 40px; margin: auto; } .nav>li{ float: left; min-width: 150px; position: relative; padding-bottom: 10px; } .nav>li>a{ display: block; width: 100%; height: 100%; background: rgba(0,0,0,0.3); text-align: center; color: white; } .nav>li>ul{ position: absolute; top: 50px; background: rgba(0,0,0,0.2); min-width: 150%; left: -25%; height: auto; display: none; } .nav>li>ul>li>a{ text-align: center; display: block; width: 100%; height: 100%; color: white; } .nav>li>a:hover{ background: rgba(0,0,0,0.4); } .nav>li>ul>li>a:hover{ background: rgba(0,0,0,0.4); } .nav > li.active > ul{ display: block; } </style> <link rel="stylesheet" type="text/css" href="http://www.iteye.com/img/animate.css"> </head> <body> <ul class="nav"> <li> <a href="//anny2008.com/570109268_/#"">首页</a> </li> <li> <a href="//anny2008.com/570109268_/#"">简介</a> <ul> <li><a href="//anny2008.com/570109268_/#"">创建时间</a></li> <li><a href="//anny2008.com/570109268_/#"">上市时间</a></li> <li><a href="//anny2008.com/570109268_/#"">风投时间</a></li> </ul> </li> <li> <a href="//anny2008.com/570109268_/#"">应聘</a> <ul> <li><a href="//anny2008.com/570109268_/#"">技术岗</a></li> <li><a href="//anny2008.com/570109268_/#"">管理岗</a></li> <li><a href="//anny2008.com/570109268_/#"">人资岗</a></li> </ul> </li> <li> <a href="//anny2008.com/570109268_/#"">产品</a> <ul> <li><a href="//anny2008.com/570109268_/#"">产品名称</a></li> <li><a href="//anny2008.com/570109268_/#"">产品来源</a></li> <li><a href="//anny2008.com/570109268_/#"">产品功效</a></li> <li><a href="//anny2008.com/570109268_/#"">市场效益</a></li> </ul> </li> <li><a href="//anny2008.com/570109268_/#"">关于我们</a></li> </ul> <script type="text/javascript"> /* querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素 querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素 */ var liTags = document.querySelectorAll(".nav > li"); for (var i=0; i<liTags.length; i++){ liTags[i].onmouseenter = function (e) { /* event对象 1、event.target返回触发事件的元素 2、event.currentTarget返回绑定事件的元素 */ var li = e.currentTarget;//获得其监听器触发了事件的哪个元素 /* 元素类名的操作 element.classList.add(class1,class2,...)元素添加、element.classList.remove(class1,class2,...)元素移除 */ li.classList.add("active"); console.log(li.children[1]) } liTags[i].onmouseleave = function (e) { var li = e.currentTarget; li.classList.remove("active"); } } </script> </body> </html>       .
分享到:
评论
相关资源推荐
  • Web前端开发实战6:CSS实现导航菜单结合二级下拉式菜单的简单变换 前面几篇博文都在讲导航菜单和二级下拉式菜单,其实有很多方法都可以实现的,具体的情况还要视情况而定。 在后面学习到jQuery框架之后,会有更丰富的动画效果,由于在学习Ajax和jQuery的初步阶段,对于很多的复杂的导 航菜单和二级下拉式菜单没法做,但是学习了CSS和JS还是能实现一些简单的变换的。这篇博文就来说说用CSS实现 导航菜单结合二级下拉式菜单的两个简单变换吧。        首
  • 原生js侧边栏效果
  • Web前端开发实战2:二级下拉式菜单之JS实现 上一篇博文提到了二级下拉式菜单是用HTML和CSS实现的,我们这一篇来用JavaScript脚本实现下拉菜单的显 示和隐藏。使用 JavaScript方法实现我们需要用的知识有:         1)JS事件:onmouseover鼠标经过事件和onmouseout鼠标离开事件。         2)JS基础语法:使用function关键字定义函数。         3)DOM编程:get
  • HTML/CSS/JS实现二级菜单导航+轮播图 学习了HTML、CSS和JavaScript后,总得做点东西练练手,于是干脆跟着效果做了个类似于慕课网的轮播效果,配上一个二级菜单导航,具体效果如下: 首先来说说这个项目中用的比较多的知识点: CSS定位——绝对定位和相对定位的搭配使用,用的非常多 JavaScript——实现三秒换图、按下按钮换图、按下小圆点换图、鼠标移动到主菜单上即显示二级菜单等功能 div块标签 首先是整个页面
  • Web前端之网页导航----126邮箱(关于position) 原图 我做的 这里主要讲讲position:absolute;和position:relative; ①这里先看两个标签,,他们是html5标签, 标签定义文档的页眉(介绍信息), 标签定义导航链接的部分。我觉得html5也没什么,就是标签更语义化了?我不懂,乱说的,呵呵。 ②126logo和右边的“你的专业单子邮箱”都是用图片代替文字,右边的使用background-im
  • 原生JS楼层导航 html> html lang="en"> head> meta charset="utf-8"> title>楼层导航title> style type="text/css"> * { margin: 0; padding: 0; } a { text-decoration: none; color: #FFF; } .na
  • js二级导航菜单代码实例 分享一个比较简单的二级导航菜单效果。 鼠标悬浮菜单能够出现二级菜单,代码实例如下: 001002003004005006007008009010011012013014015016017018019020021022023024025026027028029030031032033034035036037038039040041042043044045046047048049050051052
  • CSS 制作垂直导航 垂直导航CSS 垂直导航主要用于网站的侧边栏导航,使用侧边栏的好处是可以节约空间。因此,一些内容多,而又喜欢简约的网站,常常以侧边栏的方式进行展示。默认情况下,列表及列表项 li 元素都是块级元素,每个列表项后独占一行。因此,使用无序列表创建垂直导航就非常方便。首先,创建一个无序列表来包裹导航链接:&amp;lt;ul class = &quot;verticalnav&quot;&amp;gt;    &amp;lt;li&amp;gt;&amp;lt;...
  • Web前端开发实战1:二级下拉式菜单之CSS实现 二级下拉式菜单在各大学校网站,电商类网站,新闻类网站等大型?网站很常见,那么它的实现原理是什么呢? 学习了Web前端开发的知识后,我们是可以实现这样的功能的。复杂的都是从基础效果上添加做出来的,原理和流程 还是一样的,今天开始做一些简单的二级下拉式菜单。        横向一级菜单我们见到的很多,如下图所示是:        二级下拉菜单图:        二级下拉菜单是
  • web前端开发之二级菜单的隐藏和展开
  • JS原生动态导航
  • 二级缓存应用场景及其局限性 二级缓存应用场景适用于访问次数多且用户对查询结果实时性要求不高的查询,采用二级缓存可降低数据库访问量,提高访问速度,应用场景——耗时较高的统计分析sql、通讯记录查询(一个月一次)。 实现方法:通过设置刷新间隔时间,由MyBatis每隔一段时间自动清空缓存,根据数据变化频率设置缓存刷新时间flushInterval。局限性对细粒度级别的数据缓存实现不好,可以想象一下,一个二级缓存好不容易缓
  • 分享 原生javaScript实现的楼层导航功能
  • JavaScript原生代码实现导航栏小效果
  • 服务机器人常用的定位导航技术及优缺点分析 自主定位导航是机器人实现智能化的前提之一,是赋予机器人感知和行动能力的关键因素。如果说机器人不会自主定位导航,不能对周围环境进行分析、判断和选择,规划路径,那么,这个机器人离智能还有一大截的差距。那么,在现有SLAM技术中,机器人常用的定位导航技术有哪些呢?   视觉定位导航 视觉定位导航主要借助视觉传感器完成,机器人借助单目、双目摄像头、深度摄像机、视频信号数字化设备或基于DSP的快速
  • html用js实现导航栏的二级菜单,自动伸缩。。。
  • Web前端开发实战4:导航菜单(一) 在前面的博文中我们提到横向一级菜单,这里我们来看看导航菜单。导航菜单种类很多,但是制作原理都是大同 小异的,这里看的比二级下拉式菜单还简单。来看一些网站上的导航菜单:        垂直导航菜单:        水平导航菜单:        一垂直菜单       制作原理:(1)用无序列表构建菜单;(2)标签的设置:ul li a{display:block;}。定义的
  • 原生JS实现滑动导航
  • Web前端开发-导航效果 Web前端开发,自学笔记整理 导航效果 1.导航效果1 完整代码 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;title&amp;gt;导航效果&amp;lt;/title&amp;gt; &amp;lt;styl
  • 浅谈vue.js的理解
Global site tag (gtag.js) - Google Analytics