23:45
Hello everyone. I hope you are enjoying the new look website and looking forward to the new content which is on the way. Today I have been experimenting with adding jQuery effects to navigations and links to create some pretty nice interfaces. I have written a brief description for each and included the various codes and files needed for each. You can download them all as part of a zip at the end.
If you like the navigation effects but would like some high quality graphics to use for them I suggest checking outGraphicRiver. They are a great resource for high quality web elements such as navigation graphics. Also CodeCanyonfor beautiful coded menus.
Slick Drop Down Menu
The below is a drop down navigation used in the Company Supreme template. The navigation first consists of two images to form the background for active and hovered links. It therefore uses the sliding doors techniques to accomplish this. The text is then changed to a custom font and a 1px drop shadow added thanks to Cufon. The drop down is then handled by some simple jQuery code and an easing animation added.
jQuery Link Fade
A very simple looking effect. Basically below is a link with a span inside containing the same text as the link. The span is position absolutely over the top of the link, obscuring the link background and text from view. Instead the text contained within the span and the span background are shown. Its then a simple case of adding a jQuery code to fade the span away to unveil the link background and text below.
jQuery Link Highlight Effect
The highlight effect is always something I had thought about. Just like in the previous link below is a link containing a span. The only difference in terms of HTML mark-up is the span is empty in this case. The span is positioned above the frame of the link. When we add overflow:hidden to the link the span is therefore hidden. All we then need to do is add some jQuery code to animate the span from above the link to below. This makes the highlight image (white gradient png) pass over the link background.
Combining Both
Now this is my favourite effect. It combines the previous two techniques. We first have the span with the slightly lightened image revealed on hover and the normal background for the link. We then add the highlight effect. Since we are using the span already we just change it to an and add it to the link as well. We make sure the duration for each animation is the same so it look in time and voilà .
Simple Effect (right to left)
The following two examples are very simple. They use the same principles as the previous highlighting effect. You have a span positioned absolutely beyond the area of the list item in this case. You then apply some jQuery to animate it across. In this example we have the span positioned beyond to the right then brought to its left. The span has a simple CSS background color.
Simple Effect (left to right)
The following is exactly the same as the previous except the text is aligned to the left and the span is moved from left to right.
Simple Effect (top to bottom)
This is a slight twist to the previous two examples. Instead of being positioned outside of the list item the span is just made to display:none using jQuery. Using the inbuilt slideDown feature we can reveal the span. I also applied a nice easing effect to make the animation a little nicer.
Experimental Fader
The effect could be improved a lot but I reckon it has potential. We first have a span position absolutely with the chequered pattern. This is faded in using jQuery. We also have a span with a solid background color equal to the checks on the pattern. This is also faded in using jQuery except at a slightly slower speed.
Experimental Animation
This is where my graphics skills hurt me. I reckon the effect is pretty nice, although much better in the hands of a great graphic designer. Again we use a span positioned above the link. It is then animated by jQuery down through the link background. The image has a darker gradient and is jagged to give the kind of splash of paint effect.
Experimental Shutter
Again I reckon this has potential to create some great navigations if people get inventive with the doors. You can basically have any two images move from either side to meet. They don't even have to meet in the center of the link. Some metal doors sliding together using PNG images could be great. Anyway the concept is again pretty simple. We have a span positioned outside left and and em positioned outside right. They are then animated into the center to meet.
Using jQuery not
I recently discovered quite how easy this technique is. Below is a fairly standard navigation using list items (no spans or extra code you will be glad to know). I have used Cufon to replace fonts again and add a text shadow but the main effect uses a jQuery "not" selector. We use it so when a list item is hovered over we find every list item in the same unordered list and reduce their opacity. Thus emphasising the link we have selected. Pretty neat effect.
3D Effect (Liquid)
Just having a bit of fun here. Effect isn't great but its super simple. We have a regular link with a background image and text with a CSS3 drop shadow as previous. I then added a thick border (7px in this case) to the bottom and right. I then made a couple 7px x 7px images to create the corners in the top right and bottom left to give the 3d effect, then positioned them absolutely (one a span and one a em). The good thing about this effect is it doesn't use any large images and the technique is completely fluid. For the hover effected (probably best suited on click instead of hover) I added quite a bit of jQuery code. Basically it makes the border smaller, pushes the actual button down and to right, reduces the width and height of the corner images and also reduced the amount they are moved positionally. Also to prevent the other links moving to the left the margin to the right is slightly increased to make up for the lower border to the right.
Bullet Fade and Link Nudging
Again this uses the same concepts as previous. We have an unordered list with various links. The rounded corners are created using the new CSS3 attribute. Each link has a blue bullet image to the left. There is then a span with the green bullet image placed absolutely over the top. When the link is hovered jQuery fades the span away to reveal the blue bullet below. I also added some extra padding to the text when the link is hovered to give the nudging effect.
Conclusion
Some of these may not be very practical but I hope you enjoyed reading and can find a use for them. You can download a full zip containing each navigation with the various required scripts for each here. If you enjoyed the article please leave a comment or consider retweeting if you have twitter. Also for those who have twitter I am taking requests. Leave me a message on twitter or for those who don't have twitter leave a comment with what you would like to be added.
No comments
Post a Comment