DamianFox DamianFox - 5 months ago 10
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:

Javascript:

$(function(){
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");
ink.removeClass("animate");

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>
</ul>
</li>
</ul>
</div>


What am I doing wrong?

Answer

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

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

Comments