大家好,又见面了,我是你们的朋友全栈君。
html导航栏下拉菜单如何制作
发布时间:2020-09-26 15:29:13
来源:亿速云
阅读:88
作者:小新
小编给大家分享一下html导航栏下拉菜单如何制作,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!
我们要说的是html导航栏下拉菜单的制作,先看一个完整的实例代码:
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
亿速云
Hello World!
Hello World!
这个代码大家能懂吗?
不懂也没事,这有解释,等解释完了你就会懂了。
html导航栏菜单实例解析:
html导航栏菜单的HTML部分:
我们可以使用任何的HTML元素来打开下拉菜单,如:,或a元素。
使用容器元素(如:
使用
html导航栏菜单的CSS部分:
.dropdown类使用position:relative,这将设置下拉菜单的内容放置在下拉按钮(使用position:absolute)的右下角位置。
.dropdown-content类中是实际的下拉菜单。默认是隐藏的,在鼠标移动到指定元素后会显示。 注意min-width的值设置为160px。你可以随意修改它。 注意: 如果你想设置下拉内容与下拉按钮的宽度一致,可设置width为100%(overflow:auto设置可以在小尺寸屏幕上滚动)。
我们使用box-shadow属性让下拉菜单看起来像一个”卡片”。
:hover选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。
看完了解释,现在有点懂了吗。把这些解释带到上面的代码上去,然后就懂了。
看,这就是代码的效果,有导航栏下拉列表,隐身的导航栏,鼠标移上去才有反应。
这就是导航栏下拉菜单的简单制作,有问题的可以在下方留言。
看完了这篇文章,相信你对html导航栏下拉菜单如何制作有了一定的了解,想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/140241.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...