ThemeShaper Forums » Thematic

[sticky] [closed]

Thematic Menus Demystified

(134 posts)
  • Started 4 years ago by helgatheviking
  • Latest reply from faeree
  • This topic is not a support question
  1. ricemaster
    Member

    Seems like I did have a HOME page which was not necessary !
    All seems to work well now. Thanks !!

    Micha

    Posted 3 years ago #
  2. Hi Helga,

    I used your "styling the beast" menu and I am managing to get most of what I want accomplished using it.

    However I have hit a road block. I'd like to style the menu so that when a top level menu item with a sub-item beneath it is hovered over it takes on a new look (in my case the border radius changes to not have a rounded bottom left or right corner).

    I have this semi-working, but it does it to all top level menu items on hover, not just the ones that have sub items.

    To show what I mean by this confusing post, please see http://24hrknight.com! Thanks for your help. :)

    ...You can see on the left menu item "WordPress" it changes... On the far right item "Personal" is the effect I'd like to achieve for those items with sub-menu items, so that it looks more seamless.

    Posted 2 years ago #
  3. instead of styling li:hover, apply your border styling to li.sfHover, sfHover is the class that appears on the parent li when it's sub-menu is visible

    Posted 2 years ago #
  4. Hi Helga,

    Thank you for the tip. I can't seem to get the new border radius to work.

    Here was my old code:

    .sf-menu li:hover, .sf-menu li.sfHover,
    .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
    /* background gradient */
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#E8E8E8), to(#BDBDBD)); background: -webkit-linear-gradient(#E8E8E8, #BDBDBD); background: -moz-linear-gradient(#E8E8E8, #BDBDBD); background: -ms-linear-gradient(#E8E8E8, #BDBDBD); background: -o-linear-gradient(#E8E8E8, #BDBDBD); background: linear-gradient(#E8E8E8, #BDBDBD); -pie-background: linear-gradient(#E8E8E8, #BDBDBD);
    /* hover border radius */
    border-top-left-radius: 14px;
    -moz-border-radius-topleft: 14px;
    -webkit-border-radius-topleft: 14px;
    border-top-right-radius: 14px;
    -moz-border-radius-topright: 14px;
    -webkit-border-radius-topright: 14px;
    behavior: url(/PIE.htc);
    outline: 0;
    border-bottom-color:#ccc;
    }

    Which I just changed to this with no apparent effect:


    .sf-menu li:hover, .sf-menu a:focus,
    .sf-menu a:hover, .sf-menu a:active {
    /* background gradient */
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#E8E8E8), to(#BDBDBD)); background: -webkit-linear-gradient(#E8E8E8, #BDBDBD); background: -moz-linear-gradient(#E8E8E8, #BDBDBD); background: -ms-linear-gradient(#E8E8E8, #BDBDBD); background: -o-linear-gradient(#E8E8E8, #BDBDBD); background: linear-gradient(#E8E8E8, #BDBDBD); -pie-background: linear-gradient(#E8E8E8, #BDBDBD);
    /* border radius */
    border-radius: 14px;
    -moz-border-radius: 14px;
    -webkit-border-radius: 14px;
    behavior: url(/PIE.htc);
    outline: 0;
    border-bottom-color:#ccc;
    }

    .sf-menu li.sfHover {
    /* hover border radius */
    border-top-left-radius: 14px;
    -moz-border-radius-topleft: 14px;
    -webkit-border-radius-topleft: 14px;
    border-top-right-radius: 14px;
    -moz-border-radius-topright: 14px;
    -webkit-border-radius-topright: 14px;
    behavior: url(/PIE.htc);
    }

    Thanks :)

    Drew

    Posted 2 years ago #
  5. Helgatheviking, thanks for the tip on the thematic_abovecontainer, I must have overlooked it in the thematic documentation. Anyways, also some great tips on creating you own custom menu using hooks. Just out of curiosity, what IDE do you use for you development environment. I would love to be able to set one up with Thematic and wordpress to have code intelligence similar to what you might find in an APS.NET environment using VS 2008 for example. Yeah I know I know, however I have to work for a living:) I use PHP for recreational use only:)

    Posted 2 years ago #
  6. @drewdavid - you appear to have removed superfish from your site. superfish is what adds the sfHover class. w/o it that approach will never work. however, you could use the specific LI classes generated by WP to target different elements w/ different border radiuses on hover

    @sotabound04 - i don't understand what you are asking. i am totally unfamiliar w/ ASP.NET and code intelligence. i do all my own coding development on a local installation of WP using XAMPP.

    http://webdesignerwall.com/tutorials/installing-wordpress-locally
    http://www.apachefriends.org/en/xampp.html

    Posted 2 years ago #
  7. Hi Helga,

    You have been providing awesome solutions to thematic forum.I really appreciate it.

    The topic Thematic Menus Demystified has explained how to add categories to menus. I would like to suggest that instead of all the explanation why don't you release or ask someone to make a new version of thematic which has this issue sorted. This might be helpful and time saving for all the members.

    Posted 2 years ago #
  8. @nick - you're welcome. categories can be added from the WP3.0 custom menu maker or by targeting the wp_nav_menu_items() filter. why should it be built in?

    Posted 2 years ago #
  9. Hi Helga,

    Have I removed superfish? I have done the following as per Scott's directions (see http://forums.themeshaper.com/topic/time-delay-on-dropdown-menu)

    I was attempting just to disable the delay on the drop down effect...

    Drew

    EDIT: I took out the code for now to disable the delay. I am very close but it's not quite working! I can see the desired result but only when I move my mouse to the left back over a top level link, otherwise it almost seems like .sf-menu li:hover is beating out .sf-menu li.sfHover for control...

    Posted 2 years ago #
  10. @drew - i asked b/c the scripts weren't in your source. .sf-menu li:hover could be beating out .sf-menu li.sfHover . do you need li:hover ? make sure that li.sfHover comes after

    Posted 2 years ago #
  11. snw
    Member

    Hi @helga, @ian et al --

    Thank you so much for this extensive post. I am very new to php. I tried to use the forum to find the code I need but wasn't able to make it work. Basically, I just want the menus to be equal with the page title, like this theme:
    http://fthrwght.com/autofocus/prodemo/

    Is there a way to do that easily? I tried this code, which put the menu above the header, but I guess I want it inside the header:

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

    // Moving the thematic menu above the header
    add_action('thematic_aboveheader','thematic_access');

    Posted 2 years ago #
  12. sowingseeds
    Member

    You can place it inside the header with a change to the last line:
    add_action('thematic_header',thematic_access',6);
    This will place it below the sitedescription. Then you could use css to position the access division and the menu.
    Maybe something as simple as (changing the numbers to suit):
    #access { float:right; width: 600px; margin-top: -50px;}
    .menu { width: 600px; }

    Posted 2 years ago #
  13. snw
    Member

    Thank you so much, @sowingseeds -- this worked perfectly

    Posted 2 years ago #
  14. snw
    Member

    One other question about the menu -- I want to get rid of drop downs. But since I removed the standard thematic menu in order to move it, this code isn't working to do that:

    // Filter away the default scripts loaded with Thematic
    function childtheme_head_scripts() {
    // Abscence makes the heart grow fonder
    }
    add_filter('thematic_head_scripts','childtheme_head_scripts');

    Is it still possible to use a php function to kill drop downs, even if I am also using this function to format the menu position:

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

    // Moving the thematic menu above the header
    add_action('thematic_aboveheader','thematic_access');

    Posted 2 years ago #
  15. does that not remove the drop down scripts?? i believe they will still drop down w/ CSS. to not allow any more than one level you need to filter the wp_nav_menu args.

    function kia_kill_superfish(){
      return FALSE;
    }
    add_filter('thematic_use_superfish','kia_kill_superfish');
    Posted 2 years ago #
  16. snw
    Member

    @ Helga -- thanks so much for the quick reply! Adding the script kia_kill_superfish function above broke the menu -- was there something else to add with it? With the two functions I listed above, my site looks/works like this:
    www.nathankensinger.com

    As you can see, it still has drop downs. The only page that currently has a child page is "Installations" -- it has a child page called "The Forgotten City", which you can see right now. Do I need to add something else -- to the CSS? -- to kill the drop downs? I am copying and pasting the functions I added to my function page, in case I've made some coding mistake:

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

    // Moving the thematic menu above the header
    add_action('thematic_header','thematic_access',6);

    //killing drop downs

    // Filter away the default scripts loaded with Thematic
    function childtheme_head_scripts() {
    // Abscence makes the heart grow fonder
    }
    add_filter('thematic_head_scripts','childtheme_head_scripts');

    Thanks all for your patience! I'm new to child themes and php

    Posted 2 years ago #
  17. what does 'broke the menu' mean? unfortunately that doesn't help me diagnose the problem.

    the "killing dropdowns" bit just means it won't use the superfish script.. it doesn't actually prevent the dropdowns. why not just create a custom menu (appearance>menus) that is only 1 level deep? you can filter in the requirement that it only be 1 menu, but most people don't change the menu that often... so you could just manually ensure the menu doesn't have any sub-items.

    Posted 2 years ago #
  18. snw
    Member

    That seems like a good solution -- and then I assume I would drag the custom menu widget to the page top area. I'm not sure how that would affect my positioning, but it seems like I could change it with CSS.

    What I meant by "broke the menu" (sorry that was ambiguous) is that when I added this script:

    function kia_kill_superfish(){
    return FALSE;
    }
    add_filter('thematic_use_superfish','kia_kill_superfish');

    ...it broke the menu formatting. Adding this to the two functions I have above (which mysteriously don't kill the drop downs) made the menu completely unformatted, a vertical list using the browser default formatting.

    But it seems like your solution might work better anyhow, so I will try it!

    Posted 2 years ago #
  19. i wonder if that is b/c w/o superfish the menu doesn't get the ul class="sf-menu".... upon which all the styling is based.

    you don't need a widget for the menu, just use wp_nav_menu() and add it to an existing action hook.

    Posted 2 years ago #
  20. snw
    Member

    I'm sure it's something I'm doing wrong, but I haven't been able to get this to work.
    Here is all the functions in my child theme functions page:

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

    // Moving the thematic menu above the header
    add_action('thematic_header', 'thematic_access',6);

    //killing drop downs

    // Filter away the default scripts loaded with Thematic
    function childtheme_head_scripts() {
    // Abscence makes the heart grow fonder
    }
    add_filter('thematic_head_scripts','childtheme_head_scripts');

    ?>

    I created a custom menu called wp_nav_menu

    then I added it to an existing action hook:

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

    // Moving the thematic menu above the header
    add_action('wp_nav_menu','thematic_header', 'thematic_access',6);

    //killing drop downs

    // Filter away the default scripts loaded with Thematic
    function childtheme_head_scripts() {
    // Abscence makes the heart grow fonder
    }
    add_filter('thematic_head_scripts','childtheme_head_scripts');

    ?>

    ...and the nav completely disappeared. I tried a couple other variations, which all caused errors or disappearance. Am I doing it totally wrong? Thanks!

    Posted 2 years ago #
  21. aengs115
    Member

    I will try to write something here instead of getting a new thread up and running.

    This thread has helped me big time getting my head around the thematic menu and I have essentially styled it with css as in the manner I like to have it. However there is still one thing I like to do.

    I want to do something like the menu on this homepage http://www.telia.se. You have likely seen such menus all over the Internet. It is a simple menu with plain links which when you hover them gets a rounded nice button behind them. While I don't have any problems to make a simple on hover background with a single background image I don't quite know how to make this work whit menu items of different size. I need the background image to be able to be scaled in width.

    I dove into google and found out that there is this commonly used "sliding doors" to use. But how do I implement that on the Thematic menu? As I am creating a child theme to thematic I don't even find the code for the menu, it simply loaded in from the parent via som hook or whatever you pro's call it ;-). I just tweak it with css but in order to get the sliding doors tecnuiqe to work it seems like I need to ad some code to the actual menu itself. Now to make things trickier I really like the wordpress 3.0 menu support and I am using that in my child theme so how do I get the "sliding door" working whit that?

    Any help?

    BTW, sry if there is a lot of bad spelling. English is not my first language.

    Posted 2 years ago #
  22. thematic does not have the markup to support 'sliding doors'. you could write a new menu walker (shoot me first)... or more likely you could wrap each menu item w/ the extra span using jquery. i'd go that route first. unfortunately both are sort of beyond the scope of this forum

    all the functions are in the thematic /library/extensions folder. everything in there is look but don't touch.

    but the menu is generated by the WP function wp_nav_menu()... hence my mention of the custom walker.

    Posted 2 years ago #
  23. aengs115
    Member

    Ok, thanks for the reply. At least it made it clear to me that "dont touch the menu". ;-)

    Knowing that I think the esiest way for me to fix what Im looking for is to register my own nav menus, hardcode them so that I can put my spans there. This would obviosly mean that I would disable the thematic menu. A shame really as I loved it ;-).

    Im not a great programmer so diving into jquery making the menu items contained in spans would be above my leauge. Again thanks for the reply.

    Posted 2 years ago #
  24. middlesister
    Member

    It's actually not so difficult as that. You can add your spans as arguments to the wp_nav_menu. And Thematic is nicely providing you with a filter for that:

    function my_sliding_door( $args ) {
    	$args['before'] = 'Insert before the link text';
    	$args['after'] = 'Insert after the link text';
    	$args['link_before'] = 'Insert before the link';
    	$args['link_after'] = 'Insert after the link';
    
    	return $args;
    }
    add_filter('thematic_nav_menu_args','my_sliding_door');

    Put your spans where you want and remove the $args lines you don't need. Although you might get away with using CSS3 round corners and not using the sliding door technique at all. Depends on the look you are after.

    Posted 2 years ago #
  25. Hi Helga

    Would you mind explaining how you implement that walker code you gave us?
    How to use that to replace the normal menu and still retain the superfish classes?

    When I paste the code into my function file I result in the <head> content being moved in the <body> content. (so I think a closing tag is missing somewhere) And then I have two menus.

    Thank you for sharing all your knowledge. Sorry if the question is too basic.

    John.

    Posted 2 years ago #
  26. Sorry, I figured out how to implement it using "add_action" hook.

    And added the superfish classes like this:

    wp_nav_menu( array( 'walker' => new Custom_Walker, 'menu_class' => 'sf-menu' ) );

    Posted 2 years ago #
  27. aengs115
    Member

    Middlesister, thanks for your reply. Could you bring it down more to a basic level for me? I pretty much know how to handle css and html but when I start messing with php I do it by the trial and error method without knowing much more than how an if statement works. ;-)

    So my first question is simply where is that code going to be placed? In my childthemes funtions? In the place where I want my menu to show up?

    I think I will need to do some reading up on thematic and how to use hooks.

    Posted 2 years ago #
  28. middlesister
    Member

    Sure no problem. The code goes in your child theme's functions.php. You need to decide where you want your span tags, inside the a element or outside. Using 'before' and 'after' will result in

    <a><span>link text</span></a>

    and using 'link_before' and 'link_after' will result in

    <span><a>link text</a></span>

    So, assuming you want the former your code will look like:

    function my_sliding_door( $args ) {
    	$args['before'] = '<span>';
    	$args['after'] = '</span>';
    
    	return $args;
    }
    add_filter('thematic_nav_menu_args','my_sliding_door');

    Then you can target those elements in your css file. Of course you can add classes to your spans as well if you like.

    And yes filters and hooks are a key concept. Once you can get your head around them, a lot of things will fall into place.

    Posted 2 years ago #
  29. don't be put off if it takes a while to learn/understand hooks and filters. it is like learning a new language, it isn't going to happen overnight and you're going to go through a lot of trial and error.

    nice solve middlesister.... no jquery required! forgot about that argument

    Posted 2 years ago #
  30. snw
    Member

    @helga -- i figured it out! thanks so much for all the help. I needed to update to 9.8 so it would be easy.

    Posted 2 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.