We are already working on a version including diagonal movement. However, in our dropdown the list items are way bigger compared to the Amazon ones, therefore the resource is perfectly usable at this stage. Then of course everything can be improved!

Hi Vinsar, glad you like it! check out the new uploaded version. we added support for touchscreen desktops

Thanks! After Effects –> video imported in PS and exported as gif

I actually also fumbled with the js files, but changing the click function to a mouseover only makes the menu stay open for a fraction of a second, giving the user no time to move the cursor down to the list. I would thank anyone for a help on this…

Hi,

For multiple dropdown, you can try this quick solution (changes to main.js) no need to add a cd-dropdown-wrapper2 or 3 … :

jQuery(document).ready(function($){
var openTrigger;

//open/close mega-navigation
$(‘.cd-dropdown-trigger’).on(‘click’, function(event){
event.preventDefault();
toggleNav($(this).parent());
});

//close meganavigation
$(‘.cd-dropdown .cd-close’).on(‘click’, function(event){
event.preventDefault();
toggleNav($(this).parent());
});

//on mobile – open submenu
$(‘.has-children’).children(‘a’).on(‘click’, function(event){
//prevent default clicking on direct children of .has-children
event.preventDefault();
var selected = $(this);
selected.next(‘ul’).removeClass(‘is-hidden’).end().parent(‘.has-children’).parent(‘ul’).addClass(‘move-out’);
});

//on desktop – differentiate between a user trying to hover over a dropdown item vs trying to navigate into a submenu’s contents
var submenuDirection = ( !$(‘.cd-dropdown-wrapper’).hasClass(‘open-to-left’) ) ? ‘right’ : ‘left';
$(‘.cd-dropdown-content’).menuAim({
activate: function(row) {
$(row).children().addClass(‘is-active’).removeClass(‘fade-out’);
if( $(‘.cd-dropdown-content .fade-in’).length == 0 ) $(row).children(‘ul’).addClass(‘fade-in’);
},
deactivate: function(row) {
$(row).children().removeClass(‘is-active’);
if( $(‘li.has-children:hover’).length == 0 || $(‘li.has-children:hover’).is($(row)) ) {
$(‘.cd-dropdown-content’).find(‘.fade-in’).removeClass(‘fade-in’);
$(row).children(‘ul’).addClass(‘fade-out’)
}
},
exitMenu: function() {
$(‘.cd-dropdown-content’).find(‘.is-active’).removeClass(‘is-active’);
return true;
},
submenuDirection: submenuDirection,
});

//submenu items – go back link
$(‘.go-back’).on(‘click’, function(){
var selected = $(this),
visibleNav = $(this).parent(‘ul’).parent(‘.has-children’).parent(‘ul’);
selected.parent(‘ul’).addClass(‘is-hidden’).parent(‘.has-children’).parent(‘ul’).removeClass(‘move-out’);
});

function toggleNav(trigger){
var navIsVisible = ( !trigger.find(‘.cd-dropdown’).hasClass(‘dropdown-is-active’) ) ? true : false;
trigger.find(‘.cd-dropdown’).toggleClass(‘dropdown-is-active’, navIsVisible);
trigger.find(‘.cd-dropdown-trigger’).toggleClass(‘dropdown-is-active’, navIsVisible);
if (!navIsVisible) {
trigger.find(‘.cd-dropdown’).one(‘webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend’, function () {
trigger.find(‘.has-children ul’).addClass(‘is-hidden’);
trigger.find(‘.move-out’).removeClass(‘move-out’);
trigger.find(‘.is-active’).removeClass(‘is-active’);
});
}
else {

if (openTrigger) {
toggleNav(openTrigger);
}
openTrigger = trigger;
}
}

//IE9 placeholder fallback
//credits http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
if(!Modernizr.input.placeholder){
$(‘[placeholder]’).focus(function() {
var input = $(this);
if (input.val() == input.attr(‘placeholder’)) {
input.val(”);
}
}).blur(function() {
var input = $(this);
if (input.val() == ” || input.val() == input.attr(‘placeholder’)) {
input.val(input.attr(‘placeholder’));
}
}).blur();
$(‘[placeholder]’).parents(‘form’).submit(function() {
$(this).find(‘[placeholder]’).each(function() {
var input = $(this);
if (input.val() == input.attr(‘placeholder’)) {
input.val(”);
}
})
});
}
});