效果图
说明
- 由于是同学拿着代码过来问这个效果怎么实现,所以自己这里也是基于他的代码改的
- 他们只学了HTML5+CSS3,所以只用这两个做了简单的实现
问题
- 这里有一些体验很差的地方,就是鼠标在菜单中移动,很明显滑块老是会有回家的冲动
- 还有一个不是很懂的地方,如果不用JS或者JQ,有什么办法可以实现那种active的效果
- 有懂了的大佬麻烦麻烦教教我,蟹蟹蟹蟹!
代码
- index.html
<nav class="navbar">
<ul>
<li><a><h1>首页</h1></a></li>
<li><a href="category.html"><h1>种类</h1></a></li>
<li><a><h1>产地</h1></a></li>
<li><a><h1>购买</h1></a></li>
<li><a><h1>用户</h1></a></li>
<div class="bar active-first"></div>
</ul>
</nav>
- category.html
<nav class="navbar">
<ul>
<li><a href="index.html"><h1>首页</h1></a></li>
<li><a><h1>种类</h1></a></li>
<li><h1>产地</h1></li>
<li><h1>购买</h1></li>
<li><h1>用户</h1></li>
<div class="bar active-second"></div>
</ul>
</nav>
- css
html,body{
margin: 0;
padding: 0;
}
nav{
padding-top: 2.5rem;
}
a{
text-decoration: none;
color: #fe682e;
}
.navbar ul li{
float: left;
margin-left: 5rem;
color: #fe682e;
list-style: none;
cursor: pointer;
/* transition: 0.5s ease; */
}
.navbar ul li:nth-of-type(1):hover{
color: #fff;
}
.navbar ul li:nth-of-type(2){
margin-left: 60rem;
}
.bar{
position: absolute;
background-color: #22bc64;
z-index: -1;
width: 6rem;
height: 4.5rem;
border-radius: 1rem;
transition: 0.5s ease;
}
.active-first, .navbar ul li:nth-of-type(1):hover + * + * + * + * + .bar {
left: 6rem;
}
.active-second, .navbar ul li:nth-of-type(2):hover + * + * + * + .bar {
left: 69rem;
}
.active-3rd, .navbar ul li:nth-of-type(3):hover + * + * + .bar {
left: 77rem;
}
.active-4th, .navbar ul li:nth-of-type(4):hover + * + .bar {
left: 85rem;
}
.active-5th, .navbar ul li:nth-of-type(5):hover + .bar {
left: 93rem;
}
总结
- 对 HTML5 和 CSS3 了解不是很多,所以感觉用的方法是很笨的
- 用了
+
和*
来找到 hover 状态下的 li 后面的兄弟元素.bar类 - 不知道怎么在选中一个菜单后,将滑块固定在那里,也就是实现active的效果,所以用了
.active-*
的方法,然后给不同页面的滑块div加上对应的css类名,比如第一个加的是.active-first
,其他的类推
成长路上对自己所学的一些总结,各路大侠若有更好的办法望留言相助哇!
如果这篇文章对你有帮助的话请点帮我点个赞,让我知道我写的文章有帮助到他人哈哈哈,谢谢!