4335 posts
  • Beta Tester
  • Bought between 10 and 49 items
  • Community Moderator
  • Contributed a Blog Post
  • Contributed a Tutorial to a Tuts+ Site
  • Exclusive Author
  • Grew a moustache for the Envato Movember competition
+6 more
Reaper-Media Volunteer moderator 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
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 5-6 years
  • Referred between 1 and 9 users
  • Sold between 10 000 and 50 000 dollars
  • United States
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. :)

3671 posts Community Moderator
  • Has been a member for 5-6 years
  • Contributed a Tutorial to a Tuts+ Site
  • Netherlands
  • Community Moderator
  • Envato Studio (Microlancer) Beta Tester
  • Sold between 10 000 and 50 000 dollars
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Exclusive Author
+4 more
Joost Volunteer 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
  • Beta Tester
  • Bought between 10 and 49 items
  • Community Moderator
  • Contributed a Blog Post
  • Contributed a Tutorial to a Tuts+ Site
  • Exclusive Author
  • Grew a moustache for the Envato Movember competition
+6 more
Reaper-Media Volunteer moderator 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
  • Beta Tester
  • Bought between 10 and 49 items
  • Community Moderator
  • Contributed a Blog Post
  • Contributed a Tutorial to a Tuts+ Site
  • Exclusive Author
  • Grew a moustache for the Envato Movember competition
+6 more
Reaper-Media Volunteer moderator says

Never mind… got it:

 $(this).find('ul')
4335 posts
  • Beta Tester
  • Bought between 10 and 49 items
  • Community Moderator
  • Contributed a Blog Post
  • Contributed a Tutorial to a Tuts+ Site
  • Exclusive Author
  • Grew a moustache for the Envato Movember competition
+6 more
Reaper-Media Volunteer moderator 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

8186 posts Community Moderator
  • Attended a Community Meetup
  • Community Moderator
  • Has been a member for 6-7 years
  • United Kingdom
  • Contributed a Tutorial to a Tuts+ Site
  • Won a Competition
  • Contributed a Blog Post
  • Beta Tester
  • Bought between 50 and 99 items
+4 more
MSFX Volunteer moderator says

the real answer?

use Flash :)

4335 posts
  • Beta Tester
  • Bought between 10 and 49 items
  • Community Moderator
  • Contributed a Blog Post
  • Contributed a Tutorial to a Tuts+ Site
  • Exclusive Author
  • Grew a moustache for the Envato Movember competition
+6 more
Reaper-Media Volunteer moderator 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
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 5-6 years
  • Referred between 1 and 9 users
  • Sold between 10 000 and 50 000 dollars
  • United States
blabus says
the real answer? use Flash :)

Flash is never the answer.

962 posts
  • Beta Tester
  • Bought between 10 and 49 items
  • Contributed a Tutorial to a Tuts+ Site
  • Exclusive Author
  • Grew a moustache for the Envato Movember competition
  • Has been a member for 5-6 years
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Sold between 1 000 and 5 000 dollars
  • United States
webdesigndeluxe says
the real answer? use Flash :)
Flash is never the answer.

Agreed :)

by
by
by
by
by
by