ThemeShaper Forums » Thematic

[closed]

Create Horizontal Dropdown Child Menu that Holds on Subpage

(1 post)
  • Started 8 years ago by gino
  • This topic is not resolved
  1. gino
    Member

    Hi Themesters

    I need to create an Horizontal Dropdown Child Menu.

    There is a great post here about how to achieve this and I have been following it:

    http://forums.themeshaper.com/topic/create-horizontal-dropdown-child-menu-that-holds-on-subpage#post-7432

    It works. But only partially for me.

    When the submenus are activated by hovering or clicking the item with children, then the menu items next to the 'activating' one clear to the left and drop down to the next line.

    Any idea on what I am doing wrong?

    this is in my function.php

    // Horizontal dropdown
    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: 400, // 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');

    function child_add_menuclass($ulclass) {
    return preg_replace('/

      /', '<ul class="sf-menu sf-navbar">', $ulclass, 1);
      } // end thematic_add_menuclass
      add_filter('wp_page_menu','child_add_menuclass');

      and this is my css

      /*** adding the class sf-navbar in addition to sf-menu creates an all-horizontal nav-bar menu */

      ul#menu-signum {background:url(../../../uploads/img/bg/top-menu-bg.gif) no-repeat top left; width:900px; height:30px; padding:10px 0 0 10px; margin-left:5px;}

      ul#menu-signum li {display:inline; margin-right:48px;}
      ul#menu-signum ul ul{margin:0 0 0 200px; width:50px;}
      ul#menu-signum li li{display:inline; margin-right:5px;}
      li#menu-item-60 {margin-left:350px;}
      ul#menu-signum a {text-decoration:none; font-size:14px; color:#336699; font-weight:600; letter-spacing:-1px;}
      ul#menu-signum li li a{font-size:12px;}

      .sf-navbar {

      height: 2.5em;
      margin-bottom: 2.5em;
      position: relative;
      }

      .sf-navbar li , .sf-navbar li ul li a, .sf-navbar li ul {
      border: none;
      background: none;
      }

      .sf-navbar li {
      position: static;
      display:inline;
      }

      .sf-navbar a {
      padding: 9px 20px;
      }

      .sf-navbar li ul {
      width: 44em; /*IE6 soils itself without this*/
      margin-top: 1px;
      }

      .sf-navbar li li {
      position: relative;
      }

      .sf-navbar li li ul {
      width: 100%;
      }

      .sf-navbar li li li {
      width: 100%;
      }

      .sf-navbar ul li {
      width: auto;
      float: left;
      }

      .sf-menu li:hover ul,
      .sf-menu li.sfHover ul ,
      .sf-navbar .current ul,
      .sf-navbar ul li:hover ul,
      .sf-navbar ul li.sfHover ul,
      .sf-navbar .current_page_item ul {
      left: 0;
      top: 3.2em; /* match top ul list item height */
      }

      .sf-navbar .current ul ul {
      top: -999em;
      }

      .sf-navbar li:hover,
      .sf-navbar li.sfHover,
      .sf-navbar a:focus,
      .sf-navbar a:hover,
      .sf-navbar a:active,
      .sf-navbar .current_page_item a {
      background: #fff;
      }

      /* thematic experiment - for default look - sprfsh enabled borders */

      .sfHover a,
      .sf-menu .current_page_item a,
      .sf-menu .current_page_ancestor a,
      .sf-menu .current_page_parent a:hover,
      .sf-menu a:hover, .current_page_item.sf-breadcrumb ul li a,
      .current_page_item.sf-breadcrumb.sfHover a,
      .current_page_parent.sf-breadcrumb.sfHover a,
      .current_page_ancestor.sf-breadcrumb.sfHover a
      {
      border-bottom: solid 1px #FFFFFF;
      }

      /* thematic experiment - for default look - sf-tab border color */
      .current_page_item.sf-breadcrumb a,
      .current_page_parent.sf-breadcrumb a,

      .current_page_ancestor.sf-breadcrumb a
      {
      /*border-bottom: solid 1px #cccccc;*/
      }

      .sf-menu a:hover {
      color:red;
      }

      As the original post is pretty old, I thought I submit a new one.

      Any help is massively appreciated.

      Thanks!

      Gino

    Posted 8 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.