2 level submenu for Mobile layout

denishvachhani · November 5, 2012, 5:07pm

Hi Manish,

I am going to use rtcamp framwork (Its really Great :) ) for my next 2 website,

I would like to create responsive layout, So, I always use Grid styles Provide by use (for e.g rt-grid-x class)

My problem is,

I have 2 Level Sub menus- under Primary menu, (In hover effect)

But when i open my site to Mobile browser, It shows me only Parent Menu list, How can i display Sub Menu List for mobile.

Please note, In my Desktop Browser, It is in Hover effect to show 2 - level -submenu.. How to achive Hover effect in Mobile?

Thanks, Waiting For you Answers..

Attachment Link(s):

http://rtcamp.com/wp-content/uploads/rtMedia/topics/4813/2012/11/screenshot.png

sagarjadhav · November 6, 2012, 11:28am

Hello denishvachhani,

Thanks for appreciating rtPanel.
The solution of your problem is as follows:

/* Max Screen Width: 760 */  
@media screen and (max-width: 760px) {  
#rtp-nav-menu li:hover > ul { display: block; }  
#rtp-nav-menu ul.sub-menu { background: #EEE; border: 0; left: -1px; position: relative; top: 0; width: 100%; }  
#rtp-nav-menu ul.sub-menu a { border: 0; }  
#rtp-nav-menu ul.sub-menu li:first-child { border-top: 1px solid #DDD; }  
}

Feel free to ask further assistance.
Thanks

denishvachhani · November 6, 2012, 12:44pm

Sagar,

Not working for me on Mobile,
In my mobile (galaxy note 2, 5inch screen) how to achive ( li:hover) , If i try to click on Parent Menu, It directly navigate to Parent Detail Page.

I can not go to subpage by Menu…

sagarjadhav · November 6, 2012, 4:42pm

denishvachhani,

Since you can’t hover on a touch screen (yet), you have two options to show submenu.

You can show all menu links using css and some jQuery.

CSS Code:

/* CSS */  
@media screen and (max-width: 760px) {  
#rtp-nav-menu li { text-align: left; }  
#rtp-nav-menu li ul { display: block; }  
#rtp-nav-menu ul.sub-menu { background: #EEEEEE; border: 0; left: 0; position: relative; top: 0; width: 100%; }  
#rtp-nav-menu ul.sub-menu li { border: 0; padding-left: 20px; }  
#rtp-nav-menu ul.sub-menu a { border: 0; }  
}

jQuery Code:

jQuery( document ).ready(function() {  
    var nav_btn = '';  
    /* prepend menu icon */  
    jQuery('#rtp-primary-menu').prepend(nav_btn);  

    jQuery("#rtp-nav-menu li a").each(function() {  
        if (jQuery(this).next().length > 0) {  
                jQuery(this).addClass("parent");  
        };  
    })  

    jQuery(".rtp-nav-btn").click(function(e) {  
            e.preventDefault();  
            jQuery(this).toggleClass("active");  
            jQuery("#rtp-nav-menu").slideToggle();  
    });    
});

If you want to achieve hover effect, then write the code to set the click() and hover() events.
Here is the code:
CSS:

@media screen and (max-width: 760px) {  
#rtp-nav-menu li:hover > ul { display: block; }  
#rtp-nav-menu ul.sub-menu { background: #EEEEEE; border: 0; left: -1px; position: relative; top: 0; width: 100%; }  
#rtp-nav-menu ul.sub-menu a { border: 0; }  
#rtp-nav-menu ul.sub-menu li:first-child { border-top: 1px solid #DDD; }  
}

jQuery:

var ww = document.body.clientWidth;  

jQuery( document ).ready(function() {  
    var nav_btn = '';  
    /* prepend menu icon */  
    jQuery('#rtp-primary-menu').prepend(nav_btn);  

    jQuery("#rtp-nav-menu li a").each(function() {  
        if (jQuery(this).next().length > 0) {  
                jQuery(this).addClass("parent");  
        };  
    })  

    jQuery(".rtp-nav-btn").click(function(e) {  
            e.preventDefault();  
            jQuery(this).toggleClass("active");  
            jQuery("#rtp-nav-menu").slideToggle();  
    });  

    adjustMenu();  

});  


jQuery(window).bind('resize orientationchange', function() {  
    ww = document.body.clientWidth;  
    adjustMenu();  
});  

var adjustMenu = function() {  
    if (ww < 768) {  
        jQuery(".rtp-nav-btn").css("display", "inline-block");  
        if (!jQuery(".rtp-nav-btn").hasClass("active")) {  
            jQuery("#rtp-nav-menu").slideUp();  
        } else {  
            jQuery("#rtp-nav-menu").slideDown();  
        }  

        jQuery("#rtp-nav-menu li").unbind('mouseenter mouseleave');  
        jQuery("#rtp-nav-menu li a.parent").unbind('click').bind('click', function(e) {  
            // must be attached to anchor element to prevent bubbling  
            e.preventDefault();  
            jQuery(this).parent("li").toggleClass("hover");  
        });  
    }   
    else if (ww >= 768) {  
        jQuery(".rtp-nav-btn").css("display", "none");  
        jQuery("#rtp-nav-menu").slideDown();  
        jQuery("#rtp-nav-menu li").removeClass("hover");  
        jQuery("#rtp-nav-menu li a").unbind('click');  
        jQuery("#rtp-nav-menu li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {  
            // must be attached to li so that mouseleave is not triggered when hover over submenu  
            jQuery(this).toggleClass('hover');  
        });  
    }  
}

FYI: In 2nd option parent menu will not working not open in normal click.
Let me know your opinion

denishvachhani · November 7, 2012, 1:38pm

Dear sagar,

Great, you first option works fine (Just CSS code without jquery code).
Can you tell me.

What do if i want to disable Comment functionality?
How can i override my 3rd party plugin’s CSS with the theme, ( without !important options)

PS: i am using Child theme, i have style.css, but i can’t override 3rd party plugin’s css without !important property?

sagarjadhav · November 7, 2012, 6:41pm

Hello denishvachhani,

If you want of disable Comment functionality, then its pretty easy with rtpanel-child-theme.
Go to lib > rtp-custom-hooks-applied.php
then search for //remove_action( ‘rtp_hook_comments’, ‘rtp_default_comments’ );
You have to just comment out this line i.e. remove_action( ‘rtp_hook_comments’, ‘rtp_default_comments’ );
About Plugins style: Most of the plugins provide options for styling, check the settings of particular plugin before overriding it. It will be great if you give me the list of plugins you are using, so i can give you a better option for overriding.

Thanks

denishvachhani · November 8, 2012, 11:25am

Thanks a lot Sagar, Another question is from my side is 1) Can you suggest me Best way to customize the theme using child theme, (in terms of functionality) for e.g , i want to display “search form”, on top-right side (opposite of Site-logo) Please see attached screenshot, how can i achieve this using HOOK.?

Attachment Link(s):

http://rtcamp.com/wp-content/uploads/rtMedia/topics/21486/2012/11/2012-11-08_1117.png

http://rtcamp.com/wp-content/uploads/rtMedia/topics/21486/2012/11/2012-11-08_11171.png

ankitgade · November 8, 2012, 12:51pm

Hello,
Add following code to your functions.php file.

function custom_hook_after_logo() { ?>
<?php
}
add_action( ‘rtp_hook_after_logo’, ‘custom_hook_after_logo’ );

and add following style to your style.css file

.header-search-form{ float : right; }

your requirement will be accomplished by this.

ankitgade · November 8, 2012, 1:14pm

Hello,
Add following code to your functions.php file.

function custom_hook_after_logo() { ?>

<?php echo get_search_form( false ); ?>

<?php
}
add_action( ‘rtp_hook_after_logo’, ‘custom_hook_after_logo’ );

and add following style to your style.css file

.header-search-form{ float : right; }

your requirement will be accomplished by this.

system · November 9, 2018, 2:09pm