-1

CSS とロールオーバー状態 (つまり、ホバー、アクティブ) のイメージ スプライトを使用して、ナビゲーション メニューを作成しました。ただし、選択したページに応じて、対応するナビゲーション ボタンが強調表示されるように、「選択済み/現在」の状態 (私の場合はアクティブな状態と同じ) を作成しようとしています。ここに私が持っているものがあります:

CSS:

#menu li {
margin: 0;
padding: 0;
height: 50px;
list-style: none;
display: inline;
float: left;
line-height: 40px;
}

#menu a {
display: block;
height: 50px;
}

#menu a:hover {
background-image:url(../Images/about_rollover.gif)
}

#about {
width: 90px;
}

#about a:hover {
background-position: 0 -50px;
}

#about a:active {
background-position: 0 -100px;
}

#about a:selected {
background-position: 0 -100px;
}

#portfolio {
width: 90px;
}

#portfolio a:hover {
background-position: 90px -50px;
}

#portfolio a:active {
background-position: 90px -100px;

HTML: 

<ul id="menu">
    <li id="about"><a href"#"></a></li>
    <li id="portfolio"><a href="portfolio.html"></a></li>
</ul>

イメージ スプライト:ここで表示

4

3 に答える 3

1

これを解決する方法の 1 つは、現在閲覧しているページを識別するクラスを body タグに配置し、その特定のクラスに該当する場合に、ナビゲーション項目に選択状態を適用することです。お気に入り：

HTML:

<body class="about">
    <ul id="menu">
        <li id="about"><a href=...

CSS:

body.about ul li.about { [selected background position] }
于 2012-11-13T00:27:58.687 に答える
1

最初:
サイトを実装するためにサーバー レベルで何らかの言語を使用しますか?
もしそうなら、選択されたページをチェックし、それをマークする特定のクラスを追加することは興味深いでしょう、例えば (php 経由で):

<ul id="menu">
<li id="about"<?php echo $accessedPage == 'about' ? ' class="selected"' : ''; ?>><a href"#"></a></li>
<li id="portfolio"><a href="portfolio.html"></a></li>
</ul>

2 番目:
css セレクターをホバーして選択するようにグループ化できます。

#about a:hover,
#about .selected a {
    background-position: 0 -50px;
}

#portfolio a:hover,
#portfolio .selected {
    background-position: 90px -50px;
}
于 2012-11-13T00:30:24.453 に答える
0

厳密には CSS ではなく、何らかのタイプのアプリケーション ロジックの現在のパスを確認する必要があります。

たとえば、JavaScript を使用できます。

$('document').ready(function () {

    //Gets the current window location
    var currentPath = window.location.pathname;


    /*Logic to identify where the user is relative
    to your webpage and update the style*/
    if (currentPath = '/portfolio')
    {
        $('portfolio').addclass('menuactive');
    }
});

さまざまなメニュー項目の状態を定義するクラスを追加する必要があります。しかし、これで正しい方向に進むはずです。

于 2012-11-13T00:22:07.307 に答える