php - 親メニュー項目からサブメニューを分割し、別のdivに表示するphp関数

Question

親のメインメニュー項目からサブメニューを分割して、レイアウトの別の場所に表示できますか？マークアップはアプリケーションによって動的に生成されるため、手動で制御することはできません。

私のマークアップは次のように生成されます。

<div class="wrapper" style="margin:0 auto; width:900px;">
    <div class="nav">
        <ul class="menu">
            <li class="item"><a href="#">Item 1</a></li>
            <li class="item"> <a href="#">Item 2</a>
                <ul class="sub-menu">
                    <li class="sub-item"><a href="#">Sub Item 1</a></li>
                    <li class="sub-item"><a href="#">Sub Item 2</a></li>
                    <li class="sub-item"><a href="#">Sub Item 3</a></li>
                </ul>
            </li>
            <li class="item"><a href="#">Item 3</a></li>
        </ul>
    </div>
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit imperdiet convallis. Aliquam erat volutpat. Vestibulum consectetur tellus a est aliquam imperdiet. Aliquam sed dolor ut nulla porta pellentesque. Vivamus et tortor at tortor interdum pretium. Donec vel ante tellus, id iaculis elit. Duis nec eros quis nulla vestibulum sagittis. Nam a auctor ipsum. Curabitur nulla elit, volutpat eu porta a, mollis sed tellus. Integer eleifend nulla non nibh tristique euismod. </p>
    </div>
    <div class="sidebar">
        <div class="split-menu">
        </div>
    </div>
</div>

タスク：

アイテム2をクリックすると、<ul class="sub-menu">アイテム2のが表示される必要があります。<div class="split-menu">同様に、アイテム3をクリックすると、アイテム3のサブメニューが表示される必要がありますか？

ここに画像の説明を入力してください

私の質問：

PHPを使用してこれを行うことはできますか？
そうでない場合はこれを行う方法は？

アップデート：

私の目標は、JavaScriptが無効になっている古いIE6ブラウザーでこれを表示することです。これは、クライアントのターゲット訪問者が中国からであり、中国ではまだ多くのIE6が浮かんでいて:hovercssを理解していないためです。

最後に、ベースアプリケーションとしてWordPressとMagentoを使用しています。

score 2 · Accepted Answer

この種の DOM 操作は、サーバーサイドスクリプトをそのまま使用PHPして行うことはできません。PHPこれは、PHP で処理したいものはすべてサーバーに送信する必要があり、その後で応答が返されることを意味します。

受け入れられたソリューションが機能する唯一の理由は、WordpressPHP関数wp_list_pages(私はそれに慣れていませんが) がいずれCSSかJavascriptを生成するか、それがあなたが望むものを達成しているためです。CSS :hoverしたがって、メソッドを使用できない、およびを使用できないと述べているため、実際には正しくありませんJavascript。

この種の DOM 操作を実現できる唯一の 2 つの方法は、またはのいずれCSSかを使用することです。そのため、オフになっJavascriptているブラウザー、または具体的には IE 6 以前のブラウザーにスタイルシートを適用することをお勧めします。Javascriptこれは、次のコードを使用して簡単に実行できます。

<noscript>
    <!-- Attach a stylesheet to permanently hide drop down menus, -->
    <!-- and instead show the content elsewhere -->
    <link rel="stylesheet" href="//example.net/_css/noscript.css" />
</noscript>

または、次のように IE 条件ステートメントを使用することもできます。

<!--[if lte IE 6]>
    <!-- Attach this stylesheet if using IE6 or earlier -->
    <link rel="stylesheet" href="//example.net/_css/ie6.css" />
<![endif]-->

上記をテストするには、Web サイトを IE6 で実行し、オフにする必要がありますJavascript。そうすれば、それが機能するかどうかがわかります。

結論として（質問を正しく理解していれば）、IE6でホバー/マウスオーバーでサブメニューを表示/非表示にする（なしJavascript）ことはできません。

ただし、質問を正しく理解していない場合はお知らせください。さらにサポートさせていただきます...

簡単なメモ: Wordpress を使用してこれを達成しようとしているようですが、これを知っていれば、Wordpress に詳しくないので質問に答えようとはしなかったでしょう。

元の回答

ここでは必要ありません。単にと/PHPを組み合わせて使用する必要があります。CSSJavascriptjQuery

サブメニューには、次のようなものを使用しますCSS。

.sub-menu {display:none;}
.menu:hover .sub-menu {display:block;}

上記はsub-menu、親要素がホバーされたとき (マウスオーバー) にアイテムを表示するようにブラウザーに指示するだけです。

アップデート

を使用したくないためJavascript、split-menu機能を適用できません。PHPはサーバー側の言語であるため、などのクライアント側のイベントをリッスンできませんmouseover。これを行う唯一の方法は、JavascriptまたはCSS!を使用することです。

IE6専用のウェブサイトを構築することについては……頑張ってください！

:hoverメソッドはnotCSSからJavascriptです！

score 1 · Accepted Answer

まず第一に、これは PHP では実行できません。HTML マークアップが固定されているため、それについては何もできません。CSS と JavaScript の 2 つの技術のサポートが必要です。

CSS : すべてのメニューのサブメニューを特定の場所に再割り当てします。
Javascript(jQuery) : メニューのクリックイベントを処理して表示します。

ここでは、CSS を使用することをお勧めします。次のコードをスタイルシートに追加します。

.sub-menu{
    position:absolute;
    left:1000px;
    top:150px;
    /* And Your Custom Styling for the Sub-Menu */
 }

この jQuery コードをマークアップの先頭に追加します。

$(document).ready(function(){
   // This hides all the Sub Menus, when the page loads.
   $(".sub-menu").hide();
});

$(".sub-menu").click(function(){
   // Hides the previously shown menu.
   $(".sub-menu").hide();
   // Show the Currently selected Menu's Sub menu.
   $(this).get(0).show();
});

jquery コードを使用する前に、必ず jquery リンクを追加してください。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>

これがあなたの問題兄弟を解決することを願っています.. :) :) :) :)

score 1 · Accepted Answer

WordPress でこれを達成しようとしているとおっしゃっていました。もしそうなら、

WordPress のナビゲーション。

header.php

wp_list_pages('depth=-1&title_li=');

これにより、ドロップダウンが削除されます (深さパラメーターを -1 に設定します)。

page.php

wp_list_pages("title_li=&child_of=$id&show_date=modified");

これにより、現在のページの子メニュー項目が表示されます。(child_of パラメータを現在のページに設定) これをレイアウトの好きな場所に配置します。

マジェントの場合:

in: app/design/frontend/default/default/template/catalog/navigation/top.phtml 置換

<?php foreach ($this->getStoreCategories() as $_category): ?>
<?php echo $this->drawItem($_category) ?>
<?php endforeach ?>

これとともに：

<?php foreach ($this->getStoreCategories() as $_category): ?>
<a href="<?php echo $this->getCategoryUrl($_category); ?>"><?php echo $this->htmlEscape($_category->getName()); ?></a>
<?php endforeach ?>

Magento のサブカテゴリにまだ取り組んでいます (Magento の初心者のビット)

編集：理解するよりもループする方が速いと思いました:-)これを試してください、ここ

php - 親メニュー項目からサブメニューを分割し、別のdivに表示するphp関数

3 に答える 3

元の回答

Related

Reference