CSS创建下拉菜单

简介:

How to Create a CSS3 Dropdown Menu [Tutorial]

Topic: CSS3
Difficulty: Beginner
Estimated Completion Time: 20 mins

In this tutorial we will code in pure CSS3 the Navigation Menu that you can find in Impressionist UI by Vladimir Kudinov.

Step 1 – HTML Markup

We will create an unordered list with a list item and an anchor tag for each menu link. To create the sub menu add another unordered list inside of the list.

1 <ul class="menu">
2  
3     <li><a href="#">My dashboard</a></li>
4     <li><a href="#">Likes</a></li>
5     <li><a href="#">Views</a>
6  
7         <ul>
8             <li><a href="#" class="documents">Documents</a></li>
9             <li><a href="#" class="messages">Messages</a></li>
10             <li><a href="#" class="signout">Sign Out</a></li>
11         </ul>
12  
13     </li>
14     <li><a href="#">Uploads</a></li>
15     <li><a href="#">Videos</a></li>
16     <li><a href="#">Documents</a></li>
17  
18 </ul>



Step 2 – Menu Layout

We will start to remove the margin, padding, border and outline from all the elements of the menu. Then we will add a fixed width and height to the menu, rounded corners and the CSS3 gradients. To align the links horizontally we will float the lists to left. We also need to set the position to relative because we will need that to align the sub menus.

1 .menu,
2 .menu ul,
3 .menu li,
4 .menu a {
5     margin0;
6     padding0;
7     bordernone;
8     outlinenone;
9 }
10  
11 .menu {
12     height40px;
13     width505px;
14  
15     background#4c4e5a;
16     background: -webkit-linear-gradient(top#4c4e5a 0%,#2c2d33 100%);
17     background: -moz-linear-gradient(top#4c4e5a 0%,#2c2d33 100%);
18     background: -o-linear-gradient(top#4c4e5a 0%,#2c2d33 100%);
19     background: -ms-linear-gradient(top#4c4e5a 0%,#2c2d33 100%);
20     background: linear-gradient(top#4c4e5a 0%,#2c2d33 100%);
21  
22     -webkit-border-radius: 5px;
23     -moz-border-radius: 5px;
24     border-radius: 5px;
25 }
26  
27 .menu li {
28     positionrelative;
29     list-stylenone;
30     floatleft;
31     displayblock;
32     height40px;
33 }

We will hide the sub menu temporarily to be easier to style the first level.

1 .menu ul { displaynone; }


Step 3 – Menu Links

To style the menu links we will add some basic CSS properties like font, color, padding, etc. Then we will add a dark text shadow and a color transition to create a smooth effect when the color changes on hover state. To create the links separator add a border to the left and right and then we will remove the left border from the first link and the right border from the last link. For the hover state we will only change the text color.

1 .menu li a {
2     displayblock;
3     padding0 14px;
4     margin6px 0;
5     line-height28px;
6     text-decorationnone;
7  
8     border-left1px solid #393942;
9     border-right1px solid #4f5058;
10  
11     font-familyHelveticaArialsans-serif;
12     font-weightbold;
13     font-size13px;
14  
15     color#f3f3f3;
16     text-shadow1px 1px 1px rgba(0,0,0,.6);
17  
18     -webkit-transition: color .2s ease-in-out;
19     -moz-transition: color .2s ease-in-out;
20     -o-transition: color .2s ease-in-out;
21     -ms-transition: color .2s ease-in-out;
22     transition: color .2s ease-in-out;
23 }
24  
25 .menu li:first-child a { border-leftnone; }
26 .menu li:last-child a{ border-rightnone; }
27  
28 .menu li:hover > a { color#8fde62; }


Step 4 – Sub Menu

First let’s remove this line of code that we have added on the second step.

1 .menu ul { displaynone; }

Now we will style the sub menu. We will start to position the sub menu 40px from the top and 0px from the left of the menu item and add bottom rounded corners. We will set the opacity to 0 and on hover state to 1 to create the fade in/out effect. For the slide down/up effect we need to set the list height to 0px when is hidden and to 36px on hover state.

1 .menu ul {
2     positionabsolute;
3     top40px;
4     left0;
5  
6     opacity: 0;
7     background#1f2024;
8  
9     -webkit-border-radius: 0 0 5px 5px;
10     -moz-border-radius: 0 0 5px 5px;
11     border-radius: 0 0 5px 5px;
12  
13     -webkit-transition: opacity .25s ease .1s;
14     -moz-transition: opacity .25s ease .1s;
15     -o-transition: opacity .25s ease .1s;
16     -ms-transition: opacity .25s ease .1s;
17     transition: opacity .25s ease .1s;
18 }
19  
20 .menu li:hover > ul { opacity: 1; }
21  
22 .menu ul li {
23     height0;
24     overflowhidden;
25     padding0;
26  
27     -webkit-transition: height .25s ease .1s;
28     -moz-transition: height .25s ease .1s;
29     -o-transition: height .25s ease .1s;
30     -ms-transition: height .25s ease .1s;
31     transition: height .25s ease .1s;
32 }
33  
34 .menu li:hover > ul li {
35     height36px;
36     overflowvisible;
37     padding0;
38 }

We will set the width of the sub menu links to 100px. Instead of left and right borders we will add a bottom one and remove it from the last link.

1 .menu ul li a {
2     width100px;
3     padding4px 0 4px 40px;
4     margin0;
5  
6     bordernone;
7     border-bottom1px solid #353539;
8 }
9  
10 .menu ul li:last-child a { bordernone; }

To finish it we only need to add an icon to each sub menu link. To do it we will create a custom class for each one and add a background image.

1 .menu a.documents { backgroundurl(../img/docs.png) no-repeat 6px center; }
2 .menu a.messages { backgroundurl(../img/bubble.png) no-repeat 6px center; }
3 .menu a.signout { backgroundurl(../img/arrow.png) no-repeat 6px center; }


Conclusion

We’ve successfully created this pure CSS3 dropdown menu. If you have any question let me know in the comments. Also don’t forget to leave some feedback and share it with your friends. Follow us if you want to be the first to know about the latest tutorials and articles.


目录
相关文章
|
NoSQL 测试技术 Docker
K8S从懵圈到熟练:读懂这一篇,集群节点不下线
排查完全陌生的问题,完全不熟悉的系统组件,是售后工程师的一大工作乐趣,当然也是挑战。今天借这篇文章,跟大家分析一例这样的问题。排查过程中,需要理解一些自己完全陌生的组件,比如systemd和dbus。
9209 0
|
XML .NET 数据库
在 ASP.NET 页面中使用 TreeView 控件
一、            下载源码 http://www.asp.net/IEWebControls/IEWebControls.exe   二、            安装及编译 1、执行安装文件后,在安装目录找到 “build.bat”文件,用记事本将其打开。
1505 0
|
12天前
|
弹性计算 关系型数据库 微服务
基于 Docker 与 Kubernetes(K3s)的微服务:阿里云生产环境扩容实践
在微服务架构中,如何实现“稳定扩容”与“成本可控”是企业面临的核心挑战。本文结合 Python FastAPI 微服务实战,详解如何基于阿里云基础设施,利用 Docker 封装服务、K3s 实现容器编排,构建生产级微服务架构。内容涵盖容器构建、集群部署、自动扩缩容、可观测性等关键环节,适配阿里云资源特性与服务生态,助力企业打造低成本、高可靠、易扩展的微服务解决方案。
1273 5
|
2天前
|
存储 关系型数据库 分布式数据库
PostgreSQL 18 发布,快来 PolarDB 尝鲜!
PostgreSQL 18 发布,PolarDB for PostgreSQL 全面兼容。新版本支持异步I/O、UUIDv7、虚拟生成列、逻辑复制增强及OAuth认证,显著提升性能与安全。PolarDB-PG 18 支持存算分离架构,融合海量弹性存储与极致计算性能,搭配丰富插件生态,为企业提供高效、稳定、灵活的云数据库解决方案,助力企业数字化转型如虎添翼!
|
11天前
|
机器学习/深度学习 人工智能 前端开发
通义DeepResearch全面开源!同步分享可落地的高阶Agent构建方法论
通义研究团队开源发布通义 DeepResearch —— 首个在性能上可与 OpenAI DeepResearch 相媲美、并在多项权威基准测试中取得领先表现的全开源 Web Agent。
1290 87