菜单CSS3中的转换

Question

我想为每个部分中的转换都为我的网站做一个菜单。我想要红色的酒吧移动，我点击其他部分。

http://piccsy.com/investors/

什么是做到这一点的最好方法是什么？

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

http://alpha.venasanxenxo.com/piccsy

Answer 1

你想实现使用只是 CSS3同样的效果？该菜单使用JavaScript。没有CSS方式（但是它should come with CSS4）通过单击不是它的兄弟或它的父母的元素来更改元素的CSS。

然而，对于（为了平滑滚动，您需要使用JavaScript），可以达到相同的效果。但不是用那个HTML结构。

我试了几件事情：

这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，火狐，Safari，歌剧，IE10作为梯度不IE9工作及以上（也一样转换）。

可以由通过使用伪元件上.ui-menu-bottom-line在IE9和8岁以上的工作，并设置其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 */