0

このサイトとまったく同じ機能を持つナビゲーション メニューを作成したい: http://www.rex-ny.com/

HTML と CSS のみを使用したいのですが、一日中試してみましたが、解決策が見つかりませんでした。

  1. メニュー項目を選択すると、ページが読み込まれた後もそのメニューが開いたままになります。これは可能ですか？

  2. また、メインメニュー項目をクリック可能にして、新しいページをロードし、そのページがロードされたときにそのメニューが開いているようにしたいと考えています。

これが私がこれまでに持っているものです：

http://jsfiddle.net/MEL9d/

ここにjqueryがあります：

$(document).ready(function () {
    $('#menu > li > a').click(function(){
        if ($(this).attr('class') != 'active'){
            $('#menu li ul').hide();
            $(this).next().toggle();
            $('#menu li a').removeClass('active');
            $(this).addClass('active');
        }
    });
});

そしてCSS：

#menu {
    float: left;
}
#menu li a {
    display: block;
}
#menu li ul {
    display: none;
}
4

1 に答える 1

1

これはプレーンな HTML と CSS で実行できます。次のような構造があるとします。

- site
  + css
  + js
    index.html
    about.html

各ページの本文にクラスを追加できるのでindex、 forindex.phpとaboutfor about.php:

<body class="about">

次に、メニューで、ページに対応する各アイテムに id (または多くの場所にメニューを配置する予定の場合はクラス) を追加します。

<ul id="menu">
  <li id="index" class="active"><a href="index.html"></li>
  <li id="about"><a href="about.html"></li>
</ul>

最後に、CSS を使用して、各ページのメニュー項目を具体的にスタイル設定できます。

.index #index,
.about #about,
#menu .active {
  // styles for active item
}
于 2013-08-30T02:27:48.467 に答える