Member Avatar for jcomputing

I am making a mega menu a bit like the one on sky.com. I have noticed that the speed of the menu opening is quite slow. I was wondering is there a way to control the speed of divs using css. Or do I need java

Kind Regards,

Jonathan

  • 3 Contributors
  • 3 Replies
  • 115 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by drjohn

Dani AI

Generated

Building on ’s question and the quick tips from @\<M/> and : both CSS and JavaScript can control how fast a mega menu opens. CSS is simplest and gives the smoothest result when animating GPU-friendly properties; use transition-duration / animation-duration and transition-timing-function to set speed and easing (MDN: Using CSS transitions).

Prefer animating transform and opacity instead of height/top because transforms avoid layout/reflow and are hardware accelerated. Example CSS for a quick fade/slide (200ms) that can be toggled by adding/removing .open:

.menu {
  transform: translateY(-8px);
  opacity: 0;
  transition: transform 200ms cubic-bezier(0.22,0.9,0.36,1), opacity 200ms;
  will-change: transform, opacity;
}

.menu.open {
  transform: translateY(0);
  opacity: 1;
}

If a true "slide to auto height" effect is required, CSS cannot transition to height: auto directly. Measure the content height in JS, set that pixel height, let the transition run, then clear the inline height. jQuery’s helpers (.slideDown(duration, easing)) do this behind the scenes and accept a speed parameter (jQuery .slideDown). Minimal JS pattern:

function openMenu(el){
  el.style.height = el.scrollHeight + 'px';
  el.classList.add('open');
  el.addEventListener('transitionend', function onEnd(){
    el.style.height = '';
    el.removeEventListener('transitionend', onEnd);
  });
}

Troubleshooting and performance notes: if the menu still feels slow, shorten the duration, check for blocking JavaScript on hover handlers, avoid animating many child elements, and use will-change sparingly. For the smoothest UX on complex mega menus, animate only transforms/opacity, debounce expensive work, and profile with browser DevTools to find main-thread bottlenecks.

Recommended Answers

All 3 Replies

Member Avatar for <M/>

You can adjust the speed using css and jquery, there are tutorials out there on how to make menus like that. Just search for jquery menus.

Member Avatar for jcomputing

Thanks for your kind reply. Can this be done with just CSS alone?

Kind Regards,

Jonathan

Member Avatar for drjohn

try experimenting with easing on hovering, google it.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.