Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Page Navigation with children and grandchildren WordPress

  • SOLVED

<strong>UPDATE: one of the Experts is working on the solution, so no need to post your answers anymore. Thanks for all your input.
</strong>
For a website I am working on I have been struggling with the page navigation menu.

I have purchased the Pagelines iBlogPro theme, but ripped it completely as the structure that the authors of this theme used, is completely non-functional and nothing like a standard WordPress structure.

You can find the original theme files (zipped) on http://bit.ly/aoefCG

For the website I am developing I need the same working page navigation, but with a few differences. You can see what I want as end result on this screenshot (jpg):
http://bit.ly/aA7vGn
As you can see on the original theme demo page (http://www.pagelines.com/demos/iblogpro/ipod/shuffle/classic-grandchild), what I want is similar but a bit different, mostly in terms of background images.

The subnavigation will not be necessary.

There is also a javascript in the original version, but that conflicts when I use it in the new theme, because I already have quite a few other javascripts running for use on the home page.

Looking forward to receiving the solution!

<strong>UPDATE: one of the Experts is working on the solution, so no need to post your answers anymore. Thanks for all your input.
</strong>

Answers (4)

2010-05-28

Andrzej answers:

Hard to say what would 100% as you said you have some JavaScripts already running which may cause conflicts.

Anyway, good solution for generating nav like this is Menubar plugin: http://wordpress.org/extend/plugins/menubar/
Includes menu HTML generator (you can select what items you wanna use from your Wordpress admin panel) and JavaScript engine (one of the most popular - "superfish" running on jQuery).

This can be mixed with any theme - but obviously you need to play with CSS to make the menus look as you want.


senlin comments:

Thanks for your reply. Perhaps my original post was not clear enough.

My main struggle is with the CSS, I cannot make it come out the right way.


senlin comments:

I don't need a menubar plugin as I already have the entire structure, as you can see from the provided screenshot.

2010-05-28

Oleg Butuzov answers:

well the code for top menu generation is

<ul class="dropdown">
<?php echo str_replace(array('current_page_item','current_page_ancestor','current_page_parent' ), array('current','current','current' ), wp_list_pages('title_li=&depth=3&echo=0&exclude='[email protected](',',get_option('exclude_pages')))); ?>
</ul>


sample of required functionality is you need you can copypase from this theme (
http://knightacademy.dk/ ) . css and js aviable and not obfuscated.

i think you are able to use a provided code?


senlin comments:

Thanks for your reply. Perhaps my original post was not clear enough.

My main struggle is with the CSS, I cannot make it come out the right way.

2010-05-28

Erez S answers:

Put this at the end of you CSS:
#nav ul.dropdown li:hover,#nav ul.dropdown li:hover a{
background: #2a2a2a url(images/nav-sprite-default.png) repeat-x 0 -72px;
}

Change the background as want


Erez S comments:

Or this:
#nav ul.dropdown li:hover{
background: #2a2a2a url(images/nav-sprite-default.png) repeat-x 0 -72px;
}

Those are two options since I don't sure I understand you right


senlin comments:

Unfortunately it is quite a bit more complicated than that Erez...

We have 3 times ul and 3 times li

also, we have >5 different states of the background:
- not selected
- selected
- hover
- hover when parent is selected
- hover when child is selected
- etc

If you would have had a look at the theme files, instead of only on Firebug, you would have been able to see that already...


Erez S comments:

I installed the theme and it is working perfectly,did you tryed my code?


Erez S comments:

Did you?


senlin comments:

these are just a few of the possibilities, by far not enough for it to show what I want according to the screenshot of my original posts. I don't understand how you can say that you can get 4 different states of a button with 1 line of css.

But it's ok, one of the other experts is already working on it.

Thanks for your input though.


Erez S comments:

You said you want to highlight all the parents of the page that the mouse is over him,and that what I did

2010-05-28

WordPress Security answers:

It would be helpful if you posted a link to your actual test site.

IMHO, even for $25, asking someone to recreate your theme and then solve your issue is a bit much to ask.

We find it much easier to view live css/website and solve from there.


senlin comments:

I have never asked anyone to recreate my theme, now did I?

My question is whether someone can help me with the background colors of the top page nav menu

And I am very willing to show the dev site to anyone who is really interested and capable of helping me out, I am just not posting it in public.


senlin comments:

btw who is "we"?

So far you only replied to two questions. One was about the whole ethics issue of this site and your second "expert-answer" is here on this thread.

This was the first time I have used WP Questions, for the simple reason that I have been trying to accomplish something for more than a week without the result I wanted.

I am very happy with the result that Andrzej Zglobica came up with in under 3 hours! And just because he was very assertive and contacted me personally and directly he won this question.

Although the other answers I received were probably not (entirely) correct, at least the people who gave the answers looked at the code and tried to come up with a solution.

I asked a question on WP Questions. This website is not called WP Opinions and I didn't ask for one either, not even a humble one. I asked for a solution and clearly you were unable to provide me with one!

Wish you a nice weekend though...