ThemeShaper Forums

Help In Shaping WordPress Themes

Register or log in:

Username:
Password:

Remember me

ThemeShaper Forums » Thematic

1. 

   tarpontech
   Member

   Too embarrassed to say how long it took me to figure this out:

   function go_vertical( $args ) {
   	$args[ 'menu_class' ] = 'sf-menu sf-vertical';
   	return $args;
   }
   add_filter( 'thematic_nav_menu_args', 'go_vertical' );

   Using this in conjunction with Gene's:

   add_theme_support( 'menus' );
   
   function child_access_menu() {
   	$menu_sys = 'wp_nav_menu';
   	return $menu_sys;
   }
   add_filter('thematic_menu_type', 'child_access_menu');

   ...gives good vertical menu.

   You can find the necessary CSS for the superfish vertical menu's around here someplace, or directly from the superfish development site.

   Posted 1 year ago #
2. 

   paaljoachim
   Member

   Hi

   Could you broaden the info into a mini tutorial?

   I am using the menu on this page: http://myactingportfolio.com/images.html
   and am trying to figure out the best and easiest way to create it through thematic.

   I am hoping you could add some tips, direction to how to create a vertical menu. Which even a beginner like me can follow.
   I am writing down the various steps I take along my journey into creating a child theme for Thematic, and plan on sharing video and written tutorials. I am learning as I go.

   Thank you!

   Posted 1 year ago #
3. 

   helgatheviking
   Moderator

   dude i don't know how much more you need for a tutorial. you add tarpontech's code to your functions.php as you would for any php modification.

   function go_vertical( $args ) {
   	$args[ 'menu_class' ] = 'sf-menu sf-vertical';
   	return $args;
   }
   add_filter( 'thematic_nav_menu_args', 'go_vertical' );

   now your menu ul element will have the class "sf-menu sf-vertical". you don't need the other part any more as it is covered by thematic now.

   you can find a sample vertical CSS at the superfish site:
   http://users.tpg.com.au/j_birch/plugins/superfish/#sample3

   i don't feel like trying it out, but as far as i can tell this is the CSS you need to add below the existing menu CSS:

   /*** adding sf-vertical in addition to sf-menu creates a vertical menu ***/
   .sf-vertical, .sf-vertical li {
   	width:	10em;
   }
   /* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */
   .sf-vertical li:hover ul,
   .sf-vertical li.sfHover ul {
   	left:	10em; /* match ul width */
   	top:	0;
   }
   
   /*** alter arrow directions ***/
   .sf-vertical .sf-sub-indicator { background-position: -10px 0; } /* IE6 gets solid image only */
   .sf-vertical a > .sf-sub-indicator { background-position: 0 0; } /* use translucent arrow for modern browsers*/
   
   /* hover arrow direction for modern browsers*/
   .sf-vertical a:focus > .sf-sub-indicator,
   .sf-vertical a:hover > .sf-sub-indicator,
   .sf-vertical a:active > .sf-sub-indicator,
   .sf-vertical li:hover > a > .sf-sub-indicator,
   .sf-vertical li.sfHover > a > .sf-sub-indicator {
   	background-position: -10px 0; /* arrow hovers for modern browsers*/
   }

   Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.