: Navigation bar: How to create a slide effect from the current navigation item to another hovered one - without JS? There's a visually nice slide effect on http://www.gaeste-etage.de/de/ in the

@Nimeshi995

Posted in: #Css3 #Navigation #ResponsiveWebdesign #Svg

There's a visually nice slide effect on www.gaeste-etage.de/de/ in the horizontal top navigation bar:

When you hover with the mouse over another but the current navigation item, the orange rectangle moves to the hovered item.
It is important for the effect, that the current item does not stay orange.

The creator of the website has used a javascript for that. And he added extra markup in form of a div.

My question:
Is it possible to create a comparable effekt just with CSS/SVG and without JS and without additional markup?

I'm working at a website which should be responsive and easy to maintain.
So it is important, that it is not necessary to declare a specific width for each navigation item.

For example I found www.css3create.com/Menu-en-full-CSS-style-Lavalamp
But the author declares a specific width in em for each item.

Thanks for your advice.

Vote Up Vote Down

Login to post a comment!