ThemeShaper Forums » Thematic


Going vertical with wp3 menus enabled

(3 posts)
  • Started 10 years ago by tarpontech
  • Latest reply from helgatheviking
  • This topic is not a support question
  1. 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'); 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 10 years ago #
  2. paaljoachim


    Could you broaden the info into a mini tutorial?

    I am using the menu on this page:
    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 9 years ago #
  3. 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:

    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 9 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.