CSS Menu with visual effect powered by jQuery. Javascript is used for effects only. Full cross-browser compatibility including IE6. Effects: smooth fade animation on mouse over and unfold submenu appearance. Easy-to-setup: simple nested unordered list for menu items with unlimited levels.
Best jQuery CSS2 / CSS3.0 Plugins & Tutorials with Demo
Lateral On-Scroll Sliding with jQuery
After getting the request, we are going to show you how to create a “slide-in on scroll” jQuery effect. You’ve probably seen this cool effect on some websites, like on Nizo or in the portfolio section of brilliantly designed La Moulade. The main idea is to laterally slide in elements depending on the scroll position of the document. Dividing the page into a left and right side, we want to move the elements from “outside” of the page to the center when they are in the viewport. We will also add the option to move the elements in 3D space.
The theme of today’s tutorial is going to be a timeline where we will have some circular elements on one side and the descriptions on the other. We’ll be alternating the sides to create a random look.
jQuery contextMenu
The jQuery contextMenu Plugin was designed for web applications in need of menus on a possibly large amount of objects. Unlike implementations as a beautiful site’s or trendskitchens’ this contextMenu treats the menu as the primary object. That means, that a single menu is defined that can be used by multiple objects. Unlike the mentioned plugins, contextMenu doesn’t need to bind itself to triggering objects. This allows injecting and removing triggers without having to re-initialize or update contextMenu.
Multi Level Hierarchical jQuery Menu: jQSimpleMenu
As your website grows, so does the need for better navigation and sometimes the navigation becomes the driving force for better user experience. jQSimpleMenu is a multi-level hierarchical jQuery drop down menu that helps you add drop down menu in your website without writing a single line of code.
Typography Effects with CSS3 and jQuery
Today we will create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things we can do with CSS3 animations and transitions and we’ll explore some of the possibilites.
We’ll be using Lettering.js in order to style single letters of the words we’ll be having in our big headlines.
How to Create a Time Based CSS Style Sheet Switcher with jQuery
Style switchers have become a popular feature on websites these days. CSS style sheets allow a Web Designer to change the look and feel of a website with little effort. Some sites use “Day” and “Night” type of style switchers that automatically change the site theme based on the time of day.
This tutorial shows you how to create a time based CSS style sheet switcher using PHP that lets you change multiple style sheets at once at specific times of the day. There’s also a little bit of jQuery UI thrown in just for fun!
Animated Rocket with jQuery and CSS transform
The examples on this page will work properly in Safari, Chrome and Opera. In the Firefox prior to version 4 you will see the transforms, but without any animation. Some effects may also work now in Internet Explorer 9 if you use the -ms- vendor prefix.
The implementation of animation in CSS involves setting up a transformation to take place in response to a mouseover or other event. Then, rather than applying the effect instantly, we assign a transition timing function which applies the transformation/s over a set time period.
