开发工具与关键技术:开发工具DW、vs code,关键技术html、css。
实现的效果:鼠标移入按钮时按钮中的内容就会出现,分别展示不同的出现效果。
效果难点:不使用JavaScript,那这个效果的难点就是在于:hover伪类的掌控,以及考验对html的结构掌握。
1、 html布局
在你想要的位置制作出5个导航栏按钮,或者更多。
这就是html结构中的样子,下面来分析这种结构的意义;
·整个导航栏就是一个菜单,表面上的就是一级菜单。
·一级菜单里的内容就是二级菜单;
·一级菜单复制了多个之后就是导航栏,内容标签看需求,多数情况都是a标签。
·一级菜单中,必须有一个代表着当前菜单的标签可以是文本也可以是a标签。
·如果一级菜单中有了二级菜单,那么二级菜单的ul列表必须放在一级菜单里。
2、 css样式
先将整个导航栏装饰一下,不然达不到效果。
我们这里的样式需要单独创建出一个样式文件。
这是初始的效果。字母大写的部分就是一级菜单;一级菜单中又有二级菜单,想要多少菜单在上一级菜单中添加列表就好;
这里将代表二级菜单的ul标签隐藏。
如何隐藏,也就代表了显示的方式;这里我把常用的都写上,篇幅就有点长了。
注:隐藏列表请使用visibility: hidden进行隐藏。
第一种:移入一级菜单中二级菜单下拉。
这种效果,我们需要将二级菜单ul的高度设置为0,并将overflow加上hidden(溢出边界外不显示)。
这种效果的重点,是二级菜单的定位,属性一定是top才能是下拉的效果;如果是bottom那么就是上拉。
效果:移入一级菜单,其内容中的二级菜单高度设置回来就有了;
第二种:移入一级菜单中二级菜单上移。
这种应该算是最常见的一种效果。
这种效果我们需要将一级菜单的top位移值改大一点,让菜单里顶部更远点然后透明看不见。
鼠标移入一级菜单中,二级菜单里的top改回来,透明值也调1这样就完成了上移的效果。
第三种:移入一级菜单中二级菜单淡出。
这种效果是效果中最简单的,更改二级列表的透明度就好了。
原本状态下,二级菜单隐藏。
鼠标移入一级菜单,二级菜单通过透明度和visibility值的更改完成效果。
第四种:移入一级菜单中二级菜单左移。
这种跟第二种上移的方式是是一样的,只不过是把top值换成了left值而已。
实际上移动都是移动列表位置而已,差别不大,也不难实现,寻常的页面都是这样做出来的。
第五种:翻转
这种就涉及到了css3的知识点,需要你在脑海中构想出一个三维空间,稍微难那么一点点!
在鼠标还没移入一级菜单时,使用效果的二级菜单中必备的两个属性:transform-origin和transform;
第一关键点:perspective()属性在rotaeX()属性中处于哪个位置,
·在rotaeX()属性的最前面,那么perspective()会将里面的值根据屏幕“前”的位置做判断
·在rotaeX()属性第一个属性之后那么perspective()会将里面的值根据屏幕“后”的位置做判断
第二关键点:transform-origin属性在这只是告诉transform要做效果,是根据top顶点来做效果。
技术点总结:
导航栏其实不难,用上js后甚至可以说简单。抛开js,纯html、css来做也不难,多数效果还是够用的!
html部分更多的是结构上的问题,鼠标移入的时候一定是二级菜单的父元素!
如果鼠标移入的是兄弟元素,那么鼠标移入进了二级菜单,就会造成鼠标移入二级菜单,二级菜单的消失这么一个效果。翻转效果可以取源代码自己研究研究,看懂更好。
源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>导航栏实现</title>
</head>
<!-- 页面渲染内容 -->
<body>
<!-- 导航栏 -->
<div class="nav">
<!-- 列表 -->
<ul>
<!-- 一级菜单 -->
<li class="nav-litem">
<a href="javascript:;">home</a>
<ul>
<!-- 二级菜单 -->
<li><a href="javascript:;">这是二级菜单</a></li>
<li><a href="#">home-menu</a></li>
</ul>
</li>
<li class="nav-litem">
<a href="javascript:;">list</a>
<!-- 二级菜单 -->
<ul>
<li><a href="javascript:;">这是二级菜单</a></li>
<li><a href="#">list-menu</a></li>
</ul>
</li>
<li class="nav-litem">
<a href="javascript:;">group</a>
<!-- 二级菜单 -->
<ul>
<li><a href="javascript:;">这是二级菜单</a></li>
<li><a href="#">group-menu</a></li>
</ul>
</li>
<li class="nav-litem">
<a href="javascript:;">Pages</a>
<!-- 二级菜单 -->
<ul>
<li><a href="javascript:;">这是二级菜单</a></li>
<li><a href="#">Pages-menu</a></li>
</ul>
</li>
<li class="nav-litem">
<a href="javascript:;">Contact</a>
<!-- 二级菜单 -->
<ul>
<li><a href="javascript:;">这是二级菜单</a></li>
<li><a href="#">Contact-menu</a></li>
</ul>
</li>
</ul>
</div>
<!-- 导航栏 -->
</body>
<!-- 页面css样式 -->
<style>
/* 这里是导航栏的css样式表 */
body {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
/* 一级 */
.nav>ul {
margin: 0;
padding: 0;
display: flex;
}
.nav .nav-litem {
position: relative;
flex: 0 0 20%;
}
.nav .nav-litem>a {
text-transform: uppercase;
font-size: 1.2rem;
color: white;
text-align: center;
background-color: orange;
display: block;
line-height: 50px;
transition: .3s;
}
.nav .nav-litem>a:hover {
background-color: rgb(218, 141, 0);
}
/* 二级菜单 */
.nav .nav-litem>ul {
visibility: hidden;
position: absolute;
top: 100%;
transition: all .3s;
width: 100%;
padding: 8px 0;
text-align: center;
background-color: white;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
}
.nav .nav-litem>ul>li:hover {
background-color: rgb(248, 248, 248);
}
.nav .nav-litem>ul>li>a {
line-height: 40px;
display: block;
color: rgb(100, 100, 100);
}
/* 第一种:下拉 */
.nav .nav-litem:nth-child(1)>ul {
padding: 0;
overflow: hidden;
height: 0px;
visibility: visible;
}
.nav .nav-litem:nth-child(1):hover>ul {
height: 78px;
padding: 8px 0;
}
/* 第二种:上移 */
.nav .nav-litem:nth-child(2)>ul {
top: 150%;
opacity: 0;
visibility: hidden;
}
.nav .nav-litem:nth-child(2):hover>ul {
top: 100%;
visibility: visible;
opacity: 1;
}
/* 第三种:淡出 */
.nav .nav-litem:nth-child(3)>ul {
transition: .5s;
opacity: 0;
visibility: hidden;
}
.nav .nav-litem:nth-child(3):hover>ul {
visibility: visible;
opacity: 1;
}
/* 第四种:左移 */
.nav .nav-litem:nth-child(4)>ul {
left: -20%;
opacity: 0;
visibility: hidden;
}
.nav .nav-litem:nth-child(4):hover>ul {
left: 0%;
visibility: visible;
opacity: 1;
}
/* 第五种:翻转 */
.nav .nav-litem:nth-child(5)>ul {
opacity: 0;
visibility: hidden;
transform-origin: top;
transform: perspective(600px) rotateX(-90deg);
}
.nav .nav-litem:nth-child(5):hover>ul {
visibility: visible;
opacity: 1;
transform: perspective(600px) rotateX(0deg);
}
</style>
</html>