Menu Realisation (text add on hover, background gradient and list-item separator)

[Asamandra]

Hi !
I would like to hear your opinions, what is the best way to implement something like this.
Please note, that there is a little space betwen the dotted line an the top border, wich i think is a reason for javascript or using background images (i would like to evade that if possible). The hover effekt is as you see adding/showing some text which was not there before.
All in all i would say it´s a candidate for some JavaScript, but as i am new to this topic, i would like to hear your opinions if here are different ways to achieve that.

best regards
Asa

[Paulie_D]

All of that can be done with HTML & CSS. It’s just a matter of margins & padding.

[Asamandra]

Well i would appreciate an example then, because i found no solution that really worked that way…

[Paulie_D]

What have you got so far? I really don’t want start from scratch.

Can you make a Fiddle?

[Asamandra]

yes of course, thats what i have, but i´m afraid is not much:
http://jsfiddle.net/R7Hsb/9/

[Paulie_D]

OK, I haven’t had a lot of time but here’s a version which has the styling you were after. http://codepen.io/pen/8463/1

Not sure about the extra text but I’ll have a think.

[Asamandra]

wow, thats really cool, thanks a lot!

[Author]

Posts