各セクションのトランジションを使用して、このようなWebサイトのメニューを作成したいと思います。他のセクションをクリックすると、赤いバーが移動します。
それを行うための最良の方法は何ですか？
私も自分でやろうとしましたが、うまくいきません。
1 に答える
4
CSS3だけを使用して同じ効果を達成したいですか？そのメニューはJavaScriptを使用しています。兄弟または親ではない要素をクリックして要素のCSSを変更するCSSの方法はありません（まだ... CSS4に付属しているはずです）。
ただし、バーに対して同じ効果を実現することは可能です（スムーズなスクロールには、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 */
グラデーションはIE9以前では機能しないため、Chrome、Firefox、Safari、Opera、IE10で機能します（トランジションも機能しません）。
IE9および8以前では、で疑似要素を使用し、濃い赤を.ui-menu-bottom-line設定してからクリック時に変更することで（背景のグラデーションサイズを変更する代わりに）機能させることができます。backgroundwidth
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 */
于 2012-07-21T13:04:22.530 に答える