Need help with javascript and div

Hi guys. I posted this earlier on theme forest but didn’t get much of a response, maybe i was missing out detail, but anyway, here is my situation. I’m trying to make a menu (a news archive menu) where you can hover over the year, and then below that year, all the months of the year will appear.

Let me explain:

1. The user is not hovering over the year (2007 in this example):

2. The user hovers over the year 2007 and the div containing the months starts to be revealed. Pushing the content below it down.

3. As the transition continues, even more of the div is revealed, pushing the content below it even further down.

4. Eventually the entire div is revealed, as if it was there from the start.

My Code structure is like this:

<ul>
<li>2007</li>
<div id="2007months">
      </div><li>December</li>
      <li>November</li>
      <li>October</li>
      <li>September</li>
      etc...

<li>2006</li>
<div id="2006months"> etc ... 
</div>

<li>2005</li>
<div id="2005months"> etc ... 
</div>

etc...

</ul>

Basically, i would like to apply the transition to the DIVs, and allow for the transition to be reversed for when the user rolls out.

Does anyone know any scripts like this, or know how they would go about making one, javascript would be the most ideal solution as i am familiar with it..

I am currently using display:block and display:none, but it does look quite tacky when you roll over the menu and suddenly the months appear. Doesn’t look to pleasing to the eye…

Thanks in advance
Sam

Or if you don’t understand Jquery at all, you could just use this easy to apply Motion Tween Engine I’ve relied on for a while now. Works great, cross-browser too

http://jstween.blogspot.com/#TweenMethodsEx

Okay, decided to go with the jQuery method. So all you jQuery pros out there need to answer another question.

I have an event that detects when any of the div’s within the object #menu are rolled over:

$('#menu div').hover(
    function() {
        //stuff goes here
      }
    );

But i’m not sure how to select the ul object within that div, so where i have ”//stuff goes here” i need to move down the ul. ie:

$('#menu div').hover(
    function() {
        $(correct item).slideDown('normal');
      }
    );

and i have no idea how to get the “correct item”, or the child to the DIV , i already have the $(this) working.

i have tried the following:

$(this).('ul').slideDown('normal');
$(this 'ul').slideDown('normal');
$(this . 'ul').slideDown('normal');

Obviously none of them work, all i want to do is select the ul within this...

help please…

Never mind… got it:

 $(this).find('ul')

Haha, just had so much trouble with the event .mouseout , it triggers even when you dont want it to, found out i needed to use .mouseleave instead

the real answer?

use Flash

the real answer? use Flash

Possibly…

Anyway i got it all working now and i’m quite happy Didn’t want to use flash for the fundamental stuff like menus, might do it for showcase etc. though.

Oh yeah… just for the record… this is a client’s site