JavaScript写横向二级导航

HTML：
首先引入公共样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="public.css"><link rel="stylesheet" href="submenu.css">
</head>
<body>
<!--通用导航-->
<nav class="mainNav"><div class="section navSec"><ul class="navUl" id="navUL"><li><a href="#">首页</a></li><li><a href="#">欢迎进入</a><ul class="navULM"><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><li><a href="#">明天过后</a><ul class="navULM"><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><li><a href="#">进入官网</a> </li></ul></div>
</nav>
<!--主体内容-->
<div class="section bodySec">主体内容
</div><!--主体内容  end--><!--通用导航  end-->
<script src="menu.js"></script>
</body>
</html>

公共样式：


*{margin: 0;padding: 0;
}
ul,li，ol{list-style: none;//清除页面中的点
}
a{text-decoration: none;//去掉超链接的下划线
}
img{border: none;//去掉图片的边框
}
.clears{//清除浮动clear: both;height: 0;line-height: 0;font-size:0;overflow:hidden;
}
button{//变为手势cursor: pointer;
}
body{font-family: Arial, Verdana, "Microsoft Yahei", "Pingfang SC", "Simsn","pingfan SC","Simsn";font-size:14px;
}

代码样式：

.mainNav{background: #7e22ff;height: 50px;
}
.section{width: 1200px;margin-left: auto;margin-right: auto;
}
.navSec{height: 50px;background: #7e22ff;
}
/*一级导航相对定位，二级导航绝对定位*/
.navUl>li{float:left;line-height: 50px;/*文字上下居中*/position: relative;/*相对定位*/perspective: 500px;/*透视，加载容器上面，把内部变成透视空间*/transform-style: preserve-3d;/*伪3D，把内部变成3D空间*/
}
.navUl>li>a{color: #fff;display: block;/*块元素*/padding-left: 50px;padding-right: 50px;transition:all 0.5s;/*过度动画*/
}
.navUl>li>a:hover,
.navUl>li:hover>a{/*在二级导航上面是，一级导航上面也有背景*/background:#520c64 ;
}
.navULM{position: absolute;/*绝对定位*/top:50px;left: 50%;/*导航线的正中间*/margin-left: -60px;width: 120px;text-align: center;display: none;/*隐藏二级菜单，页面不会渲染*/
}
.navULM a{background: #7e22ff;color: white;display: block;transition:all 0.5s;/*过度动画*/
}
.navULM a:hover{background: #520c64;
}
.navULM li{background: #7e22ff;
}
.navULM.on{display: block;}
.navULM.on li:nth-child(1){    /*nth-child第n个子标签  第一个字标签（第一个li）*/animation: subAni 0.5s both;
}
.navULM.on li:nth-child(2){    /*nth-child第n个子标签*/animation: subAni 0.5s 0.1s both;
}
.navULM.on li:nth-child(3){    /*nth-child第n个子标签*/animation: subAni 0.5s 0.2s both;
}
.navULM.on li:nth-child(4){    /*nth-child第n个子标签   第四个子标签*/animation: subAni 0.5s 0.3s both;
}
.navULM.on li:nth-child(5){    /*nth-child第n个子标签    第五个子标签*/animation: subAni 0.3s 0.4s both;
}
@keyframes subAni {0%{transform: rotateY(180deg);top:90px;opacity: 0;//透明度，看不见}/*0%{transform: scale(0.5,0.5);top:90px;opacity: 0;//透明度，看不见}90%{transform:scale(1.1,1.1);top:90px;opacity: 0;//透明度，看不见}100%{transform:  scale(1,1);top:50px;opacity: 1;//看不见}*/100%{transform:  rotateY(0deg);top:50px;opacity: 1;//看不见}}.bodySec{height: 200px;background: #B292FF;
}

JS：

{let navUL=document.getElementById("navUL");let li=navUL.children;//找到ul下面的字标签li，不包括二级li//不推荐：li=navUL.getElementsByTagName("li");会找到一级li、二级li//不推荐：li=navUL.querySelectorAll("li");会找到一级li、二级lifor(let i=0;i<=li.length-1;i++){li[i].addEventListener("mouseenter",function (event) {let nowLi=event.currentTarget;let ul=nowLi.children[1];if(!ul){//判断标签是否存在return false;//若不存在在，终止函数}//添加类ul.classList.add("on");});li[i].addEventListener("mouseleave",function (event) {let nowLi=event.currentTarget;let ul=nowLi.children[1];if(!ul){//判断标签是否存在return false;//若不存在在，终止函数}//去掉类ul.classList.remove("on")});}
}

JavaScript写横向二级导航相关推荐

css二级横向导航条,纯CSS实现的横向二级导航菜单(无js兼容性强)
内容介绍热点排行相关文章下载地址↓ 纯CSS实现,无JavaScript,效果不错,实用性强,兼容各种浏览器! 第一步: 下载源代码及背景图片第二步: 在网页区添加样式定义 [code] /* = ...
HTML横向二级导航
图片素材没有发,就一个logo还有一个Nav背景图. 效果 HTML <!DOCTYPE html> <html lang="zh-cn"> <hea ...
Django横向二级导航栏（鼠标悬空事件）
1 <!DOCTYPE html> 2 <html lang="en" xmlns="http://www.w3.org/1999/html" ...
经典蓝色横向二级导航栏
[img]http://dl.iteye.com/upload/attachment/0068/2213/3e71ce48-0f17-3af9-aaed-275865688a36.jpg[/img]
横向的二级导航菜单，在多浏览器下可用
<!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <html> <head ...
PHPCMS V9 添加二级导航
今天看了看phpcms 写到二级导航时发现点问题,查询导航栏的信息时返回的$r[arrchildid]与自己想象的不符,文档上说是返回子栏目id但是却有些不同. 开始的思路: 1 <ul cla ...
html与js二级菜单横排,JavaScript实现横向滑出的多级菜单效果
本文实例讲述了JavaScript实现横向滑出的多级菜单效果.分享给大家供大家参考.具体如下: 这是一款JavaScript横向滑出的多级菜单,只用鼠标放上就可以动画出现二级菜单,整体设计精美,大气, ...
用JS写二级导航（下拉菜单）
昨天学的新知识.工作有点多,没来得及总结. 今天耐心整理一下吧. 先看下效果,目前网站没有上线,凑合着看看图片吧. 下面是代码: <!DOCTYPE HTML> <html> ...
html 中怎么写二级导航,html二级菜单导航栏成品
html 高级二级导航菜单代码如下: #menu { width: 600px; font-family: Arial; font-size: 15px; } #menu ul { display: ...

JavaScript写横向二级导航

JavaScript写横向二级导航相关推荐

最新文章

热门文章