Member Avatar for jspence29

How can I make the menu more fluid than it is now, you will see what I am talking about when you see the fiddle
http://jsfiddle.net/jspence29/wCXB5/

  • 2 Contributors
  • 5 Replies
  • 132 Views
  • 3 Hours Discussion Span
  • Latest Post Latest Post by jspence29

Dani AI

Generated

: the “jump” you describe is almost always caused by changing properties that affect layout (font-size, padding, border, width) on hover. was right to suggest simplifying the CSS — duplicated nth-child rules just make maintenance harder — but for a smoother feel switch from animating layout to animating transform/opacity. Transforms don’t cause reflow and are far smoother (see MDN: transform and MDN: transition).

Use inline-block anchors and animate transform so surrounding items don’t move:

/* keep selectors generic so you can drop this into your menu */
.site-nav a {
  display: inline-block;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), color 160ms;
  will-change: transform;
}

.site-nav a:hover,
.site-nav a:focus {
  transform: translateY(-3px) scale(1.03);
  color: #1a73e8;
}

If you want a subtle decorative change (underline slide, for example) use a pseudo-element so no layout properties change:

.site-nav a { position: relative; text-decoration: none; }

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 2px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms ease;
}

.site-nav a:hover::after,
.site-nav a:focus::after { transform: scaleX(1); }

Troubleshooting tips: inspect the hover state in devtools to see which property changes width/height; avoid changing font-weight, font-size, padding, borders on hover; use will-change sparingly; keep focus outlines for keyboard users; and respect reduced-motion preferences with @media (prefers-reduced-motion: reduce) so motion can be disabled for users who need it (MDN: prefers-reduced-motion).

Recommended Answers

All 5 Replies

Member Avatar for ndeniche

What exactly d you want to do? "Fluid" layouts are supposed to adapt to window size, which your navbar does.

Member Avatar for jspence29

not fluid as in adaptive, fluid as in the hover animation probably not the best choice of words on my part

Edited by jspence29
Member Avatar for ndeniche

oh, you mean the size changing on hover? Maybe just change the color of the text and a text-shadow... Also, the last lines of your code are unnecessary: you're giving the same properties to every nth-child, so a simple ul.main_menu li a:hover at line 32 and removing lines 36+ should do

Member Avatar for jspence29

yeah I had that before, and it didn't work the same, but I think that was because of some other bug

Member Avatar for jspence29

good plan I am going with text-shadow: 0.1em 0.1em #333;

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.