ThemeShaper Forums » Thematic

[closed]

Create Horizontal Dropdown Child Menu that Holds on Subpage

(25 posts)
  • Started 4 years ago by grausc01
  • Latest reply from webmakerholly
  • This topic is not resolved
  1. I've been through all the forums and there has not been any success with creating a HORIZONTAL dropdown childpage menu using suckerfish.

    Moreover, on subpages, I need that horizontal childpage menu to stay put and not hide itself just because one isn't hovering over it anymore.

    What I'm trying to accomplish is something like this:

    http://www.cssnewbie.com/example/css-dropdown-menu/horizontal.html

    However, that person was unable to figure out how to get the dropdown menu to stay put on the active page.

    Any help on this would be greatly appreciated.

    Posted 4 years ago #
  2. I meant "superfish" not "suckerfish."

    Posted 4 years ago #
  3. Hi grausc01-

    Here's something I did for a client a while back. It should work for you.

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

    You'll need to include css to make it look the way you desire. The sf demo default styling can be found here:
    http://users.tpg.com.au/j_birch/plugins/superfish/css/superfish-navbar.css
    It looks pretty horrible applied to thematic. Here' an experimental bit I was working on to make it look better with the default thematic stylesheet.

    /*** adding the class sf-navbar in addition to sf-menu creates an all-horizontal nav-bar menu */
    
    .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;
    	}
    
    .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;
    	}

    Hope you find it useful.

    -Gene

    Posted 4 years ago #
  4. Oh I forgot to mention using this example you need to create a directory named js in your child theme directory and copy the hoverIntent and superfish scripts into it.

    Posted 4 years ago #
  5. @em hr, I am going to try this out and see how it works and will report back for everyone.

    Is there CSS or something in the FUNCTION that dictates for the submenu to be "visible" when I am actively on a child page?

    Posted 4 years ago #
  6. @em hr, this absolutely works!

    As a general note for everyone else, use the above CSS for the Superfish default and DELETE the "THEMATIC SKIN" that is in the default.css (if you're copying that over to your child theme.

    This solution works with hovering and it holds one the subpage. Perfect! Now I just have to style it to fit within the parameters of my child theme.

    Posted 4 years ago #
  7. Ok. So, there was one other element that needed to be accounted for.

    On the first level of the menu, there is a background-image that appears when you :hover. However, on the second level menu, there is no :hover background image.

    The way this function.php is setup is that it puts the sf-navbar class in with the sf-menu class. Am I just not seeing how to edit only the first level vs. the second level menu?

    Posted 4 years ago #
  8. Dont forget you dont need unique id's or classes to style an element. If you have a nested list

    <ul>
         <li>one</li>
            <ul>
                 <li> two</li>
             </ul>
         <li>one part a</li>
    </ul>

    then this would turn the word two red when hovered
    ul ul li:hover {color:red }

    Posted 4 years ago #
  9. HighWalker
    Member

    Hi,

    this snippet works also very well for me, but i have one more question. Where can i now change the depth of the menu (like the standard in wordpress: &depth=2)? I dont know but it seems to me that the default function in the header extension is filtered out with this snippet...?

    thx for this great framework!

    Posted 4 years ago #
  10. Hi,

    no .. this has nothing to do with the above mentioned snippets. Thematic by default uses wp_page_menu(). This one doesn't understand the depth parameter. You would need to remove the action thematic_access (uses prio 9) from the action hook thematic_header. Create your own action with wp_list_pages() and add this one (use prio 9) to action hook thematic_header.

    Let me know if you need more help.

    Chris

    Posted 4 years ago #
  11. HighWalker
    Member

    Hi Chris,

    thx for your fast reply.
    I have tried some replacements here and there but i have not the best php knowledge to make this happen... yes i need more help... i don't know where i must begin.

    Posted 4 years ago #
  12. HighWalker- a good place to start would be looking at the WP Codex's information about the two menu functions.

    wp_page_menu()
    wp_list_pages()

    Then look at thematic_add_menuclass() which filters wp_page_menu() and also how wp_page_menu() is used in thematic_access() all of which is located in thematic/library/extensions/header-extensions.php

    Once you've looked at those post here to let me know you're ready and I'll give you some code to make it all come together.

    -Gene

    Posted 4 years ago #
  13. HighWalker
    Member

    thx for your tip gene,

    after some searches in this forum i've found a snippet that work, but i think it is not the "state of the art" replacement :)

    i have paste this code in my child theme functions.php to override the default wp_page_menu() with wp_list_pages() (see the snippet below).

    // Filter the default drop-down options
    // http://users.tpg.com.au/j_birch/plugins/superfish/#options
    function childtheme_dropdown_options($dropdown_options) {
    return <<<EOD
    <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',
    animation: {opacity:'show',height:'show'},
    delay: 400, // delay on mouseout
    speed: 'fast', // faster animation speed
    autoArrows: true, // disable generation of arrow mark-up
    dropShadows: false // disable drop shadows
    });
    });
    </script>

    EOD;
    }
    add_filter('thematic_dropdown_options','childtheme_dropdown_options');

    ...and in the child theme header.php i've replaced the original header with this:

    <div id="header">
    <ul class="sf-menu sf-navbar">
    <?php wp_list_pages("title_li=&depth=2"); ?>

    </div><!-- #header-->

    ...its ok when you tell me now this is crappy shit :)

    Posted 4 years ago #
  14. HighWalker-

    If it works the way you wanted then great. If you wanted to do this without creating a new header.php in your child theme you could do something like this:

    function remove_access($content) {
    	remove_action('thematic_header','thematic_access',9);
    }
    add_action('init', 'remove_access');
    
    function childtheme_access() { ?>
    				<div id="access">
    					<div class="skip-link"><a href="#content" title="<?php _e('Skip navigation to the content', 'thematic'); ?>"><?php _e('Skip to content', 'thematic'); ?></a></div>
    					<div class="menu">
    						<ul class="sf-menu sf-navbar"> 
    
     						<?php wp_list_pages('depth=2&title_li=&echo=1'); ?>
    
    						</ul> <!-- .sf-menu -->
    					</div><!-- #menu -->
    				</div> <!-- #access -->
     <?php
    }
    add_action('thematic_header','childtheme_access',9);
    Posted 4 years ago #
  15. HighWalker
    Member

    your snippet is the right way. my code was working well, but i have filtered out the whole header, and with your piece the branding div and skip link and so on, is still there.

    many thx em!

    Posted 4 years ago #
  16. endure
    Member

    This was exactly what I was looking for. It works great showing the current submenu but, I also have a sub submenu or third tier that I would like to show up when current. I'm not sure where to do that. I appreciate your help, time and effort.

    I did manage to get the third tier to be horizontal by removing:

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

    Thanks in advance!

    Posted 4 years ago #
  17. endure
    Member

    I was able to set superfish to show the tertiary menu when current by setting pathLevels to 2. Thanks anyway.

    http://users.tpg.com.au/j_birch/plugins/superfish/#options

    Posted 4 years ago #
  18. tmayo
    Member

    @EM HR - thanks for posting this. Just what I needed to get going with a horizontal submenu.

    Posted 4 years ago #
  19. tradiArt
    Member

    Hello!

    This is exactly what I am looking for...

    Also seems that in this page is solved: http://www.aceconcrete.com/

    but I'm working in WP3 beta and I want to use the wp_nav_menu function, as seen here:

    http://programming.thematic4you.com/2010/03/how-to-test-wp_nav_menu-with-thematic/

    Is there any way that this can be done in WP3?

    Thank you!!

    Posted 3 years ago #
  20. Hi,

    if you mean the 'depth' thing:

    There is an undocumented parameter 'depth' in wp_nav_menu => wp-includes/nav-menu-template.php

    Chris

    Posted 3 years ago #
  21. tradiArt
    Member

    Hello!

    Seems that this bug: http://core.trac.wordpress.org/ticket/12812

    wasn't able to do what I wanted in WP3.

    Now seems more easier to achieve. Thank you for your help!

    Posted 3 years ago #
  22. can anybody send me the function.php from the thematic theme with tihs snippet already integrated? this would be verry helpful for me?

    Posted 3 years ago #
  23. how can i set in the css two diffrent font color...? one for the upper "main menu" and one for the child?

    take a look at my menu

    www.pose.ch

    Posted 3 years ago #
  24. gino
    Member

    Hi Guys

    Very helpful post

    I am trying to use this too, and the dropdown works.

    But it also drops the element next to the ancestor with children in. Any idea what might be causing it?

    Thanks!

    Gino

    Posted 3 years ago #
  25. Em hr, thanks for posting that code. Being a newbie, it took me a while to wrap my head around it. I got the horizontal menu to work beautifully, but I couldn't get the current page to "stay put" as grausc01 requested. In the default styling link you provided, I found this, which makes the current page link go bold:

    .sf-navbar li li.current > a {
    	font-weight:	bold;
    }

    I switched mine to make it highlight in grey instead of bold and voila! It works!

    .sf-navbar li li.current > a {
    	color: #666;
    }

    Thanks!

    Posted 3 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.