4335 posts
  • 6 Years of Membership
  • Affiliate Level 1
  • Author Level 3
  • Beta Tester
+11 more
Reaper-Media
says

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

382 posts
  • 6 Years of Membership
  • Affiliate Level 1
  • Author Level 5
  • Collector Level 2
+3 more
blabus
says

I believe something like this is what you’re looking for: http://www.i-marco.nl/weblog/jquery-accordion-menu/

If not, just search for “javascript accordion menu”, that’s what they’re called. :)

3875 posts Community Moderator
  • Weekly Top Seller
  • Moderator
  • Tuts+ Instructor
  • Netherlands
+10 more
Joost
Moderator
says

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

4335 posts
  • 6 Years of Membership
  • Affiliate Level 1
  • Author Level 3
  • Beta Tester
+11 more
Reaper-Media
says

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… :)

4335 posts
  • 6 Years of Membership
  • Affiliate Level 1
  • Author Level 3
  • Beta Tester
+11 more
Reaper-Media
says

Never mind… got it:

 $(this).find('ul')
4335 posts
  • 6 Years of Membership
  • Affiliate Level 1
  • Author Level 3
  • Beta Tester
+11 more
Reaper-Media
says

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 :D

8586 posts Community Moderator
  • United Kingdom
  • 7 Years of Membership
  • Moderator
  • Winner
+10 more
MSFX
Moderator
says

the real answer?

use Flash :)

4335 posts
  • 6 Years of Membership
  • Affiliate Level 1
  • Author Level 3
  • Beta Tester
+11 more
Reaper-Media
says
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 :D

382 posts
  • 6 Years of Membership
  • Affiliate Level 1
  • Author Level 5
  • Collector Level 2
+3 more
blabus
says
the real answer? use Flash :)

Flash is never the answer.

962 posts
  • 6 Years of Membership
  • Author Level 3
  • Beta Tester
  • Collector Level 2
+7 more
webdesigndeluxe
says
the real answer? use Flash :)
Flash is never the answer.

Agreed :)

by
by
by
by
by
by