只用css和html完成
html代码
1.第一种 下拉菜单
<body>
<div class="navbar">
<ul>
<li><a href="#">homepage</a>
<ul>
<li><a href="#">homepage1</a>
<li><a href="#">homepage2</a>
<li><a href="#">homepage3</a>
<li><a href="#">homepage4</a>
</ul>
</li>
<li><a href="#">products</a>
<ul>
<li><a href="#">products1</a>
<li><a href="#">products2</a>
<li><a href="#">products3</a>
<li><a href="#">products4</a>
</ul>
</li>
<li><a href="#">about</a>
<ul>
<li><a href="#">about1</a>
<li><a href="#">about2</a>
<li><a href="#">about3</a>
<li><a href="#">about4</a>
</ul>
</li>
<li><a href="#">feedback</a>
<ul>
<li><a href="#">feedback1</a>
<li><a href="#">feedback2</a>
<li><a href="#">feedback3</a>
<li><a href="#">feedback3</a>
</ul>
</li>
<li><a href="#">email</a>
<ul>
<li><a href="#">email1</a>
<li><a href="#">email2</a>
<li><a href="#">email3</a>
<li><a href="#">email4</a>
</ul>
</li>
</ul>
</div>
</body>
css引入样式
*{
margin: 0;
padding: 0;
}
body{
background:url(../imgs/reg_bg_min.jpg);
background-size: cover;
font-family:'Times New Roman', Times, serif;
}
.navbar{
width: 100%;
height: 50px;
background: #333;
box-shadow: 0 -2px 2px #000;
margin-top: 300px;
}
.navbar ul{
list-style: none;
}
.navbar ul li{
float: left;
width: 150px;
height: 50px;
background: #222;
margin-right: 1px;
font-size: 14px;
}
.navbar ul li:hover{
color: #fff;
background: rgba(238, 82, 83, 1);
animation: changColor 2s infinite;
animation-delay: 3s;
}
@keyframes changColor{
0%{
background: #1d84b5;
}
50%{
background:#00cecb;
}
100%{
background:#1d84b5;
}
}
.navbar ul li a{
text-decoration: none;
color: #fff;
display: block;
text-align: center;
line-height:50px;
font-weight:bold;
text-transform: uppercase;
}
.navbar ul li ul li{
display: none;
width: 150px;
height: 50px;
float: initial;
background: rgba(1, 163, 164, 1);
font-size: 10px;
transition: 0.3s;
}
.navbar ul li:hover ul li{
display: block;
border-top: 1px solid rgba(79,219,251,0.5);
}
2.菜单滑动
我这个滑动效果是用一个 div 改变透明度 在更改他在鼠标移动时 坐标位置完成实现的。要了解更多请到哔哩哔哩搜索。我也是在上面看到的例子。
<body>
<div class=container>
<nav>
<a href="#">home</a>
<a href="#">about</a>
<a href="#">blog</a>
<a href="#">prot</a>
<a href="#">contact</a>
<div class="animation start-home"></div>
</nav>
</div>
</body>
css样式
css样式里面有不认识的属性到我上面一篇博客——css简单入门 去看看
https://blog.csdn.net/liugaoyuans/article/details/121523159
*{
margin: 0 ;
padding: 0;
}
nav {
position: relative;
width: 590px;
height: 50px;
background-color: blueviolet;
border-radius: 8px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
font-size: 30px;
/* 定义字体粗细 */
font-weight:bold;
}
nav a {
position:relative;
display: block;
float: left;
font-size: 15px;
line-height: 50px;
width: 100px;
height: 50px;
color: yellow;
/* 字母 全部大写 */
text-transform: uppercase;
text-decoration: none;
text-align: center;
z-index: 10;
/* background-color: aquamarine; */
}
nav a:nth-child(1) {
width: 100px;
}
nav a:nth-child(2) {
width: 110px;
}
nav a:nth-child(3) {
width: 100px;
}
nav a:nth-child(4) {
width: 160px;
}
nav a:nth-child(5) {
width: 120px;
}
nav .animation{
position: absolute;
height: 100%;
background-color: #f97f5f;
z-index: 9;
border-radius: 8px;
transition: all 0.3s;
}
.start-home,
nav a:nth-child(1):hover~.animation{
width: 100px;
left: 0px;
}
.start-about,
nav a:nth-child(2):hover~.animation{
width: 110px;
left: 100px;
}
.start-blog,
nav a:nth-child(3):hover~.animation{
width: 100px;
left: 210px;
}
.start-prot,
nav a:nth-child(4):hover~.animation{
width: 160px;
left: 310px;
}
.start-contact,
nav a:nth-child(5):hover~.animation{
width: 120px;
left: 470px;
}