0

リンクがメニューからクリックされて新しいページが読み込まれるときに、メニューの状態を保存しようとしています。これは複数レベルのプッシュ メニューで、各カテゴリの下にカテゴリとサブカテゴリ リンクがあります。

クリック後にメインメニューがキックアウトする

メイン メニューにはカテゴリ リンクがあります カテゴリ リンクをクリックすると、メニューがサブメニューを押し出します - 新しいカテゴリ メニュー サブメニュー カテゴリからサブメニュー リンクを選択します サブメニュー リンクがクリックされ、クリックされたリンクにロードされると、メニューは現在の状態を保存する必要がありますクリックごとにレベルで。

カテゴリの下のリンクがクリックされた場合、カテゴリのタイトルは引き続き表示される必要があります。現時点では、カテゴリの下のリンクをクリックすると、クリックされたリンクのページが読み込まれますが、メニューはリセットされてトップレベルに戻ります。

私が話していることのサンプルへのリンクはこれです。

これを行う方法について適切な解決策を実装していないため、これを行う方法がわかりません。

前もって感謝します。:)

4

1 に答える 1

0

全体的な目標が何であるかに応じて、これを達成する方法がいくつかあります。

まず、Cookie を使用してページ間の状態を保存できます。これは非常に簡単に実装でき、サーバー側のコードは必要ありません。

第 2 に、データベースを使用することもできますが、既にデータベースを使用していない限り、それは少しやり過ぎです。

3 番目 - Javascript を使用して、現在のページの場所に基づいてメニューを配置する場所を決定します。これは私の推奨事項です。非常に迅速/簡単/軽量です。理論的には、ユーザーがページに移動した場合、ユーザーはメニューからそこにたどり着き、毎回メニューの正確な場所に移動します。

これは、そのままの Javascript を使用した簡単な例です。このコードは、現在の URL に基づいてアクティブなメニュー項目のクラスを設定する基本メニューを動的に生成します。ネストされたメニューで同様のことを簡単に実現できます。ご覧になり、ご不明な点がございましたらお知らせください。

(function () {
    var html = "<div class=\"menu\">" +
                      "<div id=\"Page1MenuItem\"><a href=\"page1.html\">Page1</a></div>" +
                      "<div id=\"Page2MenuItem\"><a href=\"page2.html\">Page2</a></div>" +
                      "<div id=\"Page3MenuItem\"><a href=\"page3.html\">Page3</a></div>" +
                      "<div id=\"Page4MenuItem\"><a href=\"page4.html\">Page4</a></div>" +
                      "<div id=\"Page5MenuItem\"><a href=\"page5.html\">Page5</a></div>" +
                "</div>";
    document.getElementById("MenuContainer").innerHTML = html;
    var currentUrl = window.location.pathname.toLowerCase();
    switch (currentUrl) {
        case "/page1.html":
            document.getElementById("Page1MenuItem").setAttribute("class", "current");
            break;
        case "/page2.html":
            document.getElementById("Page2MenuItem").setAttribute("class", "current");
            break;
        case "/page3.html":
            document.getElementById("Page3MenuItem").setAttribute("class", "current");
            break;
        case "/page4.html":
            document.getElementById("Page4MenuItem").setAttribute("class", "current");
            break;
        case "/page5.html":
            document.getElementById("Page5MenuItem").setAttribute("class", "current");
            break;
    }
})();
于 2013-11-14T18:54:21.880 に答える