纯CSS的导航下拉菜单
写在案例前:
本案例并非原创,百度一搜“css下拉菜单”一定能看见一模一样的案例,而且不止一个,所以就仿照这个案例又自己做了一遍,并且总结一下自己遇到的一些问题结合思考给出的解决办法,虽然不知道原作者是谁,但是还是要在这里感谢一下原作者,给了我不止一点思路。废话不多说,上图。
<nav><ul><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><li><a href="#">导航三</a><ul><li><a href="#">二级导航</a></li><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></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></ul> </li><li><a href="#">导航六</a></li></ul></nav>
nav {margin:100px auto;text-align:center;
}
nav ul {border-radius:10px;background:linear-gradient(to bottom,#efefef,#bbbbbb);padding:0 20px;display:inline-table;position:relative; box-shadow:1px 1px 3px #666;
}
nav ul ul {display:none;
}
nav ul li {float:left;
}
nav ul::after {content:"";display:block;clear:both;
}
nav ul li a {display:block;padding:25px 40px;color:#000;text-decoration:none;font-family:"微软雅黑";
}
nav ul li:hover > ul {display:block;
}
nav ul li:hover {background:linear-gradient(to bottom,#4f5964,#5f6975);
}
nav ul li:hover a {color:#FFF;
}
nav ul ul {background:#5f6975;border-radius:0;position:absolute;top:100%;padding:0;
}
nav ul ul li {float:none;border-top:1px solid #6b727c;border-bottom:1px solid #575f6a;
}
nav ul ul li a {color:#FFF;
}
nav ul ul li a:hover {background:#4b545f;
}
nav ul ul ul {width:100%;position:absolute;left:100%;top:50%;
}
思路:
- 做一个下拉菜单,脑海里第一个闪过的效果就是:鼠标触及-下拉菜单出现-鼠标移开-下拉菜单隐藏
- 既然是纯css实现。首先需要了解display属性的特性,使用none、block值来实现下拉菜单的出现和隐藏。
- 搭配html结构,利用
<ul><li></li></ul>
对菜单进行分级 - 熟悉伪类选择器,
:hover
不止在文本中使用 - 利用
::after
伪元素选择器来清除浮动 - 使用
position
定位来控制下拉菜单的位置 - 考虑美观
以上案例用到了一些css3的新特性,如:圆角、背景阴影、背景色渐变、伪元素
- 圆角 border-radius
当值为四个数值时,按顺序分别表示左上角、右上角、右下角、左下角。
当值为两个数值时,前者表示左上角、右下角;后者表示右上角、左下角;两者是对立关系。
当值为一个数值时,说明元素的四个角都使用这一数值。
border-radius还可以用来制作半圆,以及四分之一圆
div {width:100px;height:50px; border-radius:50px 50px 0 0;background-color:#F00;
}
背景阴影 box-shadow
语法:box-shadow:【水平阴影】 【垂直阴影】【阴影模糊距离】 【阴影模糊程度】【阴影颜色】【内部阴影】/【外部阴影】
其中,水平阴影、垂直阴影是必须项,其他为可选项,阴影位置默认为外部阴影(outset)。背景颜色渐变
线性渐变语法 background:linear-gradient(方向,起始颜色,终止颜色);
方向也称角度,线性渐变的角度是以圆心为起点的发散型角度。例如:想要一个由上往下的红白渐变background:linear-gradient(to bottom,red,white);
关于颜色渐变这一特性其实需要讲述的有很多,会单开一篇博文来做详细讲解伪元素
上一篇博文中提到的利用伪元素选择器来清除浮动,在这个案例中就运用到了,详情请翻上一篇。
遇到的问题及解决办法
display:inline-table
不设置宽度时,宽度由内容撑开
在案例中,并没有给任何父元素或者子元素添加宽、高,而是使用padding值和内容本身将元素撑开。在未设置display:inline-table
的情况下,元素的宽就是整个浏览器的宽度,是随着浏览器的大小来改变的。设置后,元素的宽=padding-left
+内容+padding-right
给元素设置定位时,需要给一个宽度
当第三级菜单出现时,文字是以单个竖排的方式来显示(中、英文文本的排列不同),如下图:
在上图的三级导航中,中、英文排序方式完全不同,
position
属性的定义中有一点很重要,如果不给添加定位后的元素宽度,那么此元素会以一个字符的宽度来显示,从中文文本中可以看出,它就是这么显示的,一个中文字代表一个字符;而英文文本中,一个单词代表一个字符,注意是一个单词,不是一个字母。
所以给此元素添加一个宽度就可以使文本横向显示出来。
纯CSS的导航下拉菜单相关推荐
- php下拉框css样式,纯CSS实现的下拉菜单
实现效果 实现代码 html Home WordPress Themes Plugins Tutorials Web Design Resources Links Tutorials HTML/CSS ...
- 纯css 下拉选择,纯CSS实现的下拉菜单
实现效果 实现代码 html home wordpress themes plugins tutorials web design resources links tutorials html/css ...
- 纯css制作三级下拉菜单
css本身的功能就挺强大的,尤其是css3出来之后,大部分特效只用css3就能完成了,无需再费心思去想js怎么怎么做jQuery怎么怎么做,代码简洁质量轻巧.下面是本人用纯css制作的三级下拉菜单效果 ...
- css表格中下拉菜单怎么设置,css如何实现下拉菜单?css实现下拉菜单的方法(完整代码)...
本篇文章给大家带来的内容是关于css如何实现下拉菜单?css实现下拉菜单的方法(完整代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. /*盒子,相对定位*/ .dropdown{ ...
- css3如何写下拉菜单,css如何实现下拉菜单 超详细
首页 >web前端>css教程>正文 css如何实现下拉菜单?css实现下拉菜单的方法(完整代码) 原创2019-04- 本篇文章给大家带来的内容是关于css如何实现下拉菜单?css ...
- 经典的 div + css 鼠标 hover 下拉菜单
经典的 div + css 鼠标 hover 下拉菜单 效果图: 源码: <html><head> <meta charset="utf-8"> ...
- css实现列表下拉菜单_逐行:点击打开下拉列表和菜单的高级CSS技巧
css实现列表下拉菜单 by David Piepgrass 由David Piepgrass 逐行:点击打开下拉列表和菜单的高级CSS技巧 (Line-by-line: advanced CSS t ...
- html 仿百度百科导航下拉菜单
演示图1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- jquery实现导航下拉菜单
jquery实现导航下拉菜单 原生的: 用layui 原生的: html <div id="my_menu" class="sdmenu">< ...
- 利用jQuery制作的导航下拉菜单效果
利用jQuery制作的导航下拉菜单效果,其实利用css同样可以实现导航下拉菜单效果,但自从学习了jQuery后,感觉还是jQuery做起来效果更好.jQuery制作导航下拉菜单,需要用到jQuery方 ...
最新文章
- IOS UIView 放大缩小
- 基于阿里云RDS创建ECS自建从库
- “staticMetaObject”: 不是“****”的成员
- spring.shardingsphere.rules.sharding.sharding-algorithms.database_inline.props‘ is not valid
- 无法从外部连接MySQL_无法从外部VPC连接到RDS实例(ERROR 2003(HY000)无法连接到MySQL服务器)...
- 【Java TCP/IP Socket】 — close()/shutdownOutput()/shutdownInput() 分析
- BZOJ2689 : 堡垒
- 计算机字长与下列哪项指标密切相关,组成原理与汇编语言-中国大学mooc-题库零氪...
- 201521123115 《Java程序设计》第3周学习总结
- mysql 查询正在运行的事务并且杀掉该事务
- Linux快速入门之一(基础)
- 手机坏点如何测试软件,怎么检测手机屏幕坏点
- Android——获取实时的手机屏幕四个点经纬度(百度地图)
- ubuntu20.04安装qq和微信
- 清除此计算机中wps云盘,Win10专业版系统怎么把电脑上的WPS网盘彻底删掉?
- 均匀分布、正态分布、二项分布、泊松分布、指数分布
- 产品调研,如何避免「浮于表面」?
- 基于星环TDH数据仓库典型总和场景数据流转设计
- DOP Dilution Of Precision;多点定位 Multilateration;测向交叉定位 三角定位;DAE;无人机
- 服务器临时文件的后缀名,在Java中创建具有指定扩展名后缀的临时文件