0

縦に表示されたナビゲーション メニューがあります。現在閲覧中のページの左側に箇条書きを表示したい。ページを示すために適用される背景の変更を使用することについて少し読んだことがありliますが、それを箇条書きの使用に適用する方法がわかりません..何かアイデアはありますか?

<nav>
        <ul>
            <li><a href="#home">home</a></li>
            <li><a href="#about">about</a></li>
            <li><a href="#lookbook">lookbook</a></li>
            <li><a href="#services">services</a></li>
            <li><a href="#contact">contact</a></li>
            <li><a href="#">blog</a></li>
        </ul>
    </nav>

nav {
    position: fixed;
    right: 13%;
    top: 65%;
}

nav ul li {
    text-align: right;
}

http://jsfiddle.net/jtRws/

4

4 に答える 4

1

アップデート

提案されたすべてのソリューションの実例

AMC と協力して、要件を考えると JavaScript ソリューションがより適切に機能すると判断されました。すべてのコンテンツが 1 つのページに表示されるため、CSS ソリューションは私の調査結果に基づいて機能しません。リンクがクリックされたときに箇条書きを表示する単純な jQuery コードを提案しました。

jQuery 
$(window).load(function(event) {
    $('a').click(function() {
        $('#Nav li').removeClass();
        $(this).parent().addClass("current");                   
    });
});
CSS 
#navcontainer3 ul {
    width: 200px;
    list-style-type:disc;
}

#navcontainer3 ul li {
    color: #ccc;
    float:right;
    clear:right;
}

#navcontainer3 ul li.current {
    color: #000;
}

このページにはすべてのソリューションの例が含まれていますが、次のリンクで jQuery ソリューションのみを見つけることができます: http://jsfiddle.net/jtRws/10/。

興味深い問題です。明らかに、JavaScript ソリューションはありますが、純粋な CSS ソリューションが必要なようです。

ソリューション 0

リスト スタイルの色を背景色に設定して、他のリスト アイテムの箇条書きを非表示にします。

すべてのページに同じナビゲーション HTML がありますが、各ページに<body>はidそのページに固有のものがあります。例: <body id="home">、<body id="products">など。その後、巧妙な CSS を使用して、現在のページは特定のスタイル定義 (以下の最後の定義) を取得します。

#navcontainer0 ul {
    width: 200px;
    list-style-type:disc;
}

#navcontainer0 ul li {
    color: #fff;
    float:right;
    clear:right;
}

body#home #homenav0,
body#products #prodnav0 {
    color: #000;
}

解決策 1

background箇条書きイメージの表示と非表示を切り替えるために使用します。この記事に基づいて、次のコードを使用しました。この記事では、この手法について詳しく説明しています。以下に、実際の例と同じコードを示します。

CSS 
#navcontainer ul {
    width: 200px;
    padding:0;
    margin:0;
    text-align:right;
}

#navcontainer ul li a:hover {
    color: #930;
    background: #f5d7b4;
}

body#home a#homenav,
body#products a#prodnav,
body#faq a#faqnav,
body#contact a#connav {
    background:url(bullet.gif) 0 50% no-repeat no-repeat;
    padding-left:15px;
}
製品ページ 
<body id="products">
    <div id="navcontainer">
        <ul id="navlist">
            <li><a id="homenav" href="index.html">Home</a></li>
            <li><a id="prodnav" href="products.html" >Products</a></li>
        </ul>
    </div>
</body>
于 2013-02-27T02:36:37.710 に答える
0

@earthdesignerの回答に加えて、jqueryを追加したくない場合は、代わりに次のJavaScriptを使用してください。

http://jsfiddle.net/7uxcg/31/

window.onload = function() {
    // var nav = document.getElementById('nav');
    var nav = document.getElementsByTagName('NAV')[0].children[0];

    for(c in nav.children) {
        var li = nav.children[c];
        if(li.nodeName == 'LI') {
            li.onclick = function() {
                changeClass(this.children[0].hash);
            }
        }
    }

    function changeClass(cur) {
        var nav = document.getElementsByTagName('NAV')[0].children[0];

        for(c in nav.children) {
            var li = nav.children[c];
            if(li.nodeName == 'LI' && li.children[0].hash == cur)
                li.className = 'active';
            else
                li.className = ''
        }        
    }
};
于 2013-02-27T11:48:41.447 に答える
0

現在のページのみに箇条書きが必要であることは理解しています。というわけで、まずは通常弾をなくしていきます。

ul {list-style-type:none;}

すべてのページのコンテンツ div に ID を使用していることがわかりました。それを属性セレクターと組み合わせて、できることの例を次に示します。

#home li a[href='#home']:before, #about li a[href='#about']:before {
content:"•";pointer-events:none; text-decoration:none;
}
于 2013-02-27T08:22:33.680 に答える
0

ページ セクションをナビゲートするためにアンカーを使用していると思います。そのため、現在考えられる唯一の方法は、javascript(jQuery) を使用することです。

コード例を更新しました: http://tinyurl.com/a6ypyuz

于 2013-02-27T04:59:41.900 に答える