DamianFox DamianFox - 2 years ago 67
HTML Question

Ripple animation doesn't work correctly

I'm following this tutorial to add a ripple animation to every item of a drop-down menu. The problem is that I can do the animation but it expands across the page (isn't constrained to the menu item) and not how it is show by the tutorial.
Here is how I do:


var ink, d, x, y;
$(".sub-menu li a").click(function(e){
if($(this).find(".ink").length === 0){
$(this).prepend("<span class='ink'></span>");

ink = $(this).find(".ink");

if(!ink.height() && !ink.width()){
d = Math.max($(this).outerWidth(), $(this).outerHeight());
ink.css({height: d, width: d});

x = e.pageX - $(this).offset().left - ink.width()/2;
y = e.pageY - $(this).offset().top - ink.height()/2;

ink.css({top: y+'px', left: x+'px'}).addClass("animate");

And my menu:

<div id="skenav" class="ske-menu"><ul id="menu-main" class="menu sf-js-enabled sf-arrows"><li id="menu-item-269" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-9 current_page_item menu-item-269"><a href="http://localhost:8888/grafixlab/">Home</a></li>
<li id="menu-item-273" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-273 has_child"><span class="this_child"></span><a href="http://localhost:8888/grafixlab/grafixlab/" class="sf-with-ul">Grafixlab</a>
<ul class="sub-menu">
<li id="menu-item-306" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-306"><a href="#"><span class="ink animate" style="height: 200px; width: 200px; top: -77px; left: -41.6875px;"></span>Test</a></li>
<li id="menu-item-316" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-316"><a href="http://localhost:8888/grafixlab/grafica/">Grafica</a></li>
<li id="menu-item-272" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-272"><a href="http://localhost:8888/grafixlab/web/">Web</a></li>
<li id="menu-item-271" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-271"><a href="http://localhost:8888/grafixlab/video/">Video</a></li>
<li id="menu-item-318" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-318"><a href="http://localhost:8888/grafixlab/didattica/">Didattica</a></li>

What am I doing wrong?

Answer Source

Looking at the tutorial, this should be a valid solution:

Add overflow: hidden; to .sub-menu li a in your CSS Code.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download