Market Magento Theme - Trending Item on Themeforest Weekly!
Our Feature Items: SM Market // SM Destino // SP Revo
Shopping cart (0)
NOTE: OpenCart & WordPress Support

For OpenCart, Shopify products, please submit your questions here

For WordPress products, please submit your questions here

We are here to serve :)

Our support team is currently online to solve your issues.

Our support team is currently offline

Our support heroes might not be around this hour. Please expect some delays.

Our support is available from

Monday - Friday 8am - 5:30pm GMT+7

Your time: 00:00:00
Our time: 00:00:00
Welcome, Guest

Modify mobile layout
(1 viewing) (1) Guest
Userguide, Report bugs, New Ideas...
  • Page:
  • 1

TOPIC: Modify mobile layout

Modify mobile layout 1 month ago #16216

  • Wemessage
  • OFFLINE
  • Fresh Boarder
  • Posts: 3
  • Karma: 0
Right now our mobile menu is crappy due to huge amount of menu items.

namely we have main category -> image + sub category -> sub categories.

which makes it really frustrating to reach needed category on mobile. And almost 80% of our visitors are mobile users.

We need something like this for a mobile menu: www.systeemplafond.nu/

they use megamenu which transforms it to a very fast mobile menu


Any advies on how to make it to look like that ?

Re: Modify mobile layout 1 month ago #16219

  • Wemessage
  • OFFLINE
  • Fresh Boarder
  • Posts: 3
  • Karma: 0
Currently have something like this..
Looks much better but still slow as hell.
<script type="text/javascript">
        require([
            'jquery',
            'mage/translate'
        ], function ($) {
            $('.btn-submobile').click(function () {
                $(this).prev().slideToggle(200);
                $(this).toggleClass('btnsub-active');
                $(this).parent().toggleClass('parent-active');
            });

            function cloneMegaMenu() {
                var breakpoints = 1024;
                var doc_width = $(window).width();
                if (doc_width <= breakpoints) {
                    var horizontalMegamenu = $('.sm_megamenu_wrapper_horizontal_menu .horizontal-type');
                    var verticalMegamenu = $('.sm_megamenu_wrapper_vertical_menu .vertical-type');
                    $('#navigation-mobile').append(horizontalMegamenu);
                    $('#navigation-mobile').append(verticalMegamenu);
                    $('.icon_items_sub').each(function(){
                        $(this).attr('data-img', $(this).find('img').attr('src'));
                        $(this).find('img').remove();
                    });
                    $('#navigation-mobile .sm_megamenu_head_item>.sm_megamenu_title>.sm_megamenu_nodrop').nextAll('div').hide();
                    
                    $('#navigation-mobile .sm_megamenu_head_item>.sm_megamenu_title>.sm_megamenu_nodrop').click(function(e){
                        if($(this).next('div').length > 0){
                            e.preventDefault();
                            var el = $(this);
                            $(this).next('div').find('h3.sm_megamenu_nodrop.title-cat').replaceWith(function(){
                                return $('<a href="'+el.attr("href")+'" class="sm_megamenu_nodrop  title-cat">'+$.mage.__('View ')+el.text()+'</a>');
                            });
                            $(this).nextAll('div').toggle();
                        }
                    });
                } else {
                    $('#navigation-mobile .sm_megamenu_head_item>.sm_megamenu_title>.sm_megamenu_nodrop').nextAll('div').show();
                    $('#navigation-mobile a.sm_megamenu_nodrop.title-cat').replaceWith(function(){
                        return $('<h3  class="sm_megamenu_nodrop  title-cat">'+$(this).text().replace($.mage.__('View '), '')+'</h3>');
                    });
                    $('.icon_items_sub').each(function(){
                        if($(this).attr('data-img')){
                            $(this).html('<img src="'+$(this).attr('data-img')+'" class="icon items sub" />');
                            $(this).attr('data-img', "");
                        }
                    });
                    var horizontalMegamenu = $('#navigation-mobile .horizontal-type');
                    var verticalMegamenu = $('#navigation-mobile .vertical-type');
                    $('.sm_megamenu_wrapper_horizontal_menu .sambar-inner .mega-content').append(horizontalMegamenu);
                    $('.sm_megamenu_wrapper_vertical_menu .sambar-inner .mega-content').append(verticalMegamenu);
                }
            }

            cloneMegaMenu();

            $(window).resize(function () {
                cloneMegaMenu();
            });
        });
    </script>
  • Page:
  • 1
Time to create page: 0.16 seconds
Google+
Joomla TemplatesFree Joomla TemplatesVirtuemart TemplatesK2 TemplatesJoomShopping TemplatesHikaShop TemplatesSobiPro TemplatesOpenCart Themes