纯CSS / HTML下拉菜单

  1. 纯CSS / HTML下拉菜单 在本教程中,我们将在纯CSS上创建一个经典的水平菜单。 它在列表中有图标。 指向某个项目时,它会平滑地更改按钮和文本的颜色,并添加阴影。 下拉列表可以是多级的,主要的是在纯CSS3上简单实现。...
  2. 我们在指向时为水平菜单设置动画。
  3. 描述CSS / HTML下拉菜单

纯CSS / HTML下拉菜单

在本教程中,我们将在纯CSS上创建一个经典的水平菜单。 它在列表中有图标。 指向某个项目时,它会平滑地更改按钮和文本的颜色,并添加阴影。 下拉列表可以是多级的,主要的是在纯CSS3上简单实现。

本课程的延续 - 第2部分 MOBILE VERSION水平菜单 ”。

见笔 POyzbW 由丹尼斯( @Dwstroy CodePen

在课程中使用:

  • 显示:flex;
  • 使用过渡;
  • 用位置定位元素。

HTML水平菜单结构

首先,在水平菜单下面写下标记。 我们在我的情况下打开我们的开发环境,这是PhpStorm,创建一个index.html文件,规定框架html:5,用ru替换lang。

除编码外,所有元都将被删除,我将注册我的标题“ Tom菜单 ”。

在body之间我们编写了header标签,在其中有一个带有类.dws-menu的块,它将包含我们的菜单。 接下来,结构将如下,我们将创建五个数量的列表。 在每个列表中都会有一个带有href =“#”属性的链接。 然后我将转到带有类的图标.fa .fa-

<header> <nav class =“dws-menu”> ul> li * 5> a [href =“#”]> i.fa.fa- </ nav> </ header>

我们按下申请。

让我们记下菜单项的名称( 主页,产品,服务,新闻,联系人 )。

接下来,选择并连接图标。 转到该网站,我们将选择这些菜单项的图标:

<i class =“fa fa- home ”> </ i> <i class =“fa fa- shopping- cart ”> </ i> <i class =“fa fa- cogs ”> </ i> <i class =“fa fa -th-list ”> </ i> <i class =“fa fa -envelope-open ”> </ i>

<i class =“fa fa- home ”> </ i> <i class =“fa fa- shopping- cart ”> </ i> <i class =“fa fa- cogs ”> </ i> <i class =“fa fa -th-list ”> </ i> <i class =“fa fa -envelope-open ”> </ i>

使用图标从站点下载存档,将其内容提取到计算机,将fonts文件夹和css文件夹复制到开发环境。

fonts文件夹包含图标字体,css文件夹包含其样式。 压缩样式可以删除font-awesome.min,我们连接未压缩的字体-awesome.css。

在index.html中,我们连接图标,我们使用自己的图标样式( 家庭购物车嵌入式列表信封打开 )注册每个项目。

我们已经制作了主框架,在主要样式的描述之后创建了一个子菜单,现在我们将创建一个文件,我们将在其中描述水平菜单style.css的主要样式并将其连接到index.html。 要检查样式是否已连接,请创建一个img文件夹,在其中我将在背景上放置任意图片。 让我们用背景写出图片连接。

body {background-image:url(“../ img / ep_naturalwhite.png”); }

如我们所见,所有内容都已显示,然后我们将继续描述样式。

首先,让我们重置所有缩进,默认情况下不同的浏览器可以设置:

.dws-menu * {margin:0; 填充:0; }

将标题设置为200个峰值。 并指定您可以在网站上下载并单独连接到自己,以防万一,写下其他字体。

标题{margin:200px; font-family:Cuprum,Arial,Helvetica,sans-serif; }

隐藏列表中的标记:

.dws-menu ul,.dws-menu ol {list-style:none; }

列表将以display:flax水平显示,我们将在中心进行:

.dws-menu> ul {display:flex; 辩解内容:中心; }

在标题中我们只会缩进顶部,我们会写一个margin-top。

标题{ margin-top:200px; font-family:Cuprum,Arial,Helvetica,sans-serif; }

让我们设计我们的菜单,设置按钮的颜色,字体等。

选择链接nav> ul li,并使它们成为块元素。 设置菜单背景,写入缩进,指定大小,颜色,删除下划线,并使用大写字母标题。

.dws-menu> ul li a {display:block; 背景:#ececed; 填充:15px 30px 15px 40px; font-size:14px; 颜色:#454547; text-decoration:none; text-transform:大写; }

然后定位图标,将列表分配到position:relative; 进一步对齐图标:

.dws-menu> ul li {position:relative; }

接下来,我们选择图标,绝对定位,从上面的15个峰值进行压痕,从左侧12个峰值开始,将大小增加到18个峰值。

.dws-menu> ul li> a i.fa {position:absolute; 上:15px; 左:12px; font-size:18px; }

将边框形式的分隔符分配给列表,选择第一个LI元素,设置边框。 我们选择最后一个元素LI并为其指定一个类似的边框。

.dws-menu> ul li:first-child {border-left:1px solid#b2b3b5; } .dws-menu> ul li:last-child {border-right:1px solid #babbbd; }

为LI列表制作分隔符:

.dws-menu> ul li {position:relative; border-right:1px solid#c7c8ca; }

菜单已获得外观,然后您可以在悬停期间继续描述样式。

我们在指向时为水平菜单设置动画。

选择链接并为块指定颜色,并将链接本身的颜色指定为白色。 让我们添加另一个黑影。 在0.3秒的过渡帮助下,我们将做出光滑的外观:

.dws-menu li a:hover {background:#454547; 颜色:#ffffff; box-shadow:1px 5px 10px -5px black; 过渡:所有0.3s轻松; }

要使此效果平滑消失,请将此样式轻松添加到链接:

.dws-menu> ul li a {display:block; 背景:#ececed; 填充:15px 30px 15px 40px; font-size:14px; 颜色:#454547; text-decoration:none; text-transform:大写; 过渡:所有0.3s轻松; }

主菜单已完成,您可以继续进行子菜单及其中嵌入的子菜单的说明。

描述CSS / HTML下拉菜单

关于我们打开index.html并为产品添加一个附加菜单。 在LI列表之间插入UL并在其中放置五个列表,其中包含与herf =“#”属性的链接。

ul> li * 5> a [href =“#”]

我们按下申请,写下物品的名称( 服装,电子产品,食品,工具,生活。化学 )。

<ul> <li> <a href="#">服装</a> </ li> <li> <a href="#">电子产品</a> </ li> <li> <a href = “#”>食物</a> </ li> <li> <a href="#">工具</a> </ li> <li> <a href="#">生活。 化学</a> </ li> </ ul>

然后打开style.css并描述子菜单样式。

我们选择第二个列表并指定它的位置:绝对; ,让我们将最小宽度设置为150个峰值。

/ *子菜单* / .dws-menu li ul {position:absolute; 最小宽度:150px; }

让我们写入1峰值的边界列表。

.dws-menu li> ul li {border:1px solid#c7c8ca; }

对于子菜单中的链接,我们将在10个峰值处设置缩进。,删除文本转换并使背景为几个色调较暗的背景:#e4e4e5; 。

.dws-menu li> ul li a {padding:10px; text-transform:none; 背景:#e4e4e5; }

然后创建另一个子菜单。 转到标记文件,例如我们之前通过类比菜单在“电子”表单中。 我们描述了项目( 摄像机,计算机,电话 )的标题并保存。

<li> <a href="#">电子产品</a> <ul> <li> <a href="#">相机</a> </ li> <li> <a href="#">计算机</a> </ li> <li> <a href="#">电话</a> </ li> </ ul> </ li>

他们被带出来,但隐藏在主菜单下,现在位置:绝对; 嵌套UL并将其移至150峰值。 到一边:

.dws-menu li> ul li ul {position:absolute; 右:-150px; 顶部:0; }

接下来,我们将在定位顶部菜单的主要项目时显示子菜单,为此我们添加display:none; 从而隐藏所有内部点。

/ *子菜单* / .dws-menu li ul {position:absolute; 最小宽度:150px; display:none; }

对于它们的外观,我们将在悬停时选择列表并在display:block;的帮助下显示它们。 。

.dws-menu li:hover> ul {display:block; }

现在,只需复制UL块,更改其项目即可添加多级菜单。

<ul> <li> <a href="#"> <i class =“fa fa-home”> </ i>主页</a> </ li> <li> <a href="#"> < i class =“fa fa-shopping-cart”> </ i>产品</a> <ul> <li> <a href="#">服装</a> <ul> <li> <a href = “#”>鞋子</a> </ li> <li> <a href="#">夹克</a> </ li> <li> <a href="#"> Trousers </a> < / li> </ ul> </ 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="#"> Flf </a> </ li> <li> <a href="#"> Apple </a> </ li> < / ul> </ li> </ ul> </ li> <li> <a href="#">食物</a> </ li> <li> <a href="#">工具</ h a> </ li> <li> <a href="#"> Gen. 化学</a> </ li> </ ul> </ li> <li> <a href="#"> <i class =“fa fa-cogs”> </ i>服务</a> <ul > <li> <a href="#">服务1 </a> </ li> <li> <a href="#">服务2 </a> </ li> <li> <a href = “#”>服务3 </a> </ li> </ ul> </ li> <li> <a href="#"> <i class =“fa fa-th-list”> </ i>新闻</a> </ li> <li> <a href="#"> <i class =“fa fa-envelope-open”> </ i>联系人</a> </ li> </ ul>

然后让我们用按钮完成按钮。 我使用,我创建了几个Presets,你可以创建自己的,在我的情况下,我只是复制这个代码并将它放在我之前写的背景位置。

.dws-menu> ul li a {display:block; / *固定链接 - 此渐变:http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98.757577+100 ;Custom + 3 * / background:#c9c9c9 ; / *旧浏览器* /背景:-moz-linear-gradient(顶部,#c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); / * FF3.6-15 * / background:-webkit-linear-gradient(top,#c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); / * Chrome10-25,Safari5.1-6 * /背景:线性渐变(到底部,#c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); / * W3C,IE10 +,FF16 +,Chrome26 +,Opera12 +,Safari7 + * / filter:progid:DXImageTransform.Microsoft.gradient(startColorstr ='#c9c9c9',endColorstr ='#757577',GradientType = 0); / * IE6-9 * /填充:15px 30px 15px 40px; font-size:14px; 颜色:#454547; text-decoration:none; text-transform:大写; 过渡:所有0.3s轻松; } .dws-menu li a:hover {/ *固定链接 - 此渐变:http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 * / background:#e0e1e5; / *旧浏览器* /背景:-moz-linear-gradient(顶部,#e0e1e5 0%,#454547 2%,#454547 98%,#e0e1e5 100%); / * FF3.6-15 * / background:-webkit-linear-gradient(top,#e0e1e5 0%,#454547 2%,#454547 98%,#e0e1e5 100%); / * Chrome10-25,Safari5.1-6 * /背景:线性渐变(到底部,#e0e1e5 0%,#454547 2%,#454547 98%,#e0e1e5 100%); / * W3C,IE10 +,FF16 +,Chrome26 +,Opera12 +,Safari7 + * / filter:progid:DXImageTransform.Microsoft.gradient(startColorstr ='#e0e1e5',endColorstr ='#e0e1e5',GradientType = 0); / * IE6-9 * / color:#ffffff; box-shadow:1px 5px 10px -5px black; 过渡:所有0.3s轻松; } dws-menu> ul li a {display:block;  / *固定链接 - 此渐变:http://colorzilla

如果您愿意,可以根据我们在网站上适合您的样式设计此菜单,只需生成颜色并在代码中替换它即可。 它结果是一个简单的,同时漂亮的水平菜单,用纯CSS制作。

发表评论: