php function to split a sub menu from it's parent main menu item and display it in another div

Question

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 :

Can we do this using php?
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.

Why do you want `PHP` for this, surely it is just basic `CSS`? — Ben Carey, Jan 14 '13 at 12:03
This sounds like a task that would be better suited to JavaScript and CSS manipulation. — shannonman, Jan 14 '13 at 12:04
@Ben @shannonman Yes I was thinking so. However as my target is to show this on JavaScript disabled browsers 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 understanf `:hover` css.. — Vikram Rao, Jan 14 '13 at 12:11
@Vikram :hover is `CSS` not `javascript` and is available in IE6! — Ben Carey, Jan 14 '13 at 12:16
@VikramRao Hi Vikram, sorry for the delay in getting back to you. I have edited my questions, so you should be able to remove the votes now :-). In return, I have upvoted this question. — Ben Carey, Jan 16 '13 at 09:10

Ben Carey · Answer 1 · 2013-01-15T12:20:23.313

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!

I know `:hover` is CSS and IE understands it only on `` Tags but not on `
@VikramRao Regardless of this, you should not have to cater for a browser that was released almost 12 years ago!! Simply display a message to anyone using an old version of the browser stating that they must upgrade in order to view the site!. You would be mad to even consider developing a site for IE6! — Ben Carey, Jan 14 '13 at 13:00
Well the point is.... CLIENT DICTATES. Also as a developer it is my duty to deliver as per client's requirement. Client cannot Ignore 6.4% of his visitors because they are using an old browser. A lot of IE6s are in use not because that individual does not want to upgrade the browser. But because he/she cannot do so. It is because they are on a network terminal which is controlled by a network-owner / company who doesn't care or bother to upgrade the network for reasons only known to them. For example 3rd grade Cyber Cafes, Call-Centers, BPOs. However that individual may be a potential buyer. — Vikram Rao, Jan 14 '13 at 13:28
Yes It makes more sense to do it from within WordPress Template Tags as `wp_list_pages("title_li=&child_of=$id&show_date=modified");` will get me the raw data of sub-menus and I can place that command in the sidebar so that every time I am on a particular page all the sub-menu items of related to that parent page will get displayed in the desired area. WordPress does not generate any CSS or JavaScript, this functions just returns the required data which I can place anywhere in the template and style it with CSS as I wish. Same thing with Magento too. — Vikram Rao, Jan 15 '13 at 12:36
@VikramRao I think I may have completely misunderstood what it is you are trying to do, and therefore my answer is probably not relevant. I was under the impression you were trying to copy something from one `div` to another, and make it show on mouseover/hover. If this is what you are trying to achieve, then I stand by what I said, this cannot be done without CSS `:hover` or javascript and the only reason it is now working is because WP is generating some. ***continued*** — Ben Carey, Jan 16 '13 at 09:15
@VikramRao However, if I have misunderstood, I apologise, and this answer is not relevant, although the information in it you may find helpful in the future. One last thing, although you probably have done this, make sure you test the site in IE6 to ensure it works for your clientel. I hope this helps — Ben Carey, Jan 16 '13 at 09:16

score 1 · Answer 2 · answered Jan 14 '13 at 12:27

1

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.. :) :) :) :)

answered Jan 14 '13 at 12:27

JayKandari

1,228
4
16
33

1

Thanks for the help brother. 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. – Vikram Rao Jan 14 '13 at 12:35
Yaar the idea it to get this even if JavaScript is disabled. – Vikram Rao Jan 14 '13 at 12:42
1

you have 2 options then, 1. to alter the function which outputs your markup and 2nd : you need to change the markup string before output – JayKandari Jan 14 '13 at 12:59
@JayKandari Everything in your answer can be done with `CSS`, why advise `jQuery` here?? The `jQuery` is only necessary for the `split-menu`. But as @VikramRao does not want to use the `javascript` I guess this point is pretty pointless! – Ben Carey Jan 14 '13 at 13:02
that's what I've said it to vikram, read my comment above your commet. – JayKandari Jan 14 '13 at 13:22

score 1 · Accepted Answer · edited May 23 '17 at 10:24

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

Yes now that is very helpful. By the way any idea about Magento? — Vikram Rao, Jan 14 '13 at 12:54
Shame my previous answer was deleted my moderators. I will look into it now. — Ian Brindley, Jan 14 '13 at 12:55

php function to split a sub menu from it's parent main menu item and display it in another div

3 Answers3

Original Answer