Grey out nav buttons unless is_user_logged_in()

1 Views

I’d like to show my users some features I offer if they register in a special nav bar. I’ve created this for a logged in version and a logged out version: 

if ( is_user_logged_in() ) {
    $menu = wp_nav_menu( array(
        'theme_location' => 'logged-in-menu',
        'container'      => '0',
        'fallback_cb'    => 'wp_page_menu',
        'echo'           => '0',
    ) );
    echo $menu;
} else {
    $menu = wp_nav_menu( array(
        'theme_location' => 'main-menu',
        'container'      => '0',
        'fallback_cb'    => 'wp_page_menu',
        'echo'           => '0',
    ) );
    ?>
    <style>#menu-item-1046{opacity : 0.4; filter: alpha(opacity=40);}</style>
    <?php
    echo $menu;
}

I’m trying to grey out (disable but leave visible) nav buttons by ID. Obviously my CSS in there works but doesn’t disable the button…

Read More

I tried <script>$('#menu-item-1046').button('disable');</script> But I’ve barely dabbled in jQuery as of now.

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. When you look at the possible arguments, then you’ll see that there’s as well the option to add a custom nav menu walker class.

    $defaults = array(
    'theme_location'  => '',
    'menu'            => '',
    'container'       => 'div',
    'container_class' => '',
    'container_id'    => '',
    'menu_class'      => 'menu',
    'menu_id'         => '',
    'echo'            => true,
    'fallback_cb'     => 'wp_page_menu',
    'before'          => '',
    'after'           => '',
    'link_before'     => '',
    'link_after'      => '',
    'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
    'depth'           => 0,
    'walker'          => ''
);
wp_nav_menu( $defaults );

    The walker would be implemented like this:

    $walker = new WPSE90265_Nav_Menu_Walker();

wp_nav_menu( array( 
    # ...
    'walker' => $walker
    # ...
) );

    It should extend the default nav menu walker so you only need to overwrite those methods that you need to redefine:

    class WPSE90265_Nav_Menu_Walker extends Walker_Nav_Menu
{
    public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 )
    {
        if ( ! is_user_logged_in() )
            $output = str_replace( 
                 'class="'
                ,'disabled class="'
                ,$output
            );

        parent::start_el( $output, $item, $depth, $args, $id );
    }
}

    Note, that the disabled argument will only work for specific HTML elements/tags. Please do a search on which it works and alter your walker according to it. You could as well try to add an onClick="return false;" inside the walker if it’s not possible to use such tags.

  2. Because the menu item is not button so you can’t use .button(disable); function, combine this code with your above css: 

    jQuery(document).ready(function() {    
     $('#menu-item-1046').click(function(){return false;});
});