Start a new discussion

To start a new discussion please visit the discussions section of the GitHub home page of the project.

Discussions on GitHub

You can also search our old self-hosted forums for any useful information below but please note that posting new content here is not possible any more.

[Suggestion] Functionality for Mobile Responsive, to be available for Desktop

Home Forums Older releases 0.9.x [Suggestion] Functionality for Mobile Responsive, to be available for Desktop

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #1294
    ZeRoFrEeZe
    Participant

    Hi Admin, just my suggestion. Currently the functionality for Mobile Responsive is great. I was hoping if it could be configurable to have the same functionality for a Desktop site as well.

    Meaning to have vertical menu links on a normal website.
    on Desktop:
    Mouseover Main Menu, will slidedown the children menu links
    on Mobile:
    Click Main Menu, will slidedown children menu links

    Thank you for your time.

    #1454
    admin
    Keymaster

    It’s actually very easy to achieve this. You will just need to activate the styles that make the sub menus collapsible on small screens for all screen widths – i.e. you will need to remove the media query part (but keep the inner rules) in the theme “.css” file.

    For example, for the default theme “sm-blue.css” look at the end at the “Responsiveness” section at the end of the file – you have the following media queries:

    /* decrease horizontal main menu items left/right padding to avoid wrapping */
    @media screen and (max-width: 850px) {
    	.sm-blue:not(.sm-blue-vertical) > li > a {
    		padding-left:18px;
    		padding-right:18px;
    	}
    }
    @media screen and (max-width: 750px) {
    	.sm-blue:not(.sm-blue-vertical) > li > a {
    		padding-left:10px;
    		padding-right:10px;
    	}
    }
    
    @media screen and (max-width: 640px) {
    
    	[ KEEP JUST THESE RULES ]
    
    }
    

    You basically need to delete all these and just leave the rules inside the last media query and this will make your sub menus collapsible for all users (desktop and mobile).

    Now the only remaining thing is that the sub menus will expand onclick even on desktop since the script has some code which enables onclick activation when collapsible sub menus are detected. You can fix this by using the following additional JS code:

    $('#main-menu').bind('mouseenter.smapi', function(e, item) {
    	$('#main-menu').smartmenus('itemClick', { currentTarget: item });
    });

    But I believe once you test this live, you will prefer the expand/collapse onclick rather than onmouseover.

    Please let me know if you have any questions.

    #1455
    ZeRoFrEeZe
    Participant

    Thank you for your suggestion Admin, it works great!

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘0.9.x’ is closed to new topics and replies.