我想为我的网站做一个菜单，每个部分都有过渡。我希望红色条移动我点击其他部分。
最好的方法是什么？
我也试过自己这样做，但它不起作用。
答案 0 :(得分：4)
你想使用只是 CSS3达到同样的效果吗？该菜单使用JavaScript。没有CSS方式（但是...... should come with CSS4）通过单击一个不是它的兄弟或它的父元素的元素来改变元素的CSS。
然而，可以为条形实现相同的效果（为了平滑滚动，您需要使用JavaScript）。但不是那种HTML结构。
我尝试过几件事：
1。此http://dabblet.com/gist/3155730使用链接进行操作，但每当您点击页面上的其他位置（而不是链接）时，效果就会消失。
在这种情况下的想法是在下面的元素上有一个渐变，并在单击链接时更改其大小。请注意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>
</div>
HTML的格式确实有用：我创建了链接inline-block，因此我不能在结束标记</a>和下一个开始标记{{1}之间留下任何空格}}
CSS：
<a class="goto-frame">适用于Chrome，Firefox，Safari，Opera，IE10，因为渐变在IE9及更早版本中不起作用（转换也不会）。
可以使用.ui-menu {
width: 37em;
padding: 0;
text-align: center;
}
.ui-menu a {
width: 4em;
margin: 0;
padding: .1em .5em;
display: inline-block;
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;
}
/* and so on, I keep adding 10em with every new menu item */
上的伪元素在IE9和8及更早版本中工作，将其设置为.ui-menu-bottom-line深红色，然后在点击时更改其background（而不是改变背景渐变尺寸）。
2。即使在释放鼠标按钮后，此http://dabblet.com/gist/3155740也能按要求工作，但不使用链接。
HTML
widthCSS - 同样的想法，只是这次我没有点击链接 - 我正在检查单选按钮
<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>
</div>