jQuery Navigation Examples

Category: CSS, Showcase    |    4,533 views    |    Add a Comment  |   

Horizontal Menu Navigation Plugins and Tutorials

Sproing! – Thumbnail MenuDemo
Sproing! is a plugin that creates an elastic effect for your navigation that magnifies the menu items when they are hovered over.

Jquery Menu33 in 45 jQuery Navigation Plugins and Tutorials

Cool Animated NavigationDemo
In this tutorial you’ll learn how to build a really cool animated navigation menu with background position animation using just CSS and jQuery.

Jquery Menu34 in 45 jQuery Navigation Plugins and Tutorials

jQuery File TreeDemo
jQuery File Tree is a configurable, Ajax file browser plugin for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code. Currently, server-side connector scripts are available for PHP, ASP, ASP.NET, JSP, and Lasso. If you’re a developer, you can easily make your own connector to work with your language of choice.

Jquery Menu36 in 45 jQuery Navigation Plugins and Tutorials

Creating a Floating HTML Menu Using jQuery and CSSDemo
For all of us who deal with long web pages and need to scroll to the top for the menu, this tutorial offers a nice alternative: floating menus that move as you scroll a page. This is built using HTML, CSS and jQuery, and it’s W3C-compliant.

Jquery Menu37 in 45 jQuery Navigation Plugins and Tutorials

BDC DrillDown Menu, an iPod-style menuDemo
A drill-down menu takes up constant space like an accordion menu but offers the deep hierarchy of a fly-out menu at the same time. Because of this, it not only features a small footprint but is also easier to navigate than a fly-out menu, where more mouse movement and accuracy are required.

Jquery Menu40 in 45 jQuery Navigation Plugins and Tutorials

jQuery Context Menu PluginDemo
The goal of this plugin was to streamline the way actions bind to menu items and to use 100% CSS for styling. Keyboard shortcuts have been added for navigation once the menu is opened, and there are five methods that will allow you to control and clean-up your context menu on the fly.

Jquery Menu41 in 45 jQuery Navigation Plugins and Tutorials

A ‘Mootools Homepage’ Inspired NavigationDemo
This tutorial takes you through the process of developing the menu that had previously been used on the homepage of MooTools, but with jQuery.

Jquery Menu42 in 45 jQuery Navigation Plugins and Tutorials Read more…

 

Best jQuery Tutorials and examples

Category: jquery    |    3,486 views    |    4 Comments  |   

The largest collection of jQuery examples and jQuery Tutorials on the web. Learn and master jQuery from scratch. jQuery is nice piece of code that provides very good support for ajax. jQuery can be used to develop highly interactive webapplications. In this jQuery tutorials series we will show you how to use jQuery to develop nice ajax based applications.

You will learn how to download install and then start working with jQuery. We have also provided the demo of jQuery application. You can visit our jQuery demo section to view the running jQuery example.

Learn jQuery and master it in no time.

  1. Introduction to jQuery
    jQuery is great library for developing ajax based application. jQuery is great library for the JavaScript programmers, which simplifies the development of web 2.0 applications.
  2. Downloading and installing jQuery
    In this section we will download and install jQuery for developing our demo application. jQuery comes as single js file. Read more…

     

How jQuery Works

Category: jquery    |    3,419 views    |    1 Comment  |   

jQuery: The Basics

This is a basic tutorial, designed to help you get started using jQuery. If you don’t have a test page setup yet, start by creating a new HTML page with the following contents:

<html>
  <head>
    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">

    </script>
  </head>
  <body>
    <a href="http://jquery.com/">jQuery</a>
  </body>
</html>

Edit the src attribute in the script tag to point to your copy of jquery.js. For example, if jquery.js is in the same directory as your HTML file, you can use:

 <script type="text/javascript" src="jquery.js"></script>

You can download your own copy of jQuery from the Downloading jQuery page.

Launching Code on Document Ready

The first thing that most Javascript programmers end up doing is adding some code to their program, similar to this:

 window.onload = function(){ alert("welcome"); }

Inside of which is the code that you want to run right when the page is loaded. Problematically, however, the Javascript code isn’t run until all images are finished downloading (this includes banner ads). The reason for using window.onload in the first place is that the HTML ‘document’ isn’t finished loading yet, when you first try to run your code. Read more…