jQuery LavaLamp drop down

Question

I was looking for a solution, but unfortunately I could not find any.

It is about maintaining a floating border. When you pointing element of sub ​​menu, border runs to position .active li (depending on which page is active - for example: if home page is on run, the 'Home' got class = active).

It would be nice if it stayed on the element that indicates the cursor.

lavalamp source: http://chiroandmelinda.com/jscripts/lavalamp-0.2.0/demo.html

my code

//EDIT

Is there any way to change 'back' and 'move' functions?

source - jquery.easing.min.js

Answer 1

I fix problem my self :)

Here is my solution If you do not want floating border goes left after you hover some of li elements in your drop menu you must set 'dummy' class for all your main li elements in main ul (not in sub menus!)

E.G. (i use class="mainNav")

<ul>
  <li class="mainNav">Home</li>
  <li class="mainNav">About Us</li>
  <li class="mainNav">Portfolio</li>
    <ul>
      <li>1</li>
      <li>2</li>
    </ul>
  <li class="mainNav">Contact</li>
</ul>

After that you must change some value in jQueryLavaLamp source I mean in jquery.lavalamp.min.js

MAIN FILE

When you look at this code (jquery.lavalamp.min.js) you must search for line 63 which is in original file like that:

$li = $("li", this), curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0];

after you find it just change it to code like this:

$li = $(".mainNav", this), curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0];

i change first $(".li", this) into $(".mainNav", this) after that the crazy floating border (LavaLamp) floating around class="mainNav" elements ONLY! not around li elements :)

Here is some JSFIDDLE

I paste all lavalamp.js code to javascript window to operate directly with main problem element.

You can see i wrote already ".mainNav" in line 9 but you can change it to 'li' and see how is the difference between first and second one. Hope i can help with that :)