`

浅谈原生JS实现二级导航(优缺点与局限性)

阅读更多

【前言】

      本文简单说下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="img/animate.css">
</head>
<body>
<ul class="nav">
	<li>
		<a href="#">首页</a>
	</li>
	<li>
		<a href="#">简介</a>
		<ul>
			<li><a href="#">创建时间</a></li>
			<li><a href="#">上市时间</a></li>
			<li><a href="#">风投时间</a></li>
		</ul>
	</li>
	<li>
		<a href="#">应聘</a>
		<ul>
			<li><a href="#">技术岗</a></li>
			<li><a href="#">管理岗</a></li>
			<li><a href="#">人资岗</a></li>
		</ul>
	</li>
	<li>
		<a href="#">产品</a>
		<ul>
			<li><a href="#">产品名称</a></li>
			<li><a href="#">产品来源</a></li>
			<li><a href="#">产品功效</a></li>
			<li><a href="#">市场效益</a></li>
		</ul>
	</li>
	<li><a href="#">关于我们</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>

 

 

 

.

分享到:
评论

相关推荐

    懒人原生可控制二级导航菜单nav方向代码

    这个“懒人原生可控制二级导航菜单nav方向代码”提供了一种解决方案,它允许用户通过编程方式控制二级导航菜单的显示方向。下面我们将深入探讨这个主题,了解相关的关键知识点。 1. **导航菜单(Navigation Menu)*...

    记录原生html+js实现左侧导航栏右侧内容页的实现

    在网页设计中,左侧导航栏和右侧内容页的布局是一种常见的网页结构,广泛应用于各种网站,如企业官网、博客、论坛等。这种布局能够清晰地将网站的主要功能和具体内容划分开来,提供良好的用户体验。本篇文章将深入...

    原生js实现二级联动菜单

    本篇文章将详细介绍如何使用原生JavaScript实现二级联动菜单。 首先,我们需要了解HTML结构。在示例代码中,有两个`&lt;select&gt;`元素,分别代表一级菜单(chose1)和二级菜单(chose2)。一级菜单的`onchange`事件被...

    原生js实现无限目录树.zip

    本项目“原生js实现无限目录树”提供了一种解决方案,它涵盖了两种实现方式:一次性加载所有数据和异步加载下级数据。下面我们将深入探讨这两种实现方式以及它们在实际应用中的价值。 首先,一次性加载所有数据的...

    前端原生js实现MD5加密

    前端原生js实现MD5加密

    原生js实现jquery函数animate()动画效果的简单实例

    本文将介绍如何使用原生JavaScript实现类似jQuery中的animate()方法的动画效果。在前端开发中,jQuery提供了一套非常方便的API来实现动画效果,但随着Web标准的发展和性能优化需求的提高,原生JavaScript的方法逐渐...

    原生js实现精美放羊动画效果

    JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。...本人热爱使用原生js实现各种好看的前端页面,从而提高自己的前端开发水平。原生js实现精美放羊动画效果。

    基于原生JavaScript实现的扫雷小游戏.zip

    基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的...

    原生js实现jquery $.extend方法

    原生js实现jquery $.extend方法 通过遍历对象属性来实现

    浅谈Cordova优缺点与环境部署.docx

    Cordova 环境部署和优缺点分析 Cordova 是一个基于标准 Web 技术(HTML、JavaScript 和 CSS)的混合型框架,能够将 Web 应用程序转换为原生应用程序,支持多平台开发。下面是对 Cordova 环境部署和优缺点的分析。 ...

    JS二级菜单联动的实现

    本篇文章将详细介绍如何使用 JavaScript 实现二级菜单的联动效果。 首先,我们需要在 HTML 中设置基础的结构。二级菜单通常由一个主菜单(一级菜单)和一组子菜单(二级菜单)组成。以下是一个简单的 HTML 结构示例...

    浅谈原生JS实现jQuery的animate()动画示例

    本文介绍了浅谈原生JS实现jQuery的animate()动画示例,希望此文章对各位有所帮助。 参数介绍: obj 执行动画的元素 css JSON数值对,形式为“{属性名: 属性值}”,指要执行动画的书序及其对应值 ...

    原生AJAX或jQuery实现二级联动选择以及解析XML和JSON数据格式

    本篇博客主要探讨如何利用这两者实现二级联动选择,即当用户在一级选择中作出选择时,二级选择会自动更新,以及如何解析XML和JSON数据格式。下面我们将详细探讨这些知识点。 首先,原生AJAX是通过JavaScript直接与...

    原生js新浪游戏频道导航条下拉二级菜单列表代码

    本篇将详细介绍如何使用原生JavaScript实现新浪游戏频道导航条的下拉二级菜单列表。 首先,我们需要理解HTML结构。一个基本的导航条通常包含多个`&lt;li&gt;`元素,这些元素代表一级菜单项。每个`&lt;li&gt;`可能包含一个`&lt;a&gt;`...

    原生js实现扫雷小游戏

    【原生JS实现扫雷小游戏】是一篇关于利用JavaScript编程语言设计并实现经典电脑游戏“扫雷”的技术文章。在JavaScript的世界里,开发者可以利用HTML和CSS构建游戏界面,然后用JavaScript来处理游戏逻辑和交互。这篇...

    原生js实现带缩略图文字简介幻灯轮播图js插件.rar

    原生js实现带缩略图文字简介幻灯轮播图js插件.rar 原生js实现带缩略图文字简介幻灯轮播图js插件.rar 原生js实现带缩略图文字简介幻灯轮播图js插件.rar 原生js实现带缩略图文字简介幻灯轮播图js插件.rar 原生js实现带...

    原生JS实现导航下拉菜单效果

    【标题】:原生JS实现导航下拉菜单效果 【描述】:本示例旨在创建一个响应式的导航下拉菜单,其特点是一级菜单项下的二级菜单会在鼠标悬停时展开,且二级菜单的宽度与浏览器视口相同。实现这个功能主要依赖于...

    原生JS实现拖拽排序(亲测可用)

    原生JS实现拖拽排序可以避免引入额外的库,从而提高页面性能和减少依赖。以下是一个详细的知识点说明,涵盖了如何用原生JS实现拖拽排序的关键步骤。 1. **事件监听**: - 首先,我们需要为可拖动元素添加`...

    原生js实现单机五子棋游戏

    在本项目中,“原生js实现单机五子棋游戏”是一个基于JavaScript的简单游戏开发实例,主要展示了如何使用纯JavaScript编程语言来构建一个功能完备的五子棋游戏。五子棋是一种双人对弈的策略型棋类游戏,目标是在棋盘...

Global site tag (gtag.js) - Google Analytics