Jquery Labs » Navigation

AutoAnchors jQuery Plugin

admin — Wed, 14 Jul 2010 11:00:46 +0000

A jQuery plugin that automatically creates an anchors navigation for certain elements (for example H2) inside a container element (div, body whatever …). It automatically generates the anchors and can even make them numbered. And the whole thing is of course fully styleable through CSS.

Demostration
Demo Page

Documentation
Documentation Page

Download
Download Source Code

Tags: Anchors, AutoAnchors, container, Content, Menu, Navigation

Drop-down Nav Menu

admin — Thu, 17 Jun 2010 09:00:12 +0000

How to Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery

In this tutorial, we’ll take a look and see what we can achieve with HTML5 and CSS3 when it comes to the staple of current web sites: the humble drop-down navigation menu. We’ll also use jQuery to handle the effects and add the finishing touches for us.”

Demostration
Demo Page

Tutorial
Tutorial Page

Download
Download Source Code

Tags: Code, Css, CSS3, Drop, Dropdown, Effect, Effects, Follow, Horizontal Menu, How To, Html, HTML5, Menu, Nav Menu, Navigation, nettuts, source, Touch, Tutorials, tutsplus

Creating a jQuery Dashboard

admin — Wed, 16 Jun 2010 14:12:01 +0000

The ‘Dashboard’ feature on a Mac looks great, and the menu allowing you to add/remove widgets is a well designed feature. A similar effect can add a whole new level of functionality to a website, providing a simple slide-down menu at the top of a page. This tutorial will walk you through the process from beginning to end.

Demostration
Demo Page

Tutorial
Tutorial Page

Download
Download Source Code

Tags: Admin, Board, Code, Dashboard, Design, designshack, Effect, Follow, Header, Hide, Mac, Menu, Navigation, Sign, Slide, Tutorials, Widgets

CSS Stack Menus

admin — Wed, 02 Jun 2010 11:00:46 +0000

navigation designs are based on borrowed ideas from operating system interfaces. With Webkit having taken a strong led on new CSS features for UI richness (with Mozilla and Opera quickly following), these new CSS features now allow the creation of CSS Stack Menus that are inspired on Mac OS X Stacks.

Demostration
Demo Page

Tutorial
Tutorial Page

Tags: Css, Cssplay, Design, File, Interface, Mac, Menu, moronicbajebus, Navigation, Rating, Round, Sign, Stack, Tutorials, UI

Fixed SideNav Layout

admin — Wed, 12 May 2010 11:00:13 +0000

Sticky (Fixed) SideNav Layout with CSS

Having a fixed sidenav comes in handy when dealing with blog style websites where the content is extremely tall and there is a need for good amount of scrolling. The fixed navigation allows the user to cruise through the content without scrolling back up to the top to navigate through the rest of the site.
Demostration

Demo Page

Tutorial
Tutorial Page

Tags: Blog, Content, Css, Deal, Design, designm, Fixed, Follow, Navigation, Scroll, Scrolling, Sidebar, Sign, sohtanaka, Sticky, Style, Tutorials, UI, User

Smooth Animated Menu

admin — Mon, 29 Mar 2010 11:00:59 +0000

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.

Demostration
Demo Page

Tutorial
Tutorial Page

Tags: Animated, buildinternet, Effect, Effects, Horizontal Menu, How To, Html, Menu, Navigation, Smooth, Tutorials, UI

A Different Top Navigation

admin — Thu, 25 Feb 2010 06:57:54 +0000

When designing a new site, web designers usually face the age-old question: vertical or horizontal navigation? There are pros and cons to both solutions. One example being horizontal navigation limits the number of links you can have due to a limited page width. This is usually solved by including a drop down system. However, if you are attempting to make your particular site stand out, you might consider thinking outside the “norm”.

Demostration
Demo Page

Tutorial
Tutorial Page

Download
Download Source Code (top-nav-demo.zip)

Tags: Ajax, Code, Design, Drop, Follow, Horizontal, Horizontal Menu, Html, JavaScript, Link, Load, Menu, Navigation, nettuts, Outside, Sign, source, Tutorials, tutsplus, Vertical

Outside the Box Navigation

admin — Sat, 13 Feb 2010 00:15:25 +0000

Outside the Box Navigation with jQuery

Just about every website uses the regular navigation concepts we’re all used to. After awhile this can get pretty boring, especially for designers who thrive on creativity. While mimicking the OS X dock and stacks isn’t new, it’s certainly not common.

Demostration
Demo Page

Tutorial
Tutorial Page

Download
Download Source

Tags: Ajax, Apple, Box, Design, File, Follow, Html, JavaScript, jQuery, Like, Load, Mac, Menu, Navigation, nettuts, Outside, Sign, source, Stack, Style, Tutorials, tutsplus

jQuery Pagination Plugin

admin — Mon, 01 Feb 2010 12:43:06 +0000

jQuery paginator is based on the jQuery Pagination plugin originally written by Gabriel Birke. For information, documentation and license please visit http://plugins.jquery.com/project/pagination

jQuery paginator plugin file already includes the required jQuery pagination plugin.

Demostration
Demo Page

Download
jquery_paginator.zip

Tags: File, Follow, Form, jQuery, Load, Myjquery, Navigation, Pagination, Php, Plugins, UI

Galleriffic jQuery Plugin

admin — Thu, 14 Jan 2010 11:58:34 +0000

A jQuery plugin for rendering rich, fast-performing photo galleries

Galleriffic is a jQuery plugin that has been optimized to handle high volumes of photos while conserving bandwidth. This feature rich and easily customizable plugin is fairly easy to install and with its image pre-loading, thumbnail navigation (with pagination) and its integration with the jQuery.history plugin (supports bookmark-friendly URLs per-image) it has become very popular.

Demostration
Demo Page

Download
Download Demo

Documentation
Documentation Page

Tags: Bookmark, Form, Galleriffic, Gallery, Html, image, Image Gallery, jQuery, Load, Navigation, Pagination, Photos, Plugins, Thumbnail

A jQuery Content Gallery Plugin

admin — Sat, 09 Jan 2010 13:11:23 +0000

GalleryView: A jQuery Content Gallery Plugin

GalleryView aims to provide jQuery users with a flexible, attractive content gallery that is both easy to implement and a snap to customize.

Demostration
Default Implementation
Small Filmstrip, alternate navigation theme
HTML panel content, no automatic transitions
Links in filmstrip frames
Custom navigation theme, filmstrip & captions above panel
Customized gallery background
Filmstrip only – Carousel style gallery
Panels Only – Lightbox style gallery

Tutorial
Tutorial Page

Tags: Attractive, Auto, Background, Box, Caption, Captions, Carousel, Content, Gallery, Html, Image Gallery, jQuery, Lightbox, Link, Navigation, Panel, Plugins, Polaroid, Round, spaceforaname, Style, Tutorials, User

Easy Slider Plugin

admin — Sat, 09 Jan 2010 12:11:47 +0000

Easy Slider 1.7 – Numeric Navigation jQuery Slider

Demostration
Continuous slide
Numeric navigation
Multiple slides

Download
easyslider1.7.zip

Tags: Banner, Css, cssglobe, easyslider, Html, jQuery, Load, Multiple, Navigation, Plugins, Slide, Slider

Pikachoose jQuery Image Gallery

admin — Sat, 02 Jan 2010 17:30:55 +0000

Pikachoose has been designed to be easily installed and easy to setup, perfect for any non-tech-savvy blogger. It is a lightweight jQuery plugin that allows you to easily present your photos with further options for slideshows, navigation buttons, and auto play.

Demostration
Demo Page

Download
Download Page

Doc
Documentation Page

Tags: Auto, Banner, Blog, Button, buttons, Design, Gallery, image, Image Gallery, jQuery, Load, Navigation, Photos, pikachoose, Plugins, Show, Sign, Slide, Slideshow

Outlook Navigation Bar

admin — Sun, 27 Dec 2009 21:48:10 +0000

Creating an Outlook Navigation Bar using the ListView and Accordion Controls

jMaxInput allows you to limit the input size of a textarea like it is done in Twitter. The number of characters left to type are shown while typing. The user can write as many characters as he wants (negative value is shown) but the text can only be submitted if the size of the input is below the limit (the button is active/inactive).

Example
Demo Page

Tutorial
Tutorial Page

Download
outlook_nav_bar.zip

Tags: Accordion, Blog, Button, Characters, Filter, Html, Input, Like, List, ListView, Load, Menu, Navigation, Outlook, Show, Text, Textarea, Tutorials, Twitter, User

Vimeo-like top navigation

admin — Sun, 27 Dec 2009 21:40:49 +0000

Create Vimeo-like top navigation

I really like the top navigation implemented on Vimeo.com. First time I saw it I wanted to recreate it. And this is exactly what I am going to do in this tutorial.

What I like the most is the menu that drops down when you hover search box. It offers you different search options that you can choose and narrow your search.

Example
Demo Page

Tutorial
Tutorial Page

Download
vimeo_navigation.zip

Tags: Box, Drop, File, Hover, jankoatwarpspeed, Like, Load, Menu, Navigation, Post, Time, Tutorials, Vimeo

Jquery Labs » Navigation

AutoAnchors jQuery Plugin

Related posts

Drop-down Nav Menu

How to Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery

Related posts

Creating a jQuery Dashboard

Related posts

CSS Stack Menus

Related posts

Fixed SideNav Layout

Sticky (Fixed) SideNav Layout with CSS

Related posts

Smooth Animated Menu

How to Make a Smooth Animated Menu with jQuery

Related posts

A Different Top Navigation

Related posts

Outside the Box Navigation

Outside the Box Navigation with jQuery

Related posts

jQuery Pagination Plugin

Related posts

Galleriffic jQuery Plugin

A jQuery plugin for rendering rich, fast-performing photo galleries

Related posts

A jQuery Content Gallery Plugin

GalleryView: A jQuery Content Gallery Plugin

Related posts

Easy Slider Plugin

Easy Slider 1.7 – Numeric Navigation jQuery Slider

Related posts

Pikachoose jQuery Image Gallery

Related posts

Outlook Navigation Bar

Creating an Outlook Navigation Bar using the ListView and Accordion Controls

Related posts

Vimeo-like top navigation

Create Vimeo-like top navigation

Related posts