每个链接的菜单下方的进度条
Progress bar below menu for each link
我正在寻求帮助来创建这样的菜单这是我想要的菜单
它可以用Javascript或Jquery完成?
我用html和css做了一个这样的菜单,但它和网站不一样。
我有两个选项
这是第一个代码,但问题是如果我点击网站的其他东西,它会失去进度条。。。
body {
padding: 10em 0 0;
}
.ui-menu {
width: 37em;
padding: 0;
text-align: center;
}
.ui-menu a {
width: 4em;
margin: 0 .15em;
padding: .1em .35em;
display: inline-block;
background: #f7f7f7;
font: 17px "Arial Narrow", sans-serif;
text-align: center;
text-decoration: none;
}
.ui-menu a:focus {
outline: none;
}
.ui-menu-bottom-line {
width: 35em;
height: 1px;
margin: 1em auto;
background: #d7d7d7
linear-gradient(left, #d82126 50%, transparent 50%) no-repeat;
background-size: 5em;
transition: 1s;
}
.ui-menu a:nth-child(2):focus ~ .ui-menu-bottom-line,
.ui-menu a:nth-child(2):active ~ .ui-menu-bottom-line {
background-size: 15em;
}
.ui-menu a:nth-child(3):focus ~ .ui-menu-bottom-line,
.ui-menu a:nth-child(3):active ~ .ui-menu-bottom-line {
background-size: 25em;
}
.ui-menu a:nth-child(4):focus ~ .ui-menu-bottom-line,
.ui-menu a:nth-child(4):active ~ .ui-menu-bottom-line {
background-size: 35em;
}
.ui-menu a:nth-child(5):focus ~ .ui-menu-bottom-line,
.ui-menu a:nth-child(5):active ~ .ui-menu-bottom-line {
background-size: 45em;
}
.ui-menu a:nth-child(6):focus ~ .ui-menu-bottom-line,
.ui-menu a:nth-child(6):active ~ .ui-menu-bottom-line {
background-size: 55em;
}
.ui-menu a:nth-child(7):focus ~ .ui-menu-bottom-line,
.ui-menu a:nth-child(7):active ~ .ui-menu-bottom-line {
background-size: 65em;
}
和HTML:
<div class="ui-menu">
<a class="goto-frame" href="#" tabindex="1">Welcome</a><a class="goto-frame" href="#" tabindex="1">Problem</a><a class="goto-frame" href="#solution" tabindex="1">
Solution</a><a class="goto-frame" href="#team" tabindex="1">Team</a><a class="goto-frame" href="#traction" tabindex="1">Traction
</a><a class="goto-frame" href="#product" tabindex="1">Product</a><a class="goto-frame" href="#contact" tabindex="1">Contact</a>
<div class="ui-menu-bottom-line"></div>
第二个代码:
body {
padding: 10em 0 0;
}
.ui-menu {
width: 37em;
padding: 0;
font: 17px "Arial Narrow", sans-serif;
text-align: center;
}
.ui-menu input[type=radio] { display: none; }
.ui-menu label {
width: 4em;
margin: 0;
padding: .1em .5em;
display: inline-block;
text-align: center;
}
.ui-menu-bottom-line {
width: 35em;
height: 1px;
margin: 1em auto;
background: #d7d7d7
linear-gradient(left, #d82126 50%, transparent 50%) no-repeat;
background-size: 5em;
transition: 1s;
}
.ui-menu #welcome:checked ~ .ui-menu-bottom-line {
background-size: 5em;
}
.ui-menu #problem:checked ~ .ui-menu-bottom-line {
background-size: 15em;
}
.ui-menu #solution:checked ~ .ui-menu-bottom-line {
background-size: 25em;
}
.ui-menu #team:checked ~ .ui-menu-bottom-line {
background-size: 35em;
}
.ui-menu #traction:checked ~ .ui-menu-bottom-line {
background-size: 45em;
}
.ui-menu #product:checked ~ .ui-menu-bottom-line {
background-size: 55em;
}
.ui-menu #contact ~ .ui-menu-bottom-line {
background-size: 65em;
}
和HTML:
<div class="ui-menu">
<input type="radio" name="mi" id="welcome">
<label class="goto-frame" for="welcome">Welcome</label>
<input type="radio" name="mi" id="problem">
<label class="goto-frame" for="problem">Problem</label>
<input type="radio" name="mi" id="solution">
<label class="goto-frame" for="solution">Solution</label>
<input type="radio" name="mi" id="team">
<label class="goto-frame" for="team">Team</label>
<input type="radio" name="mi" id="traction">
<label class="goto-frame" for="traction">Traction</label>
<input type="radio" name="mi" id="product">
<label class="goto-frame" for="product">Product</label>
<input type="radio" name="mi" id="contact">
<label class="goto-frame" for="contact">Contact</label>
<div class="ui-menu-bottom-line"></div>
我怎样才能制作像piccsy.com/investors这样的菜单??Javascript?Jquery?HTML+CSS??
提前谢谢大家。
您可以安装firebug或检查元素来查看事情是如何完成的。在这种情况下,进度条包含两个内容:一条灰色线和一条红色线(实际上是div)。当你滚动或单击导航时,会有一个脚本来更改红色条的宽度,这样你就可以看到进度。所以你的脚本必须处理两件事:滚动事件和点击导航事件。
示例:
function updateProgress(){
$('#progress').width(maxWidth * ($(body).scrollTop() / $(body).height()) );
}
$('#Nav1').click(function(){
//Scroll to a position
$(body).scrollTo(100);
});
$(body).scroll(function(){
updateProgress()
});
类似的东西
相关文章:
- 我的下拉菜单中的链接不起作用
- 绝对链接/相对链接均未获胜't在菜单中工作
- Javascript+动态菜单+当前链接样式(CSS)+基于PHP的网站
- 当主导航链接悬停时,在侧菜单中显示链接
- 如何在每个下拉菜单项的每个类别下输出链接
- 下拉菜单在我进入链接之前消失了
- 如何分配数据切换=“;下拉菜单”;用于wordpress中的父链接
- 用这个jQuery动画菜单悬停超链接
- 每个链接的菜单下方的进度条
- Php菜单查询数据库并显示文本/链接
- 在表格最后一行(链接)中显示菜单,并在单击菜单项时显示模式窗口
- 单击手风琴菜单外的链接时折叠jQuery手风琴
- 在阻止默认操作时启用菜单的链接
- jQuery UI链接选择菜单.单击按钮时窗体将重置
- 如何在单击子链接时停止垂直菜单的手风琴
- 当屏幕尺寸较小时,可使用Javascript向移动菜单添加链接.不再有效
- 当子菜单的父级或包含链接处于活动状态时,如何告知子菜单可见
- 如何在 jQuery 中为链接我的“活动”滚动菜单创建例外
- 下拉菜单-链接不起作用
- 重叠的选项卡/下拉菜单-链接不起作用-CSS或JS问题