Drop-Down confusion

  • Resolved claybaby

    (@claybaby)


    11 years, 10 months ago

    I’m working with someone else’s child-theme of Simple Organization theme. I’m trying to enable custom menus with submenus. I followed the directions at codex and commented out the old menus in the Header.php and footer.php files.

    <!--adding Header Menu-->
<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
<!--commenting old menu
<?php sm_mainnav(); ?>-->

    There is a call to a submenu function

    <?php sm_subnav(); ?>

    as well as the function in the function.php file

    function sm_subnav() {
    global $post, $wpdb;

    if ( is_page() ) {
        $child_of = null;

        if ( $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->posts WHERE post_type='page' && post_parent = ".$id) > 0 ){
            $child_of = $id;
        } else if ( $post->post_parent != 0 ) {
            $child_of = $post->post_parent;
        }

        if ( !is_null($child_of) ) {
            echo '<div class="navigation" id="sub-nav">' . "\n";
            echo '<ul class="tabbed">' . "\n";
            $title = get_the_title($child_of);
            echo '<li class="page_item page-item-'.$child_of.'"><a href="'.get_permalink($child_of).'" title="'.$title.'">'.$title.'</a>';
            wp_list_pages('title_li=&exclude=120&child_of='.$child_of);
            echo '' . "\n";
            echo '<div class="clearer">?</div>' . "\n";
            echo '</div>' . "\n";
        }
    }
}

    I did the GUI menu interface with the submenu items tabbed to the right, saved the custom menus etc. But my result is all the menu items one after another. Besides registering the menu, placing the php in the desired spots and setting up the GUI is there something else I need to do?

Viewing 8 replies - 1 through 8 (of 8 total)

  • Do you have register_nav_menu() in your functions.php ?
    https://codex.www.ads-software.com/Function_Reference/register_nav_menu

    When done right, you will also have to make sure that you got the CSS for the nested lists too, for it to display right, along with JS for the drop down effect if needed.

    Also, sm_subnav() has nothing to do with wp_nav_menu(), and since you decided to ditch it, so don’t bring it up to confuse yourself.

    Thread Starter claybaby

    (@claybaby)

    Thanks for the clarification on sm_subnav(), consider it ditched.

    I did put register_nav_menu() in functions.php like so:

    function register_my_menus() {
  register_nav_menus(
    array(
      'header-menu' => __( 'Header Menu' ),
      'footer-menu' => __( 'Footer Menu' )
    )
  );
}
add_action( 'init', 'register_my_menus' );

    The only javascipt is a jQuery function call that looks like it’s adding a hover class. In the CSS there’s styling for the drop-downs, but no visibilty: none lines or anything. I guess I need to add this funcitonality to the theme.

    Thread Starter claybaby

    (@claybaby)

    In reviewing the CSS I do see that there are a few lines that are making the drop-downs visible:

    #main-nav .tabbed .children {
    display:none;
}
#main-nav .tabbed .hover .children {
    display:block;

    That looks to me like it should make those drop-downs disapear and appear. I am confused by the children class, it doesn’t appear in the header.php file and I don’t find it in the functions either.

    Thread Starter claybaby

    (@claybaby)

    I found a great article on using CSS to create disappearing drop-downs here. It looks to be in my wheelhouse, however, I’m a little confused about the wp_nav_menu call versus the source code.

    In the article the author indicates that you have to place the wp_nav_menu call into the header, much like the codex article does. Then she refers to the “source code” which includes two unordered lists and list items.

    The Custom WordPress Menu that you have produced is an un-numbered list and if you look at the source code that is produced, it will be something like:

    What follows is a pretty simple html ul. But where is it?

    Where is this myserious source code? I want access so that I can know how to format the CSS. It’s not in the header.php file and I’ve looked everywhere I can think of.

    @claybaby

    Now that the wp_nav_menu() works, the rest of it is CSS and JS.

    You have to move over CSS selectors from your old menu to reflect on your new menu id and class, and changes must be the same in JS too.

    But it can’t be exact copy, because your old menu’s HTML structure is a bit different from wp_nav_menu(), notice the <ul class="tabbed"> and its associated CSS.

    My advice is that you should take a look at TwentyTwelve (or else) and take over its implementation, CSS and JS, this you won’t need much work reinventing the wheel.

    However, if you want to keep the behavior the same as your old menu, you have to transform over the changes in CSS and JS to reflect the new menu’s HTML class and id, for example you might also need a <div class="tabbed"> to replace that <ul> one.

    Thread Starter claybaby

    (@claybaby)

    @paulwpxp

    I understand what you’re saying, different html results in different CSS/javascript, but what I don’t understand is where or from where the wp_nav_menu() delivers html.

    If I have to write new code for the header, that’s fine, but does the wp_nav_menu() deliver a series of
    li’s?

    where or from where the wp_nav_menu() delivers html.

    It’s automatically pulled from WP’s core, the best thing to do is “view source” from a live page to see the structure, you can also put in your own class too.
    https://codex.www.ads-software.com/Function_Reference/wp_nav_menu

    Thread Starter claybaby

    (@claybaby)

    thanks paul, i stared at the source code for a half an hour before figuring out what to change in the CSS, and it worked!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Drop-Down confusion’ is closed to new replies.