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 » Sidebars & Widgets »

CSS style dropdown/flyout menus for sub-categories?


  #1  
Old Apr 7, 2009, 05:34 PM
BigG
 
26 posts · Feb 2009
I know there is a checkbox in the WP category widget to make it a dropdown, but that's not what I'm after.

I would like the categories in my sidebar that do have sub-categories to have a dropdown that expands on rollover of the parent category, like a regular dropdown menu. I am planning a category that has a dozen or so sub categories, and the only way to effectively display those will be a dropdown/flyout menu. I guess since it is a vertical navigation area it would be more of a flyout than a dropdown.

So, is this possible to do? I figure if worst comes to worst I can hard code one with html/css using the text widget, but I'd love to stick with a dynamic one, so I don't have to manually change it when the categories change.
  #2  
Old Apr 8, 2009, 06:24 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
It partially integrated into Atahualpa but not fully finished.

NOTE: This may very well not work as expected out of the box

You'd need to add to header.php, where similar lines already exist, around line 21-22, the following JS

if (document.getElementById("rmenu3") != null) { sfHover( 'rmenu3' ); }

with rmenu3 being the ID of the UL of the new menu
This is required for IE6 LI:hover, in any drop down menu

Then install the PHP code widget http://wordpress.org/extend/plugins/php-code-widget/

Use one instance of it and into the widget put

PHP Code:
<div id="menu3">
<ul id="rmenu3" class="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>
The function bfa_hor_cats prepares the WP output (which is a plain <ul><li>..</li></ul>) to be used for this menu. It adds extra classes for each menu item that has sub menus. It takes the settings that you set at A. Theme Options -> Category Menu Bar

For the styling see style.css and header.php. The div#menu3 that I used in the example above would be just for differentiating the new menu from the other 2 existing menus (hor. pages and cat menu bar) in the CSS styles.

In style.css and header.php you'll see that in the sections "Presentation: General" and "Presentation: Expanded" several styles are doubled, with the text "Added for dark menu" (this refers to the "dark" horizontal category menu) or "Added" (also for hor. cat. menu).

Wherever you see this, you'd add a 3rd section. This doubling isn't consistent though. Sometimes I used the DIV containers (div#menu1, div#menu2) and sometimes the UL (ul.rMenu, ul#rmenu). You could do your part all with div#menu3. I need to clean up the ul.rMenu/ul#rmenu for better readability.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Vertical multi level flyout menu for categories myfacegraphics Page & Category Menu Bars 21 Dec 20, 2009 04:13 PM
Inserting a Relative URL to the style.css file? tangch00 Atahualpa 3 Wordpress theme 0 May 9, 2009 03:38 AM
Dropdown menus displace the page. zoefriedlander Page & Category Menu Bars 3 Apr 16, 2009 12:41 AM
errors in style.css aninkling Atahualpa 3 Wordpress theme 1 Feb 26, 2009 06:59 PM
Style from source to CSS stylesheet file? kartun11 Atahualpa 3 Wordpress theme 3 Feb 12, 2009 05:35 PM


All times are GMT -6. The time now is 02:23 AM.


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