php函数从子主菜单项中拆分子菜单并将其显示在另一个div中

Can we Split Sub Menu from the parent main menu item and display it in another location in the layout. My markup is generated dynamically by my application hence have no manual control.

My Markup is generated like this:

<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>

The task:

If I click on Item 2, then the <ul class="sub-menu"> of item 2 must get displayed in <div class="split-menu"> and similarly when I click on Item 3 then the item 3 submenu must get displayed there?

enter image description here

My Questions :

  1. Can we do this using php?
  2. If not how to do this?

UPDATE:

My target is to show this on JavaScript disabled old IE6 browsers because the target visitors of my client are from china and in china still a lot of IE6s are floating around which do not understand :hover css.

Lastly I am using WordPress and Magento as the base applications.

I noticed you said that you were trying to achieve this in WordPress. If so,

Navigation in WordPress.

header.php

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

This will remove the dropdown (set the depth parameter to -1)

page.php

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

This will display child menu items for the current page. (set child_of parameter to current page) Place this wherever you want to in your layout.

In Magento:

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

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

With this:

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

Still working on sub-categories in Magento (bit of a noob in Magento)

Edit: I thought it would be quicker to loop it up rather than figure it out :-) Try this, Here

This sort of DOM manipulation cannot be done using PHP as PHP is a server side script. This means that anything that you would like PHP to process, must be sent to the server adn then the response will be sent back.

The only reason why the accepted solution works is because the Wordpress PHP function wp_list_pages (although I am not familiar with it) will be generating either CSS or Javascript that is achieving what you are wanting. Therefore, it is not actually correct as you have stated that you cannot use the CSS :hover method, and you cannot use Javascript.

The only two ways you can achieve this sort of DOM manipulation is with either CSS or Javascript, I would therefore suggest that you apply a stylesheet to browsers that have Javascript turned off, or are specifically IE 6 or earlier. This can be done easily using the following code:

<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>

or alternatively, you can use the IE conditions statement like so:

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

In order to test the above, you will need to run your website in IE6, and turn Javascript off. That way you will know whether it works or not.

To conclude (if I have understood the question correctly), to show/hide a sub menu on hover/mouseover in IE6 (without Javascript), is not possible.

However, if I have not understood the question correctly then please let me know and I will be happy to assist you further...

One quick note: it appears you are trying to achieve this using Wordpress, if had known this I would not have attempted to answer the question as I am not familiar with Wordpress.

Original Answer

There is no need for PHP here, you simply need to use a combination of CSS and Javascript/jQuery.

For your submenu, use something like this in CSS:

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

The above simply tells the browser to show the sub-menu item when the parent element is hovered over (mouseover).

UPDATE

As you do not want to use Javascript, the split-menu functionality cannot be applied. PHP is a server side language so cannot listen to client side events such as mouseover. The only way you can do this is to use Javascript or CSS!

As for building a website specifically for IE6.........good luck!

The :hover method is from CSS not Javascript!

First of all brother this CANNOT BE DONE WITH PHP. Since the HTML markup is fixed we cannot do anything about that. We need the support of two other technologies viz : CSS and javascript.

  • CSS : for reallocating the submenu of all the menus to a particular location.
  • Javascript(jQuery) : for handling the clicking events of menu and showing them up.

Here is what I sugges you to do with CSS. Add the following code to your stylesheet.

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

Add this jQuery Code in beginning of your markup.

$(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();
});

Be sure to add jquery link before using the jquery code.

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

Hope this solves your problem brother.. :) :) :) :)