菜單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 */