css - 菜单 CSS3 中的过渡

Question

我想为我的网站做一个这样的菜单，每个部分都有过渡。我希望红色条沿着我单击其他部分移动。

http://piccsy.com/investors/

最好的方法是什么？

我也尝试过自己做，但它不起作用。

http://alpha.venasanxenxo.com/piccsy

Answer 1

你想只用CSS3 来达到同样的效果吗？该菜单使用 JavaScript。没有 CSS 方法（但......它应该带有 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><a class="goto-frame">

CSS：

.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 */

在 Chrome、Firefox、Safari、Opera、IE10 中工作，因为渐变在 IE9 和更早版本中不起作用（转换也不行）。

可以通过在 IE9 和 8 及更早版本中使用伪元素.ui-menu-bottom-line，设置其background深红色，然后width在单击时更改其（而不是更改背景渐变大小）。

---

2.这个http://dabblet.com/gist/3155740即使在释放鼠标按钮后也能按要求工作，但它不使用链接。

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>
</div>

CSS - 同样的想法，只是这次我没有点击链接 - 我正在检查单选按钮

.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;
}
/* and so on, add 10em to the bg size for each new menu item */