jquery - 使用 CSS 的滑动菜单?
问题描述
我正在尝试创建一个如下图所示的滑动菜单:
如果单击菜单,我需要将黑色边框/线条向左和向右滑动。
我在 Google 上进行了搜索,到目前为止,我想出了以下内容:
@import url(https://fonts.googleapis.com/css?family=Montserrat);
ul{
position: absolute;
width: 100%; height: 50px;
top: 50%;
left: 0;
padding: 0px;
list-style: none;
text-align: center;
}
li{
position: relative;
font-family: 'Montserrat', sans-serif;
font-size: 20px;
display: inline-block;
padding: 0px 15px;
color: #000;
width:48%;
box-sizing:border-box;
height: 50px;
}
a{
text-decoration: none;
color: #000;
}
.link{
position: relative;
}
.link:after{
content: '';
position: absolute;
width: 0; height: 3px;
display: block;
margin-top: 5px;
right: 0;
background: #000;
transition: width .2s ease;
-webkit-transition: width .2s ease;
}
.link:hover:after{
width: 100%;
left: 0;
background: #fff;
}
/*END OF CODE*/
<ul>
<li><a class="link" href="#">Home</a></li>
<li><a class="link" href="#">Work</a></li></li>
</ul>
但这不是我要找的。有人可以请教这个吗?
提前致谢。
解决方案
这里有一个滑动导航栏的示例,在示例中您将看到 4 个项目,添加或删除您需要的项目,但请记住更改 css,因为如果您更改项目,动画和栏看起来会不一样.
希望您了解所有 CSS 代码,然后您可以更改您想要的示例。
希望对你有帮助!!!
@import url(https://fonts.googleapis.com/css?family=Montserrat);
*{
margin: 0;
padding: 0;
}
.clear{
clear: both;
}
.slide-toggle{
display: none;
}
.slidemenu{
font-family: 'Montserrat', sans-serif;
max-width: 400px;
margin: 50px auto;
overflow: hidden;
}
.slidemenu label{
width: 25%;
text-align: center;
display: block;
float: left;
color: #333;
opacity: 0.2;
}
.slidemenu label:hover{
cursor: pointer;
color: #666;
}
.slidemenu label span{
display: block;
padding: 10px;
}
.slidemenu label .icon{
font-size: 20px;
border: solid 2px #333;
text-align: center;
height: 50px;
width: 50px;
display: block;
margin: 0 auto;
line-height: 50px;
border-radius: 50%;
}
/*Bar Style*/
.slider{
width: 100%;
height: 5px;
display: block;
background: #ccc;
margin-top: 100px;
border-radius: 5px;
}
.slider .bar{
width: 25%;
height: 5px;
background: #333;
border-radius: 5px;
}
/*Animations*/
.slidemenu label, .slider .bar {
transition: all 500ms ease-in-out;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
}
/*Toggle*/
.slidemenu .slide-toggle:checked + label{
opacity: 1;
}
.slidemenu #slide-item-1:checked ~ .slider .bar{ margin-left: 0; }
.slidemenu #slide-item-2:checked ~ .slider .bar{ margin-left: 25%; }
.slidemenu #slide-item-3:checked ~ .slider .bar{ margin-left: 50%; }
.slidemenu #slide-item-4:checked ~ .slider .bar{ margin-left: 75%; }
/*END OF CODE*/
<nav class="slidemenu">
<!-- Menú Item 1 -->
<input type="radio" name="slideItem" id="slide-item-1" class="slide-toggle" checked/>
<label for="slide-item-1"><p class="icon">1</p><span>Item1</span></label>
<!-- Menú Item 2 -->
<input type="radio" name="slideItem" id="slide-item-2" class="slide-toggle"/>
<label for="slide-item-2"><p class="icon">2</p><span>Item2</span></label>
<!-- Menú Item 3 -->
<input type="radio" name="slideItem" id="slide-item-3" class="slide-toggle"/>
<label for="slide-item-3"><p class="icon">3</p><span>Item3</span></label>
<!-- Menú Item 4 -->
<input type="radio" name="slideItem" id="slide-item-4" class="slide-toggle"/>
<label for="slide-item-4"><p class="icon">4</p><span>Item4</span></label>
<!-- Bar of the bottom -->
<div class="slider">
<div class="bar"></div>
</div>
</nav>
推荐阅读
- php - 如何计算 Laravel 加密方式输出的最大长度?
- c++ - 将参数转换为 LPWSTR CreateProcess
- symfony - 你如何路由到 Symfony4 中的 vanilla php 脚本?
- c - 如何在C中编写接受比较器的函数?
- mongodb - MongoDB count() 查询在 mongo shell 中返回过时的结果
- excel - 在“Workbook_Open”中合并两个宏
- python - 使用 Tkinter OptionMenu 小部件的数据库查询
- mysql - Typeorm groupBy 按 orderBy 另一列获取最后一行
- c# - 多个对象引用一个中心数据对象的设计模式是什么?
- javascript - Odoo 显示通知