google

Google Charts Gallery – HTML5/SVG


Display live data on your site

Google chart tools are powerful, simple to use, and free. Try out our rich gallery of interactive charts and data tools.

Charts Gallery

Our gallery provides a variety of charts that are optimized to address your data visualization needs. These charts are based on pure HTML5/SVG technology (adopting VML for old IE versions), so no plugins are required. Adding these charts to your page can be done in a few simple steps.

Note that charts that were contributed by the community and comply with the DataTable protocol can be found on the Additional Charts page.

 

Google Chart

Google Chart

 

SITE:  https://google-developers.appspot.com/chart/

5 alternativas gratuitas a Dreamweaver


En los comentarios de nuestro reciente curso de HTML para principiantes, muchas personas expresaron su descontento con Adobe Dreamweaver, el programa que permite traducir en código HTML, entre otros, el diseño de una página web, acompañado de un editor WYSIWYG. Sin mencionar que no es el mejor programa del mercado –aunque sí el más popular-, si queremos hacer las cosas por derecha y comprar Dreamweaver, vamos a tener que hacer un desembolso interesante de dinero. Por eso, por sus sugerencias y por las necesidades de los usuarios, hoy vamos a contarles sobre 5 alternativas gratuitas a Dreamweaver.

BlueFish

Diseñado especialmente para desarrolladores web y programadores, BlueFish ofrece una variedad de opciones para escribir el código de sitios, acompañado de otros scripts. Tiene soporte para varios lenguajes, entre los cuales se cuentan HTML, C, C++, HTML5, y más. También tiene soporte para varios lenguajes de markup. Es un editor muy liviano –y por ende, transportable en dispositivos como pendrives con su instalador, o también para subir en la nube- y tiene un arranque rápido para no perder tiempo.

También cuenta con soporte para FTP, SFTP y más. Un detalle que tiene es que cuenta con un corrector de textos que puede discernir entre código y texto, sin marcar correcciones en los trozos de código que estemos escribiendo. Es además muy personalizable, por lo que se puede adaptar a los gustos de cada uno. Finalmente, al ser un desarrollo open source, es completamente gratuito.

Amaya

Amaya es un cliente que nos permite desarrollar páginas web, pero también navegarlas. Esto es fundamental para testear la usabilidad de una determinada página web que estamos desarrollando o supervisando. El programa puede usarse para crear las páginas y subirlas a un servidor, además de contar con una interfaz muy simple que no requiere demasiados conocimientos –aunque sí requiere obviamente que tengamos un conocimiento básico en el desarrollo de páginas web-. La ventaja con la que cuenta este programa es que podemos tanto crear como navegar.

También permite la edición múltiple de documentos de diferentes formatos, como puede ser XHTML, XML, SVG, y más. Las funcionalidades de edición de Amaya nos permiten crear hipervínculos fácilmente, y en este sentido se asemeja más a Dreamweaver –en el sentido en que puede ser más accesible. También es completamente gratuito, con el aval de la W3. De hecho, lo podemos descargar desde su página oficial.

First Page

Desarrollado por la compañía Evrsoft, se trata de un editor web completamente gratuito de HTML, que nos permite mejorar el código que hayamos previamente desarrollado. Tiene una facilidad de uso interesante, y también es un programa bastante veloz, en comparación con el tiempo de arranque que tienen otros programas como Dreamweaver. Los autores de First Page se jactan de poder atraer tanto a principiantes del mundo HTML como a los verdaderos expertos, y por lo que podemos ver –considerando que se trata de una opción gratuita- están cerca de la verdad.

Con First Page podremos acceder a archivos locales y remotos, insertar y convertir archivos, seleccionar etiquetas de una base de datos, personalizar de acuerdo a estilos CSS, y también personalizar la forma en la que vemos las etiquetas. Así podemos ver cómo nos otorga más opciones de personalización que Dreamweaver, que tiene opciones similares. Se puede previsualizar el trabajo en hasta 4 navegadores diferentes, escribir en una página Split (viendo el diseño y el código al mismo tiempo) y más.

Aptana Studio

Aptana es una de las opciones más populares para crear páginas web que se encuentran en internet. Es una suite poderosa que nos da varias opciones, por lo que no tenemos que quedarnos simplemente con escribir el código y previsualizarlo. Es un servicio gratuito, que luego se puede actualizar a una versión profesional –y de pago- que agrega algunas funcionalidades más.

Aptana cuenta con soporte para Ajax, HTML, CSS, DOM, y más, y también se pueden descargar plugins para trabajar en el desarrollo de proyectos con Adobe AIR y de iPhone. También puede ser usado por desarrolladores PHP. Para los más principiantes, cuenta con un asistente para crear webs, y además un poderoso debugger integrado para solucionar potenciales errores.

Kompozer

Para cerrar con nuestra lista, recomendamos Kompozer, otro servicio gratuito para crear páginas web que es similar a Dreamweaver. Con Kompozer podemos contar con un  manager de FTP, un picker de colores para pasar a hexadecimal, un editor de CSS, barras de tareas que pueden ser personalizadas para incrementar la productividad, marcadores, y un corrector de ortografía automatizado que, como otras de estas herramientas, pueden ser diferenciados de las etiquetas.

Otro de los aspectos interesantes de Kompozer es que está Powered by Mozilla, así que lo tenemos avalado por los que nos trajeros Firefox y Thunderbird, entre otras cosas. Cuenta con un editor de texto WYSIWYG, y con soporte para trabajar en páginas múltiples. Finalmente, cuenta con un buen editor de CSS para concentrarnos en los aspectos de diseño de la página.

refer.ly – Ganar dinero en Internet recomendando


Con bastante frecuencia realizamos recomendaciones de productos y servicios en Internet, muchas veces de sitios de comercio electrónico que tienen un programa de afiliados que, por desconocimiento o por falta de tiempo, no aprovechamos para ganar unas monedas.

Cuando una tienda online ofrece un programa de afiliados hay que prepararse para rellenar formularios, recordar contraseñas, realizar indicaciones usando la plataforma… son varios pasos para cada sitio, algo que puede hacernos invertir un tiempo mucho mayor al deseado.

Refer.ly nace para que no tengamos que preocuparnos por este tema. Cuando veamos un producto que queremos recomendar, creamos una url única con nuestra cuenta en el sistema y la compartimos, sea del sitio que sea. Ellos se encargan de rastrear la compra realizada a través de dicha dirección y de sumar las cantidades en cada tienda. Cuando lleguemos a 10 dólares en cualquiera de ellas, podremos retirar la cantidad guardada.

Dispone de bookmarklet para generar nuestra dirección personalizada de forma automática, guardándose en la sección de administración para que podamos conocer el estado de cada recomendación de forma independiente.

Una buena idea que, cuando vaya creciendo, puede hacerse imprescindible.

Link: Refer.ly | Vía TC

By: http://wwwhatsnew.com

tips

Herramientas para creación de prototipos y wireframes


En el mundo del diseño web, un wireframe es una representación esquemática de una página web, sin elementos gráficos que muestren contenido. Son realmente útiles como herramientas de comunicación entre programadores, diseñadores y clientes.

Aquí os dejo una lista de aplicaciones que podéis usar para realizar este tipo de dibujos, lista publicada en spyrestudios.com. Por desgracia no todas son gratuitas, con lo que tendréis que poner los pros y contras de cada opción antes de tomar una decisión.

Hot Gloo

Opción en flash, muy sencilla de usar y con cuenta gratuita que no permite el trabajo en grupo.

Mockingbird

Permite realizar los wireframes de forma sencilla y dispone de la opción para compartir los resultados con otras personas.

Pencil Project

Una extensión de Firefox muy útil para quien realiza este tipo de trabajos

ProtoShare

Muy fácil de usar y con mucho trabajo para diseñar. Tienen una versión de prueba de 30 días.

Balsamiq

Nos permite trabajar como si estuviéramos dibujando con lápiz y papel, con lo que es ideal apra los que vienen del mundo clásico.

Flair Builder

Con una paleta de funciones y mucho espacio para trabajar. Es una de las más populares.

Cacoo

Permite hacer diagramas de prácticamente cualquier cosa, con posibilidad de enviar el resultado por email.

Serena: Prototype Composer

Herramienta de creación de prototipos especialmente diseñada para quien trabaja para proyectos web.

MockFlow

Con una amplia biblioteca de componentes y plantillas listas para usar. las versiones premium incluyen más opciones de este tipo.

fluidIA

Una plataforma que permite a los desarrolladores construir un sistema de dibujo de prototipos de forma colaborativa.

Lumzy

Nos permite dibujar a mano o incluir componente diseñados previamente.

GUI Studio Design

Una herramienta muy completa para el diseño de software en general.

iPlotz

Permite crear wireframes dinámicos para poder simular la actividad del programa.

OmniGraffle

Integrado con Visio, permite hacer diseños realmente sorprendentes.

By: http://wwwhatsnew.com

 

240 plugins para jquery


Subir imágenes

Ajax File Upload.
jQUploader.
Multiple File Upload plugin.
jQuery File Style.
Styling an input type file.
Progress Bar Plugin.

Validación de formularios

jQuery Validation.
Auto Help.
Simple jQuery form validation.
jQuery XAV – form validations.
jQuery AlphaNumeric.
Masked Input.
TypeWatch Plugin.
Text limiter for form fields.
Ajax Username Check with jQuery.

Formularios – Cajas de selección

jQuery Combobox.
jQuery controlled dependent (or Cascadign) Select List.
Multiple Selects.
Select box manipulation.
Select Combo Plugin.
jQuery – LinkedSelect
Auto-populate multiple select boxes.
Choose Plugin (Select Replacement).

Formularios básicos, campos de entrada, Checkboxes etc.

jQuery Form Plugin.
jQuery-Form.
jLook Nice Forms.
jNice.
Ping Plugin.
Toggle Form Text.
ToggleVal.
jQuery Field Plugin.
jQuery Form’n Field plugin.
jQuery Checkbox manipulation.
jTagging.
jQuery labelcheck.
Overlabel.
3 state radio buttons.
ShiftCheckbox jQuery Plugin.
Watermark Input.
jQuery Checkbox (checkboxes with imags).
jQuery SpinButton Control.
jQuery Ajax Form Builder.
jQuery Focus Fields.
jQuery Time Entry.

Hora, fecha y selección de colores

jQuery UI Datepicker.
jQuery date picker plugin.
jQuery Time Picker.
Time Picker.
ClickPick.
TimePicker.
Farbtastic jQuery Color Picker Plugin.
Color Picker by intelliance.fr.

Plugins de calificación

jQuery Star Rating Plugin.
jQuery Star Rater.
Content rater with asp.net, ajax and jQuery.
Half-Star Rating Plugin.

Plugins de búsqueda

jQuery Suggest.
jQuery Autocomplete.
jQuery Autocomplete Mod.
jQuery Autocomplete by AjaxDaddy.
jQuery Autocomplete Plugin with HTML formatting.
jQuery Autocompleter.
AutoCompleter (Tutorial with PHP&MySQL).
quick Search jQuery Plugin.

Edición

jTagEditor.
WYMeditor.
jQuery jFrame.
Jeditable – edit in place plugin for jQuery.
jQuery editable.
jQuery Disable Text Select Plugin.
Edit in Place with Ajax using jQuery.
jQuery Plugin – Another In-Place Editor.
TableEditor.
tEditable – in place table editing for jQuery.

Audio, Video, Flash, SVG, etc

jMedia – accessible multi-media embedding.
JBEdit – Ajax online Video Editor.
jQuery MP3 Plugin.
jQuery Media Plugin.
jQuery Flash Plugin.
Embed QuickTime.
SVG Integration.

Fotos/Imágenes/Galerías

ThickBox.
jQuery lightBox plugin.
jQuery Image Strip.
jQuery slideViewer.
jQuery jqGalScroll 2.0.
jQuery – jqGalViewII.
jQuery – jqGalViewIII.
jQuery Photo Slider.
jQuery Thumbs – easily create thumbnails.
jQuery jQIR Image Replacement.
jCarousel Lite.
jQPanView.
jCarousel.
Interface Imagebox.
Image Gallery using jQuery, Interface & Reflactions.
simple jQuery Gallery.
jQuery Gallery Module.
EO Gallery.
jQuery ScrollShow.
jQuery Cycle Plugin.
jQuery Flickr.
jQuery Lazy Load Images Plugin.
Zoomi – Zoomable Thumbnails.
jQuery Crop – crop any image on the fly.
Image Reflection.

Google Map

jQuery Plugin googlemaps.
jMaps jQuery Maps Framework.
jQmaps.
jQuery & Google Maps.
jQuery Maps Interface forr Google and Yahoo maps.
jQuery J Maps – by Tane Piper.

Juegos

Tetris with jQuery.
jQuery Chess.
Mad Libs Word Game.
jQuery Puzzle.
jQuery Solar System (not a game but awesome jQuery Stuff).

Tablas, Grillas, etc.

UI/Tablesorter.
jQuery ingrid.
jQuery Grid Plugin.
Table Filter – awesome!.
TableEditor.
jQuery Tree Tables.
Expandable “Detail” Table Rows.
Sortable Table ColdFusion Costum Tag with jQuery UI.
jQuery Bubble.
TableSorter.
Scrollable HTML Table.
jQuery column Manager Plugin.
jQuery tableHover Plugin.
jQuery columnHover Plugin.
jQuery Grid.
TableSorter plugin for jQuery.
tEditable – in place table editing for jQuery.
jQuery charToTable Plugin.
jQuery Grid Column Sizing.
jQuery Grid Row Sizing.

Gráficos, presentaciones, etc.

jQuery Wizard Plugin .
jQuery Chart Plugin.
Bar Chart.

Bordes, esquinas, fondo

jQuery Corner.
jQuery Curvy Corner.
Nifty jQuery Corner.
Transparent Corners.
jQuery Corner Gallery.
Gradient Plugin.

Texto y links

jQuery Spoiler plugin.
Text Highlighting.
Disable Text Select Plugin.
jQuery Newsticker.
Auto line-height Plugin.
Textgrad – a text gradient plugin.
LinkLook – a link thumbnail preview.
pager jQuery Plugin.
shortKeys jQuery Plugin.
jQuery Biggerlink.
jQuery Ajax Link Checker.

Tooltips

jQuery Plugin – Tooltip.
jTip – The jQuery Tool Tip.
clueTip.
BetterTip.
Flash Tooltips using jQuery.
ToolTip.

Menus, navegación

jQuery Tabs Plugin – awesome! .
another jQuery nested Tab Set example (based on jQuery Tabs Plugin).
jQuery idTabs.
jdMenu – Hierarchical Menu Plugin for jQuery.
jQuery SuckerFish Style.
jQuery Plugin Treeview.
treeView Basic.
FastFind Menu.
Sliding Menu.
Lava Lamp jQuery Menu.
jQuery iconDock.
jVariations Control Panel.
ContextMenu plugin.
clickMenu.
CSS Dock Menu.
jQuery Pop-up Menu Tutorial.
Sliding Menu.

Acordión, Slide

jQuery Plugin Accordion.
jQuery Accordion Plugin Horizontal Way.
haccordion – a simple horizontal accordion plugin for jQuery.
Horizontal Accordion by portalzine.de.
HoverAccordion.
Accordion Example from fmarcia.info.
jQuery Accordion Example.
jQuery Demo – Expandable Sidebar Menu.
Sliding Panels for jQuery.
jQuery ToggleElements.
Coda Slider.
jCarousel.
Accesible News Slider Plugin.
Showing and Hiding code Examples.
jQuery Easing Plugin.
jQuery Portlets.
AutoScroll.
Innerfade.

Drag and Drop

UI/Draggables.
EasyDrag jQuery Plugin.
jQuery Portlets.
jqDnR – drag, drop resize.
Drag Demos.

XML XSL JSON Feeds

XSLT Plugin.
jQuery Ajax call and result XML parsing.
xmlObjectifier – Converts XML DOM to JSON.
jQuery XSL Transform.
jQuery Taconite – multiple Dom updates.
RSS/ATOM Feed Parser Plugin.
jQuery Google Feed Plugin.

Browsers

Wresize – IE Resize event Fix Plugin.
jQuery ifixpng.
jQuery pngFix.
Link Scrubber – removes the dotted line onfocus from links.
jQuery Perciformes – the entire suckerfish familly under one roof.
Background Iframe.
QinIE – for proper display of Q tags in IE.
jQuery Accessibility Plugin.
jQuery MouseWheel Plugin.

Ventanas de alerta, ingreso y confirmació

jQuery Impromptu.
jQuery Confirm Plugin.
jqModal.
SimpleModal.

CSS

jQuery Style Switcher.
JSS – Javascript StyleSheets.
jQuery Rule – creation/manipulation of CSS Rules.
jPrintArea.

DOM, Ajax y otros jQuery plugins

FlyDOM.
jQuery Dimenion Plugin.
jQuery Loggin.
Metadata – extract metadata from classes, attributes, elements.
Super-tiny Client-Side Include Javascript jQuery Plugin.
Undo Made Easy with Ajax.
JHeartbeat – periodically poll the server.
Lazy Load Plugin.
Live Query.
jQuery Timers.
jQuery Share it – display social bookmarking icons.
jQuery serverCookieJar.
jQuery autoSave.
jQuery Puffer.
jQuery iFrame Plugin.
Cookie Plugin for jQuery.
jQuery Spy – awesome plugin.
Effect Delay Trick.
jQuick – a quick tag creator for jQuery.
Metaobjects.
elementReady.

 

By: http://www.kollermedia.at

 

tips

Best HTML5 And CSS3 Frameworks


HTML5 And CSS3 Frameworks is what can make your job easier with structuring and presenting content on the World Wide Web. Features like video playback and drag-and-drop that have been previously dependent on third-party browser plug-ins such as Adobe Flash, Microsoft Silverlight, and Google Gears are being incorporated in HTML5.

Although the full recommendation of HTML5 is very far away (2022), but browsers are being making there moves already. As a designer myself I really am watching closely on developments, articles on HTML5 and CSS3, and today I would like to present the frameworks for HTML5 and CSS3.

 

Don’t forget to Subscribe to our RSS-feed subscribe to our RSS-feed and Follow us on Twitter follow us on Twitter for recent updates.

 

52ramework

52framework contains all the header, nav, section, article, footer tags which are the basic html5 tags, with full documentation and growing community this frameworks looks promising. Features like rounded corners, text-shadow, box-shadow, html5 markup, grid system, css reset are just a small list, this framework is worth a look if you want to dive in HTML5 and CSS3.

Lessframework

Less Framework is a CSS framework for building flexible multi-column website layouts. It contains a ten column grid optimized for a line-height of 24px, as well as a set of typography presets based on the golden ratio that fit into the grid’s vertical rhythm.

With support of all browsers this framework is said to open in mobile devices with a smooth and flexible manner. The tutorial and documentation is very neat and can be easily understood.

Baseline

Baseline is a CSS framework that aims to be a basic typographic layout and build a simple grid system, including style for HTML forms and new HTML 5 elements.

This framework uses the font metrics to line up headlines, paragraphs, form labels and other elements on the page baseline, tending to create a nice fixed layout.

Sproutcore

SproutCore is an HTML5 application framework for building responsive, desktop-caliber apps in any modern web browser, without plugins.

With documentation and support community SproutCore is another solid framework for developers. The demos are pretty fast and they look promising with what they are said to do.

CSS3 Action Framework

Hosted on google code, CSS3 Action Library aims to gather all the best CSS3 effects in one place. With some very fantastic demos like of google redesign, this framework is also worth a shot.

JavaScript framework designed for HTML5 apps

Sencha Touch

Sencha Touch allows your web apps to look and feel like native apps. Beautiful user interface components and rich data management, all powered by the latest HTML5 and CSS3 web standards and ready for Android™ and Apple iOS devices.

OpenLaszlo : OpenLaszlo is an open source platform for the development and delivery of rich Internet applications. It is released under the Open Source Initiative-certified Common Public License. With OpenLaszlo 4.0 (OL4), they have added the option of compilation to DHTML (browser-native JavaScript). OpenLaszlo 4 handles browser idiosyncrasies so you don’t have to.

And there are more to come. We will be updating this post in future, so that you can find about all frameworks in one place. So I recommend you to bookmark this page for future reference.

We would love to know anything about HTML5 and CSS3 frameworks from you, and be sure to get the our responses.

 

By: http://www.webdesignish.com

 

tips

HTML5 CSS3 Framework Choices: 10 Great Web Frameworks


HTML5 and CSS3 are the future of website development, mobile app development and web gaming development. The advantage of having a standardized platform on which to develop is faster development time with cleaner and more efficient code. To help you achieve this, there are now a variety of HTML5 CSS3 framework options available to use.

Here, I’ve selected 10 great web frameworks, consisting of some HTML5 CSS3 framework platforms that are combined, as well as some specific HTML5 frameworks and CSS3 frameworks.

If you are looking for more web development resources, check out these posts:

Enjoy!

If you found these web frameworks useful, please share this post!

 

HTML5 CSS3 Frameworks:

Gravity HTML5 CSS3 Framework

HTML5 CSS3 Framework

HTML5 Boilerplate

HTML5 CSS3 Framework

Perkins HTML5 CSS3 Framework

HTML5 CSS3 Framework

Less HTML5 CSS3 Framework

HTML5 CSS3 Framework

Inuit CSS3 Framework

HTML5 CSS3 Framework

Advertisement

Gridless HTML5 CSS3 Framework

HTML5 CSS3 Framework

52 HTML5 CSS3 Framework

HTML5 CSS3 Framework

G5 HTML5 CSS3 Framework

HTML5 CSS3 Framework

Lime.js HTML5 Framework for Games

HTML5 CSS3 Framework

Jo HTML5 Mobile Framework

HTML5 CSS3 Framework

 

By: http://creativefan.com

55 Super Powerful jQuery Navigation and Menu Plugins


avigation is one of the most important elements in web design. It has to be neat, usable and creative at the same time in order to not scare your visitors away. jQuery is one of the most powerful tools to enhance your navigation and make it stand out. With jQuery you can bring together both the creative and usable. This article will cover 55 fresh and superb jQuery plugins that will make your menus look awesome. Note that all of the listed plugins have been released in the last six months.

 

55 Super Powerful jQuery Navigation and Menu Plugins

 

1. mb.verticalSlider

Mb-vertical-slider-jquery-navigation-menu-plugins

jquery.mb.verticalSlider lets you show a long list of elements managing pagination, it can work with elements already in the DOM of your page or load them via Ajax when needed, it also works with a mouse wheel.

Demo

1.1. Drop Menu

With this script you can make nice and interactive drop down menus. The advantage of this script is that it not only gives you the ability to make list drop down menu. You can also use a div as drop down element. This way you can create big drop down menus like under the buttons products and tutorials in the live preview.

View Demo

2. Fly Slideshow

Fly-slideshow-jquery-navigation-menu-plugins

Fly SlideShow is a jQuery Slideshow script to present images as an automatic slideshow with a nice “fly” effect. Images fly from left to right with and have a fade effect.

It also features:

  • Direct navigation (you can jump to any slide by clicking dots at top-right corner)
  • Previous/next controls
  • Image decriptions (it gets them from alt tag)
  • Only 5kb size

Demo

3. OS X Finder-like ColumnView

Osx-column-view-navigation-menu-plugins

This is a jQuery (1.4 as of writing) extension for mimicing the OSX Finder column behavior. You specify an initial element: $(‘#columnview’).columnview(); And the plugin takes the contents() of that node and places it in the first ‘column’. Any links within that column are grabbed, preventDefault()’d and instead they will perform a $.get request and enter that data in the next column.

Demo

4. Blast Slider – jQuery Photo Slider

Blast-photo-slider-jquery-navigation-menu-plugins

Blast Slider is a jQuery plugin to create sliders, carousels, rotators with crazy animation effects – slide explodes into particles and then collapses to a new slide!

Demo

5. Photo Rotator jQuery Plugin

Photo-rotator-jquery-navigation-menu-plugins

Photo Rotator JQuery plugin is an easy to use JQuery plugin for a web developer to build a JavaScript gallery on their web application. The plugin can be driven by xml. Easy setup and only minimum programming knowledge is needed. Best to showcase your photography.

Highlighted features:

  • Driven by xml or arrays
  • 3D Transition Effects (support in Safari)
  • Easy to setup
  • Slide show controls
  • Easy customization
  • Compatible with IOS mobile safari

Demo

6. infiniScroll

Infini-scroll-jquery-navigation-menu-plugins

“infiniScroll” was written as a jQuery plugin. It works for blog posts… but will work for anything where you scroll to get more data. Just like Twitter.com, Facebook status messages, etc. Instead of paginating items, why not just keep scrolling? We like to scroll more than we like to go to a new page in some cases. It’s easier to get to items, and you already waited for things to load, so why load again! Posts and tweets are one thing, but this plugin will also work for leaderboards, portfolio items, anything where you want to load subsequent elements.

Demo

7. jQuery Gestures

Gestures-jquery-navigation-menu-plugins

The jQuery Gestures project is a plugin for the jQuery JavaScript Framework, which adds mouse gesture support to a page or zone on a web page. This plugin also supports composite gestures, which combine several compass directions to create a shape. This gives gestures more variations than the eight compass points.

Demo

8. jQuery Menu Selector

Menu-selector-jquery-navigation-menu-plugins

This plugin makes menu items active by location path.

9. jQuery Stepy – A Wizard Plugin

Stepy-wizard-jquery-navigation-menu-plugins

jQuery Stepy is a plugin based on FormToWizard that generates a customizable wizard.

Demo

10. jQuery Slidy – A Transition Plugin

Slidy-transition-jquery-navigation-menu-plugins

jQuery Slidy is a plugin that generates a customizable transitions automatically.

Demo

11. Slide Down Menu

Slide-down-jquery-navigation-menu-plugins

This is actually a tutorial though you can download the source files. The idea is to make a box with a menu item that slides out, while a thumbnail pops up. We will also include a submenu box with further links for some of the menu items. The submenu will slide to the left or to the right depending on which menu item we are hovering.

Demo

12. jQuery Pageswitch Plugin

Pageswitch-jquery-navigation-menu-plugins

This lightweight and easy to use jQuery Pageswitch Plugin allows you to easily add site-animations to your navigation.

13. Apple style Navigation with CSS3 JQuery

Apple-jquery-navigation-menu-plugins

Apple is known for very clean design and if you have been to their website in the last few years you’ve seen their primary navigation. It’s a staple of the Apple website and this plugin recreates Apple’s navigation using CSS3 and jQuery.

Demo

14. Smart Cart 2 – jQuery Sopping Crt Pug-in

Smart-cart-jquery-navigation-menu-plugins

Smart Cart 2 is a flexible and feature rich jQuery plug-in for shopping cart. It makes the add-to-cart section of online shopping much easier and user friendly.
It is very easy to implement and only minimal HTML required. The selected items in the cart are accessible as an array of product/quantity pair delimited with ‘|’ on submit form or when checkout event is triggered. Smart Cart 2 have a simple and compact design with tabbed interface to save space.

Demo

15. Flyout Ribbon using jQuery and CSS3

Fly-out-ribbon-css3-jquery-navigation-menu-plugins

Flyout Ribbon is a simple jQuery plugin for creating a highly customizable flyout ribbon. This plugin is perfect for providing users with a plethora of options in an unobtrusive manner. With one mouse click you can show or hide all developer defined options.This plugin is very light weight and easy to implement.

Demo-Click on the arrow on the right hand side of your screen to see the demo in action.

16. Easyrpc

Easyrpc-jquery-navigation-menu-plugins

This is a synchronous and an asynchronous library to communicate with a server application with almost zero configuration.

17. TN34 Facets

Facets-jquery-navigation-menu-plugins

This plugin uses the CSS clip styling method and the jQuery.clip plugin to show sectioned containers positioned in the same area and to expand a hovered container to its maximum width. Just like an accordion but much more powerful.

Demo

18. Keyboard Links

Keyboard-links-jquery-navigation-menu-plugins

Keyboard links is a plugin which allows the user to quickly find any link on the page and click it by just using the keyboard. The user presses “l” and a toolbar appears at the top of the page then they start typing to search for the link that they want and a list appears of those links, they can then select a link by moving up and down keys and whilst doing so the focused link will be scrolled into view and highlighted, here’s a demo page which should fill in all the blanks.

19. iX Framework

Ix-framework-jquery-navigation-menu-plugins

iX Framework is a javascript GUI / Javascript Widget consisting of comprehensive components, such as : Grid, Chart, Tree, Window, Panel, Field, Validation, Combo and more.iX Framework is a comprehensive, powerful and affordable professional web framework that removes the boundary between web and desktop application.

Demo

20. Hijax

Hijax-jquery-navigation-menu-plugins

The Hijax plugin is a JQuery plugin which allows you to add Ajax capabilities to your site, while maintaining search engine friendliness and browser history button support. It provides a simple and easy way to transform your site into a dynamic Ajax site, providing a richer user experience.

Demo

21. JAWS: News Ticker and Mini Accordion

Jaws-jquery-navigation-menu-plugins

This widget-esque script is at once both a news ticker and a mini accordion. It takes a config file of data (headlines, image SRCs, URLs etc) and paginates your headlines into folds. It will optionally auto-rotate through these folds, though you can navigate between them with the numeric tabs at the top right. If an item has ‘more info’ data set in the config, then clicking the headline will reveal that data in an accordion fashion. See below for an example.

22. Subway Map Visualization jQuery Plugin

Subway-map-visualization-jquery-navigation-menu-plugins

This plugin renders unordered lists into a subway map similar in style to the London Underground map. It emphasizes a clean, aesthetic look with curves and proper placement of markers for stations and interchanges. Without any illustration tools, you can quickly go from HTML markup to a complete map visualization of information in a short amount of time. The rendering uses the HTML5 element and works with any browser that supports this element.

Demo

23. Sticky Section Headers

Sticky-section-headers-jquery-navigation-menu-plugins

Given the appropriate mark-up structure this plugin keeps headers in place while scrolling, known from the iPhone table view.

Demo

24. Headerlinks

Headerlinks-jquery-navigation-menu-plugins

The jQuery headerlinks plugin will automatically create a table of contents block anywhere on the page with any style and any content you desire. It has a tremendous amount of flexibility and does many things automatically.

24.1. Sliding Tabs – jQuery Plugin

Sliding Tabs is a jQuery plugin for creating horizontal and/or vertical animated tabs for your website. You can have multiple instances of the tabs and customize them in any way with CSS . The script comes with many customization options, making it very flexible and easy to customize to your needs.

View Demo

25. WZSplitter

Wzsplitter-jquery-navigation-menu-plugins

WZSplitter is a flexible, easy to use layout plugin. It helps end users to set up any combination of resizable panels just by providing a few configuration values. Main features:

  • Resizable panels, collapsing/expanding and stretching/shrinking functions.
  • Skins.
  • Unlimited nesting and linkage effects on panels’ actions.
  • Default values driven, panels can be customized by simply changing configuration values.
  • Programmatically control and event triggers using callback functions.

26. Autobrowse Endless Scroller

Autobrowse-endless-scroller-jquery-navigation-menu-plugins

When run on a DOM element, this plugin will make the element grow and fill its content automatically when the user scrolls to the bottom of the element. The content is fetched via ajax, and the plugin keeps a cache using local storage.

Demo

27. Panoscoper

Panoscoper-jquery-navigation-menu-plugins

The Panoscoper plugin is made to take any object (including embedded video objects) and wrap them as though they were 360° virtual environments. It has extensive options and can be customized to suit most applications, but is still being heavily developed.

28. jCrumb

Jcrumb-jquery-navigation-menu-plugins

JCrumb is a JQuery plugin for instantly adding breadcrumbs to any webpage without the need to worry about sitemaps, or server side languages. Just add the plugin to every page you want breadcrumbs on, initialize, and you’re done. Can be also be styled with JQuery UI.

29. jxSlider

Jxslider-jquery-navigation-menu-plugins

jxSlider widget turns the selected DIV into a small embedded ajax tabbed-navigator. The ajax-loaded content will automatically and recursively be shown into the initial DIV.

30. Ninja UI

Ninja-ui-jquery-navigation-menu-plugins

Ninja user interface is skilled in the techniques of JavaScript and CSS, going unnoticed until called upon to perform the arts of webjutsu.

Demo

31. jQuery Scroller

Scroller-jquery-navigation-menu-plugins

With jQuery Scroller you can create easily smart scrolling text, news ticker, or image animations with few lines of code in jQuery!

Some Features:

  • Velocity, horizontal or vertical direction, starting/ending points, finite or infinite loops, move type (‘linear’ or ‘ping pong’)
  • Configure mouseover/mouseout events or control programmatically scrolling functions from an external element
  • Play, pause, resume scrolling animations or set a custom pointer.

32. Image Hover Move

Image-hover-move-jquery-navigation-menu-plugins

A simple and practical navigation or featured image jQuery plugin.

33. Dynamic Navigation Menu

Dynamic-jquery-navigation-menu-plugins

Dynamic menu with scrolling color glide, appropriate for a blog or website which requires a clean modern style and personalization.

34. jQuery One Page Navigation Plugin

One-page-jquery-navigation-menu-plugins

With this plugin you’ll make the page scroll smoothly when the navigation is clicked. It also automatically highlights the correct navigation section depending upon which section is scrolled to.

Demo

35. Slider Menu

Slider-jquery-navigation-menu-plugins

Though certainly nothing new in the world of jQuery or even menu systems Slider Menu is a small compact menu animation plugin that creates a simple yet smooth menu using a UL list.

36. Multi-Level Accordion Menu

Multi-level-accordion-jquery-navigation-menu-plugins

Supports infinite level of unordered lists, easy to implement, and has been tested in Internet Explorer 6+, Firefox, Safari, and Chrome.

Demo

37. Sliding Pictures Menu

Slinding-pictures-jquery-navigation-menu-plugins

This is a jQuery plugin that makes a beautiful sliding menu with pictures. Some features:

Some features:

  • Set default menu item open.
  • Leave active menu item open.
  • Remember active menu item using cookies.
  • Use debug function.

38. onCube

Oncube-jquery-navigation-menu-plugins

This plugin generate a die like a Rubik’s Cube. You can use it for navigation, categories or whatever you want. The plugin works in IE6 and IE7 as well as in Firefox and IE8. It also looks very good on iPhone, iPad & Co.

Demo

39. Memu – A simple CSS / JavaScript / JQuery Menu

Memu-jquery-navigation-menu-plugins

A small, solid jQuery plugin which is quite easy to use. It’s a menu which can be used with or without JQuery. What’s special about this script is the included plugin jstorage.js (which is some amazing work btw) to store the current item. So if you’re navigating around, the selected item will stay highlighted. This will spare you some server-side code. You can try this one by clicking on the menu item “File -> New”.

Demo

40. Dropp

Dropp-jquery-navigation-menu-plugins

Dropp is a jQuery plugin which replaces regular dropdown menus ( <select> elements ) with alternatives you can style.

41. Pretty Pie Menu

Pretty-pie-jquery-navigation-menu-plugins

Right-Click on the selected element, hold the button down, pie menu appears and select icon.Uses jQueryUI animations, icons and styles to make it “pretty”. Easily modifiable by changing jQueryUI stylesheets.

42. jMenu

Jmenu-jquery-navigation-menu-plugins

jMenu is a jQuery plugin that enables us to create horizontal navigations with unlimited sub-menus. Besides jQuery, it also requires jQuery UI and supports all the effects of this library (like fadeIn or slideDown). The markup of the menu is pretty clean as it makes use of nested lists. The look and feel of the output is set in a CSS file so updating it without touching the JS code is possible.

Demo

43. Facebook Menu System

Facebook-jquery-navigation-menu-plugins

This menu is based on the same idea used on Facebook. The menu system work only with the UL html tag, no other tags are used, you have only to create a simple menu.

44. MobilyBlocks

Mobily-blocks-jquery-navigation-menu-plugins

MobilyBlocks plugin allows you to simply create an unordered list as an impressive and stylish animated circle.

Demo

45. jQuery Menu Selector

Selector-jquery-navigation-menu-plugins

This plugin makes menu items active by location path.

46. jOrbital

Jorbital-jquery-navigation-menu-plugins

jOrbital is a solution for building circular menus. It’s purpose is to group elements with similar functionality ( like social buttons ) into one hoverable button. But it’s not limited to simple menu only. You can create circular gallery, multi-level navigation or RPG -like menu. This is a premium plugin though.

47. Multi Row Checkbox Menu

Multirow-checkbox-jquery-navigation-menu-plugins

Plugin to put those cool little Google Gmail type ‘Select All/Select None’ action menus at the top of a list of check boxes.

Demo

48. Content Slider

Content-slider-jquery-navigation-menu-plugins

Slider implemented based on the jquery-ui framework, not just for images, but for text and other content as well, In this way, we can use the CSS classes of jquery-ui to apply different look and feels and use its effects for the slide presentation.

Demo

49. Hyjack Select

Hyjack-jquery-navigation-menu-plugins

This jQuery plugin replaces the traditional html select control with an improved or “hijacked” version. To begin, try exploring the various Hyjack HTML select examples. Notice, you may now type to search for available drop down items. Please feel free to discover the demos, expand on current ideas, or just drop us a note. Documenation can be found in code behind and through google code or at our jQuery plugin page.

50. jQuery Configurable Context Menu

Configurable-context-jquery-navigation-menu-plugins

This is a configurable context menu, it works in three ways: right click, hold down, hover.Callback is executed with parameter e, the menu action event object normalized by jQuery, and el, the element associated with the menu. Menu is an ul with position absolute, menu element are li with .hover class added on mouse over.

51. NavDock

Navdock-jquery-navigation-menu-plugins

NavDock is a simple dock style menu icon.

52. jQuery Content Panel Switcher

Content-panel-switcher-jquery-navigation-menu-plugins

The jQuery Content Panel Switcher is a simple, very lightweight jQuery plugin that allows smooth transitioning of content in and out of panels located anywhere on the page. You can have single or multiple content switching panels on a single page Content panels can be either span or div elements, and the buttons used to switch the content can be just about anything, so long as they have the right clases assigned.

Demo

53. jQuery Image Rotator with Fade

Image-rotator-fade-jquery-navigation-menu-plugins

jQuery Image Rotator is a plugin for jQuery, and it is a highly customizable JavaScript-based way to easily turn your images into a collection viewable as a slideshow, with great looking fading effects, if desired.

Demo

54. jQuery xFade

Xfade-jquery-navigation-menu-plugins

A jQuery plugin (3.6 KB minified) to fade/slide the elements inside the container based/extended from jQuery InnerFade by Torsten Baldes with the controls as addition.

55. jQCloud

Jqcloud-jquery-navigation-menu-plugins

jQCloud allows you to build neat cloud-shaped word clouds and tag clouds. Since this plugin produces pure HTML code, the word cloud layout can be easily personalized with custom CSS styles.

Demo

From: http://www.1stwebdesigner.com