[Tassadar]

Okay, so I have been trying to figure this out for awhile and have something that kind of works but I know it can be done better and cleaner than what I have now. So the navigation panel for my site drops from the top and what I want on mouse over the button to kind of slide down, not a menu, just to kind of drop. My current method is I have a couple of empty <li>s that are set to hide then I use slideDown() to make the effect. Anyone know of a way to do it? Thanks in advance!

[Martyr2]

Do you have a URL we can take a look at of what you currently have? Rarely does describing a visual concept work. If we can see something to put your question into context it would be nice.

This post has been edited by Martyr2: 22 June 2013 - 12:56 PM

[Tassadar]

Martyr2, on 22 June 2013 - 11:56 AM, said:

Do you have a URL we can take a look at of what you currently have? Rarely does describing a visual concept work. If we can see something to put your question into context it would be nice. />

Godaddy is being a jerk. Images instead of the idea.


It doesn't create the effect I want, I would like it to be one element. I hope that gives you an idea.

[Martyr2]

Are you talking about something like this?

http://jsfiddle.net/kaRJp/

If that is what you are looking for, you can see the code I used to create it there. Standard hover effect where I move the current element down. Key pieces are:

1) Elements are positioned relatively
2) hover event moves the element down X pixels on hover and back up X pixels when hover is removed
3) Height and padding should be taken into consideration when moving the element

Hope this is what you were looking to do.

[Tassadar]

Martyr2, on 22 June 2013 - 02:46 PM, said:

Are you talking about something like this?

http://jsfiddle.net/kaRJp/

If that is what you are looking for, you can see the code I used to create it there. Standard hover effect where I move the current element down. Key pieces are:

1) Elements are positioned relatively
2) hover event moves the element down X pixels on hover and back up X pixels when hover is removed
3) Height and padding should be taken into consideration when moving the element

Hope this is what you were looking to do. />

Similar yes but I'm basically looking for the element to extend down with the text with it. I don't know if this is a good example but kind of like pulling a ribbon.

[Martyr2]

Well building on the previous example we have come up with something like this which might be a bit similar.

http://jsfiddle.net/kaRJp/1/

Hopefully it is closer and at least should be close enough to what you want for you to take it from there. I see from the example that the letters appear to move with the new slide out color, but if you play around with a few elements and their z-index I am sure you can get that refinement. You can use the code I have given as a base for that.

This post has been edited by Martyr2: 22 June 2013 - 05:26 PM

[Tassadar]

Yes this exactly! The code all looks pretty simple, I guess it just goes to show that I am extremely new to JQuery. You sir are amazing. I didn't think about creating another box underneath it.

Thank you so much!

This post has been edited by Tassadar: 22 June 2013 - 05:38 PM

[Martyr2]

I will try...

So what we have done is created three list elements in an unordered list (<ul> tag). For each list item we stylized it to be floated to the left so they ride up next to one another horizontally and made them block with a background color. In each list item we created a relative span which is going to move in relation to the <li>. We gave it the different color. So when jQuery tells it to move down, it is going to move down in relation to the parent <li>.

The jQuery is relatively simple as you can see. Here we are saying that when a <li> element is hovered on, kick off a function that is first going to get the triggered list item, then search for the span tag inside it. This is the element we need to animate. So we animate it so that it moves the element down by a certain number of pixels. We chose to use the height of the span, but you could have used any size you like. By increasing the value of its "top" style we move the element down. When we stop hovering over it, it is going to kick off the other function which will animate the element to move its "top" element back to zero.

We have one hover function for the list item which contains two other functions. The first controls what happens on the hover, the other when the hover is gone. Each piece has an animation in it that simply manipulates the element's top property. We can do this because the span tags have been set to have a position which is relative. If we hadn't done this, we would not be able to animate the top property.

Hope that helps.

[Tassadar]

It does, now I just have to take your base code with your permission of course and tweak it to see if I can add a few things like the current page being left down and a background color change on mouseover. Thanks again, you've very helpful.