4335 posts
  • Has been part of the Envato Community for over 6 years
  • Has referred 1+ members
  • Has sold $1,000+ on Envato Market
  • Has been a beta tester for an Envato feature
+10 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
  • Has been part of the Envato Community for over 6 years
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
+2 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. :)

3788 posts Community Moderator
  • Helps us moderate the forums
  • Contributed a tutorial on Tuts+
  • Located in Netherlands
  • Made it to the Authors' Hall of Fame
+9 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
  • Has been part of the Envato Community for over 6 years
  • Has referred 1+ members
  • Has sold $1,000+ on Envato Market
  • Has been a beta tester for an Envato feature
+10 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
  • Has been part of the Envato Community for over 6 years
  • Has referred 1+ members
  • Has sold $1,000+ on Envato Market
  • Has been a beta tester for an Envato feature
+10 more
Reaper-Media says

Never mind… got it:

 $(this).find('ul')
4335 posts
  • Has been part of the Envato Community for over 6 years
  • Has referred 1+ members
  • Has sold $1,000+ on Envato Market
  • Has been a beta tester for an Envato feature
+10 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

8378 posts Community Moderator
  • Has referred 10+ members
  • Has sold $1,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Attended one of our Meetups around the world
+9 more
MSFX Moderator says

the real answer?

use Flash :)

4335 posts
  • Has been part of the Envato Community for over 6 years
  • Has referred 1+ members
  • Has sold $1,000+ on Envato Market
  • Has been a beta tester for an Envato feature
+10 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
  • Has been part of the Envato Community for over 6 years
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
+2 more
blabus says
the real answer? use Flash :)

Flash is never the answer.

962 posts
  • Has been part of the Envato Community for over 5 years
  • Has sold $1,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+5 more
webdesigndeluxe says
the real answer? use Flash :)
Flash is never the answer.

Agreed :)

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by