Search jQuery

jQuery Forum

Menu Effect - Box Sliding and Such

in Using jQuery • 11 years ago

I am trying to create an accordian style animated menu with jQuery but I am having problems with a few effects. I do not know how to make an animated box slide in behind each menu item, and also to disable the MouseOut effect with the MouseClick is 'enabled'. Lastly, I am wondering how do I detect the length of an item (I have just been manually doing it with css width, but I'd greatly appriciate a dynamic alternative). I have posted a demo of my code http://www.sfu.ca/~jca41/stuph/menu/

Here are my states:

MouseOver - A green box in the background will slide in from the right (with an elastic bounce effect) to create a background box for the text. The text will change its colour from black to white.
MouseOut - The green box will slide out (to the right) and the text colour will change back to black.
MouseClick - The green box will appear behind the text, and the text colour will be white.

$(document).ready(function() {
$("#works p.menuHead").click(function() {
$(this).next("div.menuBody").slideToggle(300).siblings("div.menuBody").slideUp("slow");
});
$("#works a.menuItem").mouseover(function() {
$(this).css("background-color","green");
$(this).css("color","white");
$(this).animate(
{ backgroundColor: "green" }, {
duration: 'slow',
easing: 'easeOutBounce'
}
)
});
$("#works a.menuItem").mouseout(function() {
$(this).css("background-color","white");
$(this).css("color","black");
});
$("#works a.menuItem").click(function() {
$("#works a.menuItem").css("background-color","white");
$(this).css("background-color","green");
});
});

<div id="works" class="menuList">
<p class="menuHead">Web</p>
<div class="menuBody">
<a class="menuItem" href="#" style="width: 40px">rysa</a>
<a class="menuItem" href="#" style="width: 40px">fuel</a>
</div>
<p class="menuHead">Application</p>
<div class="menuBody">
<a class="menuItem" href="#" style="width: 110px">learn something</a>
<a class="menuItem" href="#" style="width: 160px">santa's nightmare before christmas</a>
</div>
<p class="menuHead">Spaces</p>
<div class="menuBody">
<a class="menuItem" href="#" style="width: 55px">vespa</a>
<a class="menuItem" href="#" style="width: 90px">anxety attack</a>
<a class="menuItem" href="#" style="width: 90px">the slow rush</a>
</div>
</div>

Response title

Attachments

jQuery Forum

Menu Effect - Box Sliding and Such

Statistics

Tags

Actions