|Nice Menu : CSS Animation & jQuery Animate|
joomla template, virtuemart, phpBB styles, virtuemart, drupal theme, virtuemart, phpBB styles, virtuemart, mootools, virtuemart, phpBB styles, virtuemart, drupal theme, virtuemart, phpBB styles, virtuemart, jQuery, virtuemart, phpBB styles, virtuemart, drupal theme, virtuemart, phpBB styles, virtuemart, mootools, virtuemart, phpBB styles, virtuemart, drupal theme, virtuemart, phpBB styles, virtuemart
Expressjs has a nice button menu. Yes it absolutely nice since it has opacity and box shadow on each button, automatically widen when mouseover and again opacity to transparent when mousedown. I’d like to explain how they works with pure CSS version and jQuery version.
There are two techniques we want to do, opacity and widen the button. Opacity is an effortless technique since it was supported by CSS while widening the button is only CSS technique by increasing the button’s current padding with some pixels number. So, when the user mouseover the button we will add its padding to make it wide and decrease the button’s opacity when user click it.
Now based on the technique above we’ll create these button using pure CSS. First we create the button list using unordered list and then we set its style. Set the list’s display with inline, fill its background color with black and opacity with 20% (CSS value : 0.2), add box-shadow and set its border-radius into 15px to make it rounded. For opacity on background color we will use rgba().
When user mouseover the button we’ll adding its padding and increase its opacity into 50% (CSS value : 0.5) and when user click it we decrease its opacity into 10% (CSS value : 0.1).
Until above step we’ve a list of nice buttons but since they don’t have animation with them, the opacity transition and widening effects will not seen. So we’ll add the animation effect into each button, in this example each button represented by anchor element () it means we’ll put the animation on anchor style.
webkit for Webkit-based browser and -moz for Mozilla-based browser. The trasition-duration represent how long the transition should last and transition-timing-function represent how the animation will proceed over time. On the CSS above we just create the animation in 0.20 seconds with ease-out function.
These step will add animation into any style changes and make them animate. For example the anchor has property width with value 20px and the anchor has different style when user hover it (ie : width: 40px), the width changes from 20px to 40px will be animated.
Since -webkit-transition has supported by latest Webkit-based browser including Safari and Chrome, Our pure CSS menu with animation above will works perfectly. Unfortunately -moz-transition will be introduced on Firefox 3.7 (Gecko 1.9.3) so the animation will not works on latest Firefox.
For a while Browser issue was disrupt our pure CSS menu, but of course we won’t stop to make it works. Using jQuery we can replace the CSS animation with $.animate() function. Surely with $.animate() function we just need to specify the pixels number for increasing the button’s padding.
For button opacity we can’t use opacity property in $.animate() function because it will make our button and text transparent. Since we just need to make the button (background) transparent we need $.animate() property that support rgba, we can use Mehdi Kabab’s plugin which is modification (to support rgba) from John Resig’s background color plugin.
If the user mouseover the button, we set its default padding and animate it by increasing its padding and opacity and when mouseout we revert to the default CSS value. When user click (mousedown) the button we decrease the opacity into 10% and revert to 50% when mouseup the button.
CSS3 offers us many advantages but sometimes we can’t take that advantages due to browser support, thankfully for jQuery offers us the alternative.
- The Simplest jQuery Tooltip Ever
- Image Preview Gallery
- Links With URL Preview
- Animated Navigation Menu From Stratch jQuery
- Simple CSS3 Dropdown Menu
- Simple unlimited levels vertical drop
- Beautiful red vertical glide navigation menu jquery plugin
- jQuery Menu: Dropdown
- DropDown CSS Menu
- slide extra content or a navigation tool(jQuery )
Recommended Web Hosting For Bloggers and Designers
I recoomended Webhostings for Bloggers and Designers because I am freelancer, working with thousand clients in the worlds. Most of them will use those hosts.
- Fast, Reliable, Affordable
- 100% Satisfaction Guarantee
- And More...