纯CSS实现实用的常见下拉菜单效果

多数网站中，下拉菜单效果基本常见。在实现技术方面，实现该效果的方法也很多，今天就来说说纯CSS样式来实现常见的下拉菜单，有兴趣的小伙伴可以参考下：

实现效果如下：

鼠标未移上前

鼠标移上后

从效果图可以看出，当鼠标移上去的时候，会弹出下拉的菜单层！要是在JQuery中，实现原理也蛮简单，就是当鼠标触发移上去事件，弹层就显示（默认隐藏）的原理！而在CSS实现该效果会用到的原理就是CSS3的动画透明度过渡显示。因为效果图中也有几个三角形图标，所以统一用CSS和CSS3的知识来实现比较容易。下面首先看看html的结构：如下：

布局的CSS：

右边实心的三角形可以用伪类元素 :after来实现.

鼠标移上去，各种变化的样式，其中当鼠标移上去时候，弹出层的透明度变为1，就可以看到内容

当弹层出现后，第一行会有一个三角形指向，实现该三角形可以用到伪类:first-child:before，如下

结合起来就能完成纯CSS做下拉菜单效果！想学更多知识，欢迎关注“恒星网络”头条号！

部导航条布局

html代码：

<!DOCTYPE html><html><head>

<title>头部导航条制作</title>

</head>

<body>

<li><a href="#">web前端</a></li>

</ul>

</div>

</body>

</html>

用无序列表制作头部导航条：

无序列表是上下布局排列的，那我们需要思考的是让他左右布局的方式排列
左右排列的方式我们所用的是float:left;浮动的方法让li左右布局
CSS样式：

.navbox{
width:960px;
height:40px;
margin:20pxauto;
background:#08c;
}
.navbox >ul>li{
float: left;
width:160px;
height:40px;
line-height:40px;
text-align: center;
font-size:16px;
}

鼠标移入时实现颜色的变换

HTML代码：

<li><a href="#">web前端</a></li>

</ul></div>

思路：

鼠标移入时每个<li>显示为另一种颜色background: #00bfff;

css代码：

.navbox ul li a{ display: block; color: #fff; background: #08c;}.navbox ul li a:hover{ text-decoration: none; background: #00bfff;}

下拉菜单实现

html：

<li><a href="#">web前端</a>

<li><a href="#">JavaScript</a></li>

</ul>

</li>

</ul>

</div>

思路：

在一级菜单web前端下实现二级菜单<ul class="subnav">

html
css
JavaScript
当鼠标移入菜单时web前端时显示二级菜单，移出时隐藏；
CSS代码实现：

.subnav{ display: none;}/*鼠标没有移入“web前端”选项栏时二级菜单隐藏*/.navbox ul li:hover .subnav{ display: block;}/*当鼠标移入“web前端”选项栏时显示二级菜单*/

三级菜单实现

HTML

<li><a href="#">web前端</a>

</ul>

</li>

<li><a href="#">JavaScript</a></li>

</ul>

</li>

</ul>

</div>

思路：

前面与二级菜单思路相似唯一不同的是三级菜单显示的位置。

我们看看css的绝对定位与相对定位这篇文章

CSS代码：

.subnav>li{ position: relative;}.threenav{ position: absolute; top: 0; left: 160px; width: 160px;}.subnav, .threenav{ display: none;}.subnav li:hover .threenav{ display: block;}

最后实现的效果如下图：

家好，今天给大家介绍一款，JavaScript+css实现的下拉菜单，明暗模式切换html页面前端源码（图1）。送给大家哦，获取方式在本文末尾。

图1

隐藏式下拉菜单，明暗模式随意切换（图2）

图2

代码完整，需要的朋友可以下载学习（图3）

图3

本源码编码：10214，需要的朋友，访问下面链接后，搜索10214，即可获取。

「链接」

在线咨询

上一篇：struts2教师资源共享实训需求分析
下一篇：你肯定没有试过这个方法，来破解易语言！

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

纯CSS实现实用的常见下拉菜单效果

家好，今天给大家介绍一款，JavaScript+css实现的下拉菜单，明暗模式切换html页面前端源码（图1）。送给大家哦，获取方式在本文末尾。

隐藏式下拉菜单，明暗模式随意切换（图2）

代码完整，需要的朋友可以下载学习（图3）

本源码编码：10214，需要的朋友，访问下面链接后，搜索10214，即可获取。

「链接」

您的项目需求