Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

Vertical multi level flyout menu for categories


  #1  
Old Apr 12, 2009, 07:20 AM
myfacegraphics
 
13 posts · Apr 2009
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

Last edited by myfacegraphics; Apr 12, 2009 at 07:23 AM.
  #2  
Old Apr 14, 2009, 07:39 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
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

PHP Code:
<div id="menu2"><ul id="rmenu" class="clearfix rMenu-ver rMenu">
<?php bfa_hor_cats($bfa_ata['sorting_cat_menu_bar'], $bfa_ata['order_cat_menu_bar'], 
    
$bfa_ata['levels_cat_menu_bar'], $bfa_ata['titles_cat_menu_bar'], $bfa_ata['exclude_cat_menu_bar']); ?>
</ul></div>
  #3  
Old Apr 14, 2009, 11:40 PM
myfacegraphics
 
13 posts · Apr 2009
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?)
  #4  
Old Apr 15, 2009, 05:43 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
Remove %cats from Theme Options -> Header -> Configure Header Area if it's there

Put this into the PHP widget:
PHP Code:
<div id="menu2"><ul id="rmenu" class="clearfix rMenu-ver rMenu">
<?php wp_list_categories('title_li='); ?>
</ul></div>


At HTML/CSS Inserts -> CSS Insert, add
HTML Code:
div#menu2 ul.rMenu-ver{ 
width:auto;
border:0;
}
div#menu2 ul.rMenu-ver ul {
width:11em;  /* width of submenus must be defined */
}
div#menu2 ul.rMenu-ver li {
margin: -1px 0 0 0;
}
div#menu2 ul.rMenu-ver ul {
margin: 1px 0 0 -1px;
}


For IE6, replace in header.php
PHP Code:
<?php if (strpos($bfa_ata['configure_header'],'cats')!==FALSE) { ?>sfHover( 'rmenu' );<?php ?>
with
PHP Code:
 <?php if (strpos($bfa_ata['configure_header'],'cats')!==FALSE) { ?>sfHover( 'rmenu' );<?php ?>
sfHover( 'rmenu' );


Adjust the colors of the menu at Theme Options -> Category Menu Bar.

This will not have down/right arrows.
The non-visual settings (levels, sorting order etc.) of Theme Options -> Category Menu Bar will not apply here. To configure the output you'd have to edit the code inside the widget:

wp_list_categories('title_li=&depth=0&orderby=name&order=ASC');

See http://codex.wordpress.org/Template_...ist_categories for more options
  #5  
Old Apr 15, 2009, 03:35 PM
myfacegraphics
 
13 posts · Apr 2009
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
  #6  
Old Apr 15, 2009, 05:27 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
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.
  #7  
Old Apr 15, 2009, 11:21 PM
myfacegraphics
 
13 posts · Apr 2009
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:
Code:
<div id="menu2"><ul id="rmenu" class="clearfix rMenu-ver rMenu">
<?php wp_list_categories('title_li='); ?>
</ul>
</div>
div#menu2 ul.rMenu-ver{
width:auto;
border:0;
margin-top: 7px;
}
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.
  #8  
Old Apr 16, 2009, 04:16 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
Please check post #4 again. You're mixing step 1 (PHP widget) and step 2 (CSS Insert)
  #9  
Old Apr 18, 2009, 05:44 AM
myfacegraphics
 
13 posts · Apr 2009
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
  #10  
Old Jul 15, 2009, 09:36 AM
zealmurapa
 
1 posts · Jul 2009
have you managed to fix this guys? I am in need of that solution too-fly-out menu for categories
  #11  
Old Jul 31, 2009, 03:26 PM
lhanft
 
88 posts · Jul 2009
Cleveland, OH
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?
  #12  
Old Sep 13, 2009, 06:25 AM
buckmajor's Avatar
buckmajor
 
1 posts · Sep 2009
Brisbane
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.
  #13  
Old Sep 21, 2009, 08:32 PM
nycgadgetgirl's Avatar
nycgadgetgirl
 
24 posts · Sep 2009
NYC
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:
Code:
<div id="menu2"><ul id="rmenu" class="clearfix rMenu-vRight rMenu">
<?php wp_list_categories('title_li=&exclude=7'); ?>
</ul></div>
and the following in the CSS:
Code:
div#menu2 ul.rMenu-vRight{ 
float: right;
width:auto;
border:0;
margin-top: 6px; margin-bottom:20px;
}
div#menu2 ul.rMenu-vRight ul {
width:12em;  /* width of submenus must be defined */
}
div#menu2 ul.rMenu-vRight li {
margin: -1px 0 0 0;
}
div#menu2 ul.rMenu-vRight ul {
margin: 1px 0 0 6px;
}
clearly I'm missing something. Thoughts?
  #14  
Old Sep 22, 2009, 06:57 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
Post a URL please, that'll make it much easier
  #15  
Old Sep 22, 2009, 07:01 PM
nycgadgetgirl's Avatar
nycgadgetgirl
 
24 posts · Sep 2009
NYC
Sorry...

http://jennaandsnickers.com/

Look in the right column under "blog topics"

Thanks!
  #16  
Old Sep 23, 2009, 06:57 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
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
  #17  
Old Sep 23, 2009, 01:28 PM
nycgadgetgirl's Avatar
nycgadgetgirl
 
24 posts · Sep 2009
NYC
That worked perfectly. Thanks Flynn!
  #18  
Old Oct 31, 2009, 07:12 PM
Topcat1
 
11 posts · Oct 2009
Auckland, New Zealand
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
  #19  
Old Nov 1, 2009, 05:36 PM
Topcat1
 
11 posts · Oct 2009
Auckland, New Zealand
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
  #20  
Old Nov 1, 2009, 07:12 PM
nycgadgetgirl's Avatar
nycgadgetgirl
 
24 posts · Sep 2009
NYC
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
  #21  
Old Nov 2, 2009, 04:16 PM
Topcat1
 
11 posts · Oct 2009
Auckland, New Zealand
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.
  #22  
Old Dec 20, 2009, 03:13 PM
Catharina
 
1 posts · Dec 2009
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 =^..^=

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
disable links in category menu for parent categories (only childless categories link) qcook2000 Page & Category Menu Bars 0 May 15, 2009 09:09 PM
Change multi-level bullet symbols - text sizes Andante Atahualpa 3 Wordpress theme 3 Apr 21, 2009 10:58 PM
CSS style dropdown/flyout menus for sub-categories? BigG Sidebars & Widgets 1 Apr 8, 2009 05:24 PM
Multi-level Navigation Plugin for WordPress -- Conflict/Success? strangelove Page & Category Menu Bars 0 Mar 12, 2009 05:19 PM
Where is the menu bar in the header file? Help with Multi-level Navigation Plugin crogers32 Plugins & Atahualpa 11 Feb 17, 2009 10:51 AM


All times are GMT -6. The time now is 07:53 PM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.