background preloader

How to Make a Smooth Animated Menu with jQuery

How to Make a Smooth Animated Menu with jQuery
Ever seen some excellent jQuery navigation that left you wanting to make one of your own? Today we’ll aim to do just that by building a menu and animate it with some smooth effects. The Goal – One Smooth Menu Here’s a demo of what we’ll end up with by the end. Introduction – An explanation of easing The menu has such a smooth animation because of a thing called “easing”. “The term easing refers to gradual acceleration or deceleration during an animation, which helps your animations appear more realistic. Thanks to the magic of the jQuery Easing plugin, we can now use easing outside of Flash and Actionscript environments. Step 1 – Set up the Structure Before starting with any jQuery, we’ve got to build a quick menu structure with XHTML and load in the required project files. Nothing out of the ordinary here. Then copy in this menu structure into the body: Menu items have a class assigned to it that will designate the color of the block. Step 3 – Style with CSS Step 4 – Animate with jQuery Related:  JQuery

jQuery quickie: Slot machine style navigation Navigation is one of the things you'll see on every website. I wanted to give this part a little bit extra life, and when I saw a movie yesterday that included slot machines, it suddenly hit me. Using jQuery and some basic CSS and HTML, we could add some sweet slot machine style animation to a normally boring kind of navigation. Since it's not such an advanced technique, this is also a jQuery quickie. Already wondering how it works? As usual, we want to keep our HTML as short and clean as possible. <ul id="jquerynav" class="navigation"><li><a href="#" class="marcofolio">Marcofolio.net</a></li><li><a href="#" class="rss">RSS</a></li><li><a href="#" class="twitter">Twitter</a></li><li><a href="#" class="jquery">jQuery</a></li></ul> Take note of the different class and id attributes we need to use. This is all the HTML we need to make this example work. Although the CSS isn't very spectacular, there is something that is the actual key to make this technique work. jQuery That's about it!

Quick Tip: Prevent Animation Queue Buildup You've probably stumbled upon a navigation powered by some jQuery effects during your web adventures. Of course you then ran your mouse back and forth over the navigation really fast to watch the animation repeat itself over and over and over again. The natural queuing of animations/effects by jQuery makes the typical animation super easy to code and move on to more important tasks. However, sometimes the animation queue just gets in the way. Here is an example of a navigation that has some effects applied to it via jQuery. Here is the JavaScript that does the effect for the menu: JavaScript: Now let's look at how we can prevent this undesirable behavior. $(document).ready(function(){ $('ul.anim_queue_example2 a') }, function() { });}); Here is the navigation again, using the above JavaScript. As you can see, the animation is no longer queued up by moving your mouse back and forth over the menu items. For more information about the .stop() method, visit the jQuery documentation page.

30+Beautiful jQuery Menu Navigation - jQuery Menu In this showcasing, we have pick up beautiful jquery menu navigation plugins and tutorials that you can also download free. In fact, menu is useful navigation link that you will see on every websites, it is an important part of website to show visitor about your website purpose and also easy for user to find information on the website. All those jquery plugin menu types such as jquery slide menu, jquery vertical menu, jquery menu dropdown, jquery context menu, jquery sliding menu, jquery tree menu, jquery menu button, jquery top menu, jquery menus, jquery menu bar, jquery floating menu, jquery accordion menu, jquery horizontal menu, jquery expanding menu, jquery hover menu, jquery popup menu…etc. You may like this post: jQuery Mouseover Effects 3-Level Responsive Drop Down Navigation Menu with jQuery CSS3 Demo Tutorial Drop Down Responsive Menu with CSS3 and jQuery Demo Tutorial Responsive Drop Down Menu jQuery CSS3 Using Icon Symbol Demo Tutorial jQuery Over Animation Menu Demo | Download Demo

jQuery | ilovecolors - Part 2 14Jul in jQuery Using cookies with jQuery Cookies aren’t just tasty and chocolate-flavoured. They can also store useful information for your users to have a better experience on your site. Tags: tutorials 12May How to avoid double clicking with jQuery There has been always one troubling issue regarding web forms and user interaction: when the user double clicks the submit button. Read more Tags: javascript 5May How to create a jQuery plugin One of the fundamental principles of programming is encapsulation and reuse. Read more Tags: plugin, tutorials 28Apr Using jQuery to pick up where CSS leaves off In the following lecture by Chris Coyier, he gives a beautiful, and funny (which is great), introduction to jQuery and explaining how to benefit from including it in our workflow with HTML and CSS. Tags: resources 20Apr jQuery file upload: Uploadify Looking for a file uploading solution to integrate on a WordPress admin I stumbled upon the incredible jQuery file upload plugin Uploadify. Read more 10Feb 30Jan

A Colorful Clock With CSS & jQuery Martin Angelov The first wave of Christmas holidays passed and we are looking forward to New Year’s Eve for a fresh start at all those things we failed to do the last 12 months. And in the mood of the upcoming holiday, this week we are going to make a colorful jQuery & CSS clock, which will help you keep track of those precious last seconds of the year. This is also the first tutorial that features our first very own jQuery plug-in – tzineClock (soon to be released officially in a post of its own). Go ahead, download the demo files and continue with step one. Step 1 – XHTML As usual, we start with the XHTML markup. This saves us from having to manually type similar blocks of code for each one of the dials (there are three of them, one for the hours, the minutes and the seconds). Lets take a look at the XHTML that is inserted by jQuery: jquery.tzineClock.js This code is contained in jquery.tzineClock/jquery.tzineClock.js. Lets continue with the next step. A Colorful jQuery & CSS Clock Step 2 – CSS

A jQuery inline form validation, because validation is a mess « When it comes to form validation, it’s hard to have a versatile solution that works with every form. Figuring out how to display errors is not a simple task. This is something I tried to remedy with this script. When an error needs to be displayed, the script creates a div and positions it in the top right corner of the input. This way you don’t have to worry about your HTML form structure. Download the source code View demo Validations range from email, phone, url to more complex calls such as ajax processing. **Important**: v2 is a significant rewrite of the original 1.7 branch. Legacy 1.7 documentation and download can be found under package when you hit download on github Installation 1. Running the Demos Most demos are functional by opening their respective HTML file. 1. References First link jQuery to the page Attach *jquery.validationEngine* and its locale Finally link the desired theme Field validations Validations are defined using the field’s **class** attribute. Instantiation Actions

Online Ticket Booking System using ASP.NET In my previous post, I explained how to implement seat reservation with jQuery. In this post, you will see how to use it in ASP.NET project to save and retrieve data from database. It can be used in online Bus, flight, hotel, exam support, cinema and ticket booking system. DB Structure: There are two tables: BookingDetail Table: Seat owner information SeatDetail Table: To save booked seats information. Setup Entity Data Model: First Create database and stored proc as mentioned above. Right click on Project > Add New Item > Select ADO.NET Entity Data Model >(name: Model.edmx) > Add Select “Generate from database” > Next > Select Database >(save entity connection string…: StarBusEntities1)> Next Select Both tables and Stored proc > (Model Namespace: StarBusModel) > Finish You will get the above db structure – screen shot and get tables in edmx file. Now Right click on SeatDetail > Stored Procedure Mapping Now save it. Display Booked Seat: Add new page and use code from my previous article.

Making A Cool Login System With PHP, MySQL & jQuery Martin Angelov Introduction Today we are making a cool & simple login / registration system. It will give you the ability to easily create a member-only area on your site and provide an easy registration process. It is going to be PHP driven and store all the registrations into a MySQL database. To add the needed flair, we are using the amazing sliding jQuery panel, developed by Web-kreation. Step 1 – MySQL First we have to create the table that will hold all the registrations. table.sql CREATE TABLE `tz_members` ( `id` int(11) NOT NULL auto_increment, `usr` varchar(32) collate utf8_unicode_ci NOT NULL default '', `pass` varchar(32) collate utf8_unicode_ci NOT NULL default '', `email` varchar(255) collate utf8_unicode_ci NOT NULL default '', `regIP` varchar(15) collate utf8_unicode_ci NOT NULL default '', `dt` datetime NOT NULL default '0000-00-00 00:00:00', PRIMARY KEY (`id`), UNIQUE KEY `usr` (`usr`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci; Step 2 – XHTML demo.php demo.css

Related: