Home Forums Basel – Premium Template Looking for menu hove functionality

This topic contains 2 replies, has 2 voices, and was last updated by Artem Temos Artem Temos 3 years, 11 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #3644

    johnzell
    Customer

    Hi, I’m trying to figure out how to enable the same menu hover functionality you have with the home menu. I have used VC to add a menu which is taller than the page (like yours) but when you hover or try to scroll within it it doesn’t move. With the demo the content moves based on how far down your mouse is. Please advise on how to achieve this result.

    Private Content Hidden
    #3645

    johnzell
    Customer

    You or your team replied to me on themeforest, but I need the function as it was demonstrated in your demo. Can you please provide instructions for me to implement this into my site.

    #3650

    Hello,

    Thank you for contacting us.

    Since this option not available in our theme and was developed only for demonstration of all our demo layouts, you will need to add some codes to make it work on your web-site.

    1. Add additional CSS class for the menu item you want to apply this hover effect. You can place it in Appearance -> Menus to the “CSS classes” field. If you don’t see this field you need to turn it on in Screen options on this page

    dropdown-scroll

    CSS classes

    2. Place the following code snippet to the Custom CSS area for desktop in Theme Settings -> Custom CSS. You can set a desired height for the dropdown

    .dropdown-scroll > .sub-menu-dropdown {
        height: 620px;
        overflow: hidden;
    }

    3. Insert also this JS snippet to the Custom JS area in Theme Settings

    var scrollMenu = function() {
        var scrollMenu = jQuery('.dropdown-scroll > .sub-menu-dropdown');
            
        scrollMenu.each(function() {
            var $this = jQuery(this);
            var innerContent = $this.find('> .container');
                
            $this.on('mousemove', function(e) {
               var parentOffset = $this.offset(); 
               var relY = e.pageY - parentOffset.top;
               var deltaHeight = innerContent.outerHeight() - $this.height();
               if( deltaHeight < 0 ) return;
               var percentY = relY / $this.height();
               var margin = 0;
    
               if( percentY <= 0 ) {
                   margin = 0;
               } else if( percentY >= 1 ) {
                   margin = - deltaHeight;
               } else {
                   margin = - percentY * deltaHeight;
               }
               
               margin = parseInt(margin);
               
               innerContent.css({
                    'position': 'relative',
                    'top': margin
               });
            });
        });
        
    }
    
    setTimeout(function() {
        scrollMenu();
    }, 1000);
    
    scrollMenu();

    Hope this will help.

    Regards

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.