ThemeShaper Forums » Thematic

[closed]

Change Menu to Horizontal Nav Bar - SF Nav Bar

(3 posts)
  • Started 7 years ago by whershfeld
  • Latest reply from whershfeld
  • This topic is not resolved

Tags:

  1. whershfeld
    Member

    Hi All - I'm building my second site with Thematic and love it - but despite reading through the forums, I have yet to be able to get the menu to switch out to a horizontal nav bar - that's the superfish nav bar style menu.

    Here's what I've managed to do so far:

    I've disabled the standard menu using:

    // Remove the standard Thematic menu
    function remove_menu() {
    remove_action('thematic_header','thematic_access',9);
    }
    add_action('init', 'remove_menu');

    I then used the Superfish Dropdown Menu plugin to create a menu (with Navbar styling and placed that in a custom new widgetized area... and it shows up just fine.

    The class on the UL is correct - "sf-menu sf-navbar sf-js-enabled sf-shadow" - but the second tier menu items won't show correctly.

    I'm pressed for time on this one and would happily donate to the cause of your choice (beer fund included) for a little help in getting this to work. Thanks!!!!!

    Posted 7 years ago #
  2. whershfeld
    Member

    Oh - here's the development URL -

    http://174.132.130.195/~cfs/

    This site has a test Hype animation that also lives in a custom widgetized area... neat stuff...

    Posted 7 years ago #
  3. whershfeld
    Member

    For anyone interested in doing the same goal - I finally found the solution -

    First - change your FUNCTIONS.PHP to include the following -

    // change the default arguments for wp_page_menu()
    // This adds the necessary class to the menu so that the navbar will receive the CSS...

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

    // KILL HEAD SCRIPTS
    // This removes the Thematic Drop Down JS which interferes with the navbar...
    // Filter away the default scripts loaded with Thematic - this removed the thematic drop downs and made the navbar style possible...
    function childtheme_head_scripts() {
    // Abscence makes the heart grow fonder
    }
    add_filter('thematic_head_scripts','childtheme_head_scripts');

    // END KILL

    Finally - Add the following to provide hover intent, the superfish.js and initialize the menu from JQuery -

    // Let's add in Hover Intent so the sub menus continue to display after hovering over their parents...
    function child_head_scripts() { ?>

    <script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/hoverIntent.js"></script>
    <script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/superfish.js"></script>
    <script type="text/javascript">
    jQuery(function(){
    jQuery("ul.sf-menu")
    .find('li.current_page_item,li.current_page_parent,li.current_page_ancestor')
    .addClass('current') // WP fix : Enables showing of subapage nav when on one
    .end()
    .superfish({
    pathClass : 'current',
    delay: 800, // delay on mouseout
    speed: 'fast', // faster animation speed
    autoArrows: false, // disable generation of arrow mark-up
    dropShadows: false // disable drop shadows
    });
    });
    </script>

    <?php }

    add_filter('thematic_head_scripts','child_head_scripts');
    ?>

    And now - it works... 2 days of banging my head again the wall - solved.

    Development site - subject to change -

    http://174.132.130.195/~cfs/

    Posted 7 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.