html、css实现导航栏5种常用下拉效果
实现的效果：鼠标移入按钮时按钮中的内容就会出现，分别展示不同的出现效果。
效果难点：不使用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>
html、css实现导航栏5种常用下拉效果的更多相关文章
- bootstrap 导航栏鼠标悬停显示下拉菜单
在jsp中加入一下代码: .navbar .nav > li:hover .dropdown-menu { display: block;} 全部代码如下所示: <%@ page lang ...
- 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- iOS 滑动隐藏导航栏-三种方式
/** 1隐藏导航栏-简单- */ self.navigationController.hidesBarsOnSwipe = YES; /** 2隐藏导航栏-不随tableView滑动消失效果 ...
- CSS 笔记——导航栏、下拉菜单、提示工具
8. 导航栏.下拉菜单.提示工具 (1)导航栏 垂直导航栏 <!DOCTYPE html> <html lang="en"> <head> &l ...
- HTML/CSS：导航栏水平和垂直
1.垂直导航栏 导航栏 = 链接列表导航栏基本上是一个链接列表,因此使用 <ul> 和 <li> 元素是非常合适的.如需构建垂直导航栏,我们只需要定义 <a> 元素 ...
- 巧妙使用checkbox制作纯css动态导航栏
前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked ...
- 第8天：CSS制作导航栏
今天主要学习了网页导航栏的制作.注意:引入外部CSS样式时,如果使用background:url(../images/1.png),一定记得用..跳出当前文件夹,回到上级目录. 一.导航栏实现步骤: ...
- Css之导航栏学习
Css: ul { list-style-type:none; margin:; padding:; overflow:hidden; background-color:blue; /*固定在顶部*/ ...
- 前端css小米导航栏设置及盒子定位居中问题
1.小米最上部导航栏设置 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
随机推荐
- C#项目中常见的目录和文件
本文迁移自Panda666原博客,原发布时间:2021年4月17日. Bin 目录 bin是英文binary的缩写, 字面意思是二进制,意指用来存放编译后的结果.C#/VB编译器编译后的程序二进制文件 ...
- 一文掌握软件安全必备技术 SAST
上一篇文章中,我们讨论了软件供应链的概念并了解到近年来软件供应链安全事件层出不穷.为了保障软件供应链安全,我们需要了解网络安全领域中的一些主要技术.本篇文章将介绍其中一个重要技术--SAST. 当开发 ...
- Python爬虫-正则
介绍: 是 一门全新的语言,一种使用表达式的方式对字符串进行匹配的语法规则 我们抓取到的网页源代码本质上就是一个超长的字符串,想从里面提取内容,用正则再适合不过 优点:速度快.效率高.准确性高 缺点: ...
- 视图模板引擎——Vue【双向绑定】原理剖析
首先我们来了解一下MVC.MVP.MVMM这三大架构模式在前端角度上的理解. MVC分别是 Model(模型).View(视图).Controller(控制器)三个模块.View(视图层)最主要完成前 ...
- webpack中文api
1. 简介 1.Plugins://插件 webpack has a rich plugin interface.Most of the features are internal plug ...
- Linux文本查看工具
文本查看工具 cat 特点: 不能用来看二进制文件 选项: -A: 显示不可见字符 cat支持标准输入: cat > aa.txt ---键盘作为标准输入,输出的结果重定向文件中去了 cat & ...
- 一文看完vue3的变化之处
在通读了vue的官网文档后,我记录下了如下这些相对于2.x的变化之处. 1.创建应用实例的变化 之前一般是这样: let app = new Vue({ // ...一些选项 template: '' ...
- 配置svn，httpd启动报错 Job for httpd.service failed because the control process exited with error code. See "systemctl status httpd.service" and "journalctl -xe" for details.
查看httpd的状态,发现80端口被占用,因为我的nginx的80端口. systemctl status httpd.service 解决: 把Apache的端口该成别的端口 vi /etc/ht ...
- Failed to Setup IP tables: Unable to enable SKIP DNAT rule: (iptables failed: iptables --wait -t nat -I DOCKER -i br-b1938128a963
报错信息:Failed to Setup IP tables: Unable to enable SKIP DNAT rule: (iptables failed: iptables --wait ...
- 利用MATLAB仿真节点个数和节点通信半径与网络连通率的关系
一.目的 ①在不同节点个数的情况下,用Matlab拟合出连通率与通信半径的关系曲线. ②在不同节点通信半径的情况下,用Matlab拟合出连通率与节点个数的关系曲线. 二.方法描述 在1x1的单位矩形中 ...