Vertical multi level flyout menu for categories
 

Hi Flynn, as per a previous post: http://forum.bytesforall.com/showthread.php?t=1153

Ive just sent you a donation and would like you to do some work for me if possible?

I want to make my site www.myfacegraphics.com so that the MAIN categories show in the left hand menu, but SUB-categories show up as a flyout to the right.

Have bene looking at and trying to get working the multi-level navigation plugin, but to be honest just dont have the time or pateince with this :-) just need to get it so all sub-categories fly out the the right of main categories.

Thanks
Shaun

Try this and let's go from there. It will probably require some additional CSS. And I am not sure if the theme options and functions are available like this from inside a widget, perhaps not

Install the PHP code widget http://wordpress.org/extend/plugins/php-code-widget/ and put one instance of it into a sidebar

Into the widget put this

ok so at www.myfacegraphics.com Ive got it in the left hand menu.

I installed it into the left sidebar.

The instructions says to enclose it with php quotes.

tried it without first, just your code and there was nothing on the page apart from all the normal stuff.

So then added the <?php and ?> tags at start and end and got a parse error:


Parse error: syntax error, unexpected '<' in /home/wwwmyfa/public_html/wp-content/plugins/php-code-widget/execphp.php(37) : eval()'d code on line 2


(anything to do with echo statements?)

Ok that better and working, just need some help with styling if you wouldnt mind, I've tried looking at that list and tried to set the border behind each menu item to black at: Theme Options -> Category Menu Bar but it seems to not have helped...

How can I get the popout links to be sort of in a box, or at least have some background to them, colored or semi-transparent as the subcategories actually extend into the main content of the site - not useful as my subcategories could even go one level lower.

PLUS I need to get it to have a tile of "categories" at the top, like it did before.


Thanks Flynn.

shaun

To get a title put it into the title field in the PHP widget. The title will be very close to the menu. To add some space add margin-top to the CSS I posted above

div#menu2 ul.rMenu-ver{
width:auto;
border:0;
margin-top: 7px;
}

Appears that you have replaced all the Atahualpa menu code in header.php with a suckerfish menu code. Put the orginal code back if you want to style the menu through the theme options.


P.S.: I changed your thread title. Please use meaningful titles for threads, so it can be found and used by others.

This going to sound silly, but only because I'm not a programmer.

I had actually previously un-installed the suckerfish/pixopoint drop down menu code... so it was de-activated.

So I'm not sure how suckerfish can still be in there.
As a last resport I uploaded the original atahualpa header.php from my pc to my server again (overwriting the header.php inside the atahualpa theme folder)

I also did the same for style.css

Still now joy and I've no idea why.


As for the other code in the php widget I first tried to add the margin text at the bottom of my php widegt no joy... so then I tried to past the whole fo your text shown in the widget.

Here is the contents of my php widget:
You can see how it looks at www.myfacegraphics.com on the left hand side.

I was trying to edit the border around the menu items and nothing has happened... weird... for you it's probably easy but just a tad beyond me.

Please check post #4 again. You're mixing step 1 (PHP widget) and step 2 (CSS Insert)

I'm still struggling, and no matter what I change the details to in category menu bar, ther styling of the menu will not update at all.

Trying to put a box around the menu items, and background color - especially for the flyout sub menus, they are simply mingling with the main text on the site

shaun

have you managed to fix this guys? I am in need of that solution too-fly-out menu for categories

I really want to do this as well. I followed the directions Flynn gave myfacegraphics, and I have the basic menu in place, but I can't figure out where/how to style it.

It's up right now, but I'll have to take it down again before Monday if I can't figure out how to style it.
http://theagnonschool.org

Thanks, Lila

PS Does all the code in css.php that refers to rmenu need to repeated for rmenu2, or does that code apply globally to all instances of rmenu?

Hi there

I am also interested in adding a vertical drop-down menu to the category navigation on the right.
I will give it a go first, then post back if unsuccessful.

I found this thread while looking for a way to implement a fly-out vertical menu in the right sidebar. I followed the instructions and then edited to account for being in the right instead of the left and I'm ALMOST there, but it's not quite right. The second level categories are popping out, but not at the right level. They are popping out a level below, if that makes sense.

I have the following in the widget:
and the following in the CSS:
clearly I'm missing something. Thoughts?

Post a URL please, that'll make it much easier

Sorry...

http://jennaandsnickers.com/

Look in the right column under "blog topics"

Thanks!

See if this works as CSS Insert

ul.rMenu-vRight ul {
top:0 !important;
}

To further adjust you could replace 0 with -Xpx or Xpx

That worked perfectly. Thanks Flynn! :)

I'd like to get my categories to work and look the same as in nycgadgetgirl's blog but she must have made many other changes not mentioned in this post.

So can you provide the extra answers to get to that point?

I have got the basic concept working but don't like the big gaps and long blue backgrounds to the subcategories. My categories will probably be 3 deep and increase substantially as I add more posts.
I have done colours and transparent outlines to make it look reasonably okay until I can get it the same as the nycgadgetgirl blog category look.

http://www.fastyacht.net
See the New Catalogue on left side.

Thanks

Hi Jenna,

Thanks for your quick reply to my email, my CSS used for the categories is as follows:

div#menu2 ul.rMenu-ver{
width:auto;
border:0;
margin-top: 5px;
}
div#menu2 ul.rMenu-ver ul {
width:12em; /* width of submenus must be defined */
}
div#menu2 ul.rMenu-ver li {
margin: -1px 0 0 0;
border:0;
margin-top: 8px;
}
div#menu2 ul.rMenu-ver ul {
margin: 1px 0 0 -1px;
margin-top: -5px;
}

I have used the margin-top: lines to bring the category labels up in line with the parent labels in the sidebar. This is a different solution to the last one you used in the post as I found that didn't work.
I thought it would be a padding thing but am unsure where to put it.

Cheers
Colin

Colin,

Your CSS looks fine to me, except your two margin-top lines conflict with the margin lines already there. If you're going to add top margin, just change what's already there. The line from Flynn should have worked though... did you change rMenu-vRight to rMenu-ver before you inserted it?

The only other changes I made, in addition to the positioning CSS posted, were strictly cosmetic and I made those in the Atahualpa theme settings (in the Category Menu Bar settings).

Jenna

No I didn't change the CSS as suggested.

I have spent a lot of time fiddling with the numbers in the margin settings and am unable to duplicate what Jenna has achieved so perhaps there is something that is in your setup that is changing things but is unknown to you, like another plugin or something.
I even copied your plugin & CSS verbatim to place my category in the right sidebar, but it looked very out of sorts.

Another problem I have just found is that the positioning all changes when viewed in IE compared to Firefox, this includes Jennas site. I haven't looked at via other browsers.
This also means that when trying to move to the next sub-category from the first sub-category, that the gap between does not allow you to hover those next subs and so drops them. This doesn't happen in Firefox though and I am referring to my FastYacht site with this problem.

Hopefully Flynn may have some suggestions, but I may have to look for another method to achieve this type of category layout.

Thanks so much for this Flynn...this is awesome!

I will be working to get this to work as pages since I am working on getting Wordpress to work as a CMS.

Cat =^..^=