0

このようなメニューを作成するためのヘルプを探していますこれは私が欲しいメニューです

JavascriptまたはJqueryで実行できますか？

私はhtmlとcssでこのようなメニューを作りましたが、それはウェブサイトと同じではありません。

私には2つの選択肢があります

これは最初のコードですが、問題は、Webサイトの他のものをクリックすると、プログレスバーが失われることです...

body {
    padding: 10em 0 0;
}
.ui-menu {
    width: 37em;
    padding: 0;
    text-align: center;
}
.ui-menu a {
    width: 4em;
    margin: 0 .15em;
    padding: .1em .35em;
    display: inline-block;
    background: #f7f7f7;
    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;
}
.ui-menu a:nth-child(4):focus ~ .ui-menu-bottom-line,
.ui-menu a:nth-child(4):active ~ .ui-menu-bottom-line {
    background-size: 35em;
}
.ui-menu a:nth-child(5):focus ~ .ui-menu-bottom-line,
.ui-menu a:nth-child(5):active ~ .ui-menu-bottom-line {
    background-size: 45em;
}
.ui-menu a:nth-child(6):focus ~ .ui-menu-bottom-line,
.ui-menu a:nth-child(6):active ~ .ui-menu-bottom-line {
    background-size: 55em;
}
.ui-menu a:nth-child(7):focus ~ .ui-menu-bottom-line,
.ui-menu a:nth-child(7):active ~ .ui-menu-bottom-line {
    background-size: 65em;
}

および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>

2番目のコード：

body {
    padding: 10em 0 0;
}
.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;
}
.ui-menu #solution:checked ~ .ui-menu-bottom-line {
    background-size: 25em;
}
.ui-menu #team:checked ~ .ui-menu-bottom-line {
    background-size: 35em;
}
.ui-menu #traction:checked ~ .ui-menu-bottom-line {
    background-size: 45em;
}
.ui-menu #product:checked ~ .ui-menu-bottom-line {
    background-size: 55em;
}
.ui-menu #contact ~ .ui-menu-bottom-line {
    background-size: 65em;
}

および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>

piccsy.com/investorsのようなメニューを作成するにはどうすればよいですか？Javascript？Jquery？HTML + CSS ??

よろしくお願いします。

4

1 に答える 1

1

firebugをインストールするか、要素を検査して、処理がどのように行われるかを確認できます。この場合、プログレスバーには、灰色の線とその上の赤い線（実際にはdiv）の2つが含まれています。ナビゲーションをスクロールまたはクリックすると、進行状況を確認できるように赤いバーの幅を変更するスクリプトが表示されます。したがって、スクリプトは2つのことを処理する必要があります。スクロールイベントとナビゲーションイベントをクリックします。

例：

function updateProgress(){
   $('#progress').width(maxWidth * ($(body).scrollTop() / $(body).height()) );
}

$('#Nav1').click(function(){
   //Scroll to a position
   $(body).scrollTo(100);
});

$(body).scroll(function(){
   updateProgress()
});

そんな感じ

于 2012-07-24T16:45:42.420 に答える