Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Sidebars & Widgets (http://forum.bytesforall.com/forumdisplay.php?f=14)
-   -   CSS style dropdown/flyout menus for sub-categories? (http://forum.bytesforall.com/showthread.php?t=1153)

BigG Apr 7, 2009 04:34 PM

CSS style dropdown/flyout menus for sub-categories?
 
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.

Flynn Apr 8, 2009 05:24 PM

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.


All times are GMT -6. The time now is 05:36 PM.

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