Posts Tagged ‘ mootools ’

Some fantastic Navigation menu Plugin

1. Halftone Navigation Menu – jQuery And CSS3
In this tutorial you will learn how to make a CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.
View Demo

2. Elastic Thumbnail Menu – jQuery And CSS
In this tutorial Sam Dunn will learn you how to make an elastic thumbnail menu. The menu magnifies menu items when they are hovered over and the menu items expand upwards.
View Demo

3. Filterable Portfolio with jQuery
In this tutorial, Trevor Davis, a 25 year old front-end developer, will show you how to make “filtering by category” a little more interesting with just a little bit of jQuery.
View Demo

4. jQuery ListNav Plugin
This jQuery plugin supplies an easy way to unobtrusively add a letter-based navigation widget to any UL or OL list. An easily stylable nav bar appears above the list, showing the user the letters A-through-Z. Clicking one of the letters filters the list to show only the items in the list that start with that letter.
View Demo

5. Ext Accordion
The Accordion widget and its InfoPanel are components that use the Ext JS Library. It can be used for page navigation, tool windows, hide-able details, log-in forms, options dialogs, sticky notes and more.
View Demo

6. Fresh Content Accordion
A simple, yet very eye-catching accordion with the help of CSS, jQuery and the easing plug-in for some fancy effects.
View Demo

7. Yetii – Yet (E)Another JavaScript Tab Interface
Yetii is a functional tab interface implementation. It has lightweight, object-oriented code and degrades gracefully in browsers without JavaScript-support. You can have many independent tab interfaces on a single page, specify initial tab, turn on automatic tabs rotation, add next/previous navigation, nest one tab interface inside another and define custom function to run after certain tab is clicked.
View Demo

8. Apple Style Menu Improved With jQuery
How to create a similar main navigation like the one of kriesi.at – a so called kwicks menu. Build an Apple-flavored Leopard-text-indent style menu from scratch in Photoshop, then create the needed HTML and CSS and last but not least improve it via jQuery.
View Demo

9. Jquery Fade In And Fade Out
A fade in fade out effect – the effect fades an element to 30% on arrival of the website, then when you hover over it, it fades to 100%. The effect can be assigned to basically anything in a website whatever it be an image, text, a link or even a div.
View Demo

10. Mootools Navigation Plugin
The goal of this plugin is to create a complex navigation menu as seamless as possible. All you need to do is create a standard unordered list and the plugin will do the rest.
View Demo

11. Morph Effect On Mouseenter And Mouseleave With Mootools 1.2
In this tutorial, you will see how to add some amazing effects to an unordered list on mouseover with the Element Method: morph and to make the whole list item region clickable with Mootools – and turn it into something fun to click.
View Demo

12. jPaginate – Fancy jQuery Pagination Plugin
jPaginate is a jQuery pagination plugin that comes with a twist: animated page numbers. The user can slide through the available page numbers by clicking or just hovering over the arrows. Shortlinks to the first and last page are available as well.
View Demo

13. Clickable Table Row
If an HTML table row contains only one <a> link, it can be useful to make the entire row clickable and make it activate that link. This tutorial shows how to make the entire row clickable so that clicking anywhere in the row is the same as clicking that link.
View Demo

14. Sliding Boxes And Captions With JQuery
All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through.
View Demo

15. Accordion And Hover Effects With JQuery
This tutorial video (QuickTime version is 60Mb – flash version is streaming) explains how the accordion and hover effects on Tim Van Damme’s site can be achieved using jQuery.
View Demo

16. Thumbnail Hover Effect Using Mootools
Image is splitting in the middle using two instances of the same image. One instance goes toward left while second image goes right, in effect giving an illusion that image is splitting in middle.
View Demo

17. Outside The Box – Navigation
Just about every website uses the regular navigation concepts we’re all used to. After a while 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.
View Demo

18. MooTools ScrollSidebar
ScrollSidebar allows you to attach an element to a place on the screen and animate the menu to the current scroll position.
View Demo

19. Icons To External Links
A trend going on around on websites is putting icons on links that point to web pages externally. If you want that on your site, this simple script will dynamically take care of that for you with the help of Mootools and some CSS.
View Demo

20. Powerful Product Highlighter With MooTools
This tutorial will help you to create a flexible tool for highlighting your sites products or services using the MooTools JavaScript framework – a clever rollover mechanism that works well as a product highlighter.
View Demo

21. Scrolling To The Top And Bottom – jQuery
Scrolling to the Top and Bottom of your website with a simple click with the help of jQuery special scroll events from James Padolsey, and some few extra lines of jQuery.
View Demo

22. Mootools 1.2 cvLinkSelect Class
This class links the select boxes to each other. When you change the first select element the options for the following select boxes are loaded.
View Demo