Vertical Scroll Menu with jQuery Tutorial

We will achieve the following objectives:
  • Keep html as simple as possible, and let jQuery and CSS do the rest.
  • Scoll up and down according to mouse-Y axis
  • Use jQuery.color plugin to animate the background-color changes - download jQuery.color
    (Yes, you will need this to animate the background color, I thought it will do it by default, obviously it doesn't! )
Demo : http://www.queness.com/resources/html/scrollmenu/index.html

Download : http://www.queness.com/resources/archives/jquery-scrollmenu.zip

Stylish Navigation Menu With jQuery

As you may know, the first 20 seconds of a new visitor’s interaction with a website determine whether they are going to stay or leave. This means you have to follow common design practices and put everything where the user would expect it to be. A crucial part of this process is developing an easy to use navigation menu.

 In this tutorial we are going to make a stylish CSS + XHTML navigation menu with the help of the jQuery library.

Demo : http://demo.tutorialzine.com/2009/09/stylish-navigation-menu-jquery/

Download : http://demo.tutorialzine.com/2009/09/stylish-navigation-menu-jquery/demo.zip

10 New Free High-Quality Fonts


Piron

Piron is a highly legible typeface, very well suited to any display or text usage: Web, print (especially magazines), brochures, logos, posters, flyers, motion graphics. The font comes in two weights: regular and oblique. Designed by Alexander Nedelev and Veronika Slavova. Available for free and commercial use, and available in OpenType format.




Mr Jones Book and Mr Jones Book Italic (Registration required)
Mr Jones was originally conceived as a family for print design, consisting of a sans and a headline. The lowercase forms are wide for legibility at small sizes, while the caps are narrower to save space and keep an even balance of negative space when used in body copy. The overall widths of certain characters have been adjusted to almost extremes to keep an even balance of white space around each letter. The font works well in body copy but will need decreased tracking in larger settings. It comes with proportional, old-style and tabular figures and discretionary ligatures.




Ingleby Font
A beautiful, carefully crafted serif font, with signs of the fine antiqua tradition. Designed by David Engelby, the font comes in four weights: regular, italic, bold and bold italic.

 Ibarra Real
Ibarra Real is a public domain font of Ibero-American character. Created in 2005, Ibarra Real is an elegant design, mixing tradition and modernity; a genuine badge of the particular Spanish culture that was created by JoaquĆ­n Ibarra in 1780. Available for Windows, Mac and Linux.


Edelsans (Free for personal use only)
Edelsans was designed as a noble geometric font for the screen, with few corners and mostly rounded glyphs. The typeface is not completely finished but is free for non-commercial use.


BASE
This free font is bold and experimental. It would come handy for bold statements on t-shirts and posters. The font was designed by Fabian De Lange and is licensed under the Creative Commons Attribution Share Alike license.

St Ryde Regular (Registration required, PDF Specimen)
St Ryde is a sans-serif, very casual typeface, that works perfect in your bodycopy within the regular weights. The whole family comes in 5 weights including the matching italics, so you can choose from thin, light, regular, medium and bold. Regular is available for free download. St Ryde has a wide range of characters, including small caps, lining, proportional and tabular figures plus small caps figures, too. Designed by Sascha Timplan. Available in OpenType format.


Acid (Free for personal use only)
Acid was designed by Stephan Baum specifically to be used in logotypes and body copy. The form of glyphs is similar to the design classic B42 by Marcel Breuer (Bauhaus) and has a very geometric character. The font contains 103 glyphs, comes in six weights (regular, regular italic, medium, medium italic, bold and bold italic) and is in the process of being developed. Released under Creative Commons.

Arcus and Arcus Italic (Registration required)
Arcus is a geometrically constructed font with rounded curves. The font contains a wide range of alternative signs, small capitals, lining and old-style numerals, fractions, superiors, inferiors, ligatures and discretionary ligatures; all this is within the frame of OpenType functions. The type family was designed for headlines, logotypes and corporate identities, and it is not a good fit for long text. Available for free and commercial use.


akaDora (For personal use only)
akaDora is a fairly simple script font with wide character support. Designed by James Daniel Milligan.

iPhone Contacts App with CSS and jQuery

Remember that I created "the iPhone unlock screen" and "the iPhone springboard" in xHTML, CSS and jQuery? Today, I'm bringing you another chapter of transferring some of the beautiful iPhone layouts to the webbrowser.

The design of the Contacts app will be used and displayed in your browser. Funny fact is that this is the first "iPhone to CSS/jQuery conversion" that I created (before the unlock and springboard screen). I'll try to give you the real iPhone feeling with these tutorials.

Demo : http://demo.marcofolio.net/iphone_contact/

Download : http://www.marcofolio.net/downloads/webdesign/iphone_contacts_app/download.html

For More Models:

http://devgrow.com/slidernav/

http://www.ihwy.com/labs/jquery-listnav-plugin.aspx

http://www.blueshoes.org/en/get/download/

jQuery UI Autocomplete Widget with PHP and MySQL

The jQuery UI folks have released an autocomplete widget  that is pretty slick. This example uses the json_encode function in PHP 5. If you have an earlier version of PHP, you will have to roll your own JSON string.

This example will use US states and territories to populate the autocomplete. It will also demonstrate how to fill other fields with data returned from the database. This data can be used to fill a visible text box or a hidden form field. It also demonstrates the basic autocomplete functionality which may be fine for some applications.

Of course, you will need the jQuery core file, the jQuery UI core file, and the jQuery UI style sheet of choice. The style sheet comes from the themes available in the jQuery UI website and can be downloaded with the core file:

Demo : http://www.jensbits.com/demos/autocomplete/
Download : http://www.jensbits.com/media/code/autocomplete_PHP_jensbits.zip

jQuery iPod-style Drilldown Menu


We created an iPod-style drilldown menu to help users traverse hierarchical data quickly and with control. It's especially helpful when organizing large data structures that don't translate well into  traditional dropdown or fly-out menus.

This drilldown menu provides easy navigation of complex nested structures with any number of  levels. The entire menu sits within a fixed-size area, and when a node is selected, breadcrumb links appear above the menu options to both deliver feedback and allow quick access back to nodes higher up in the hierarchy.

A lateral iPod-style slide transition reinforces the notion that you're moving forward into more  granular data, or backward into higher-level data. This menu is specifically useful in traversing deeply nested hierarchies, particularly those more than three levels deep. It also provides a more  usable alternative to multi-level fly-out menus, which can present challenges to those with limited manual dexterity.

Demo : http://www.filamentgroup.com/examples/menusHierarchical/

Double Side Scroll News


Text and Image Crawler is a highly configurable, continuous scrolling marquee for the showcasing of rich HTML. The Crawler can go left or right, contain text, images or both. It is a continuous marquee in that there exists no blank gaps in between passes. Instead of automatically scrolling, it can optionally be mouse driven, so the location of the mouse cursor dictates which direction for the Crawler to go and at what speed.

The contents for the Crawler is simply defined as normal HTML on the page, encased in a DIV element with a unique ID attribute. OO code allows as many marquees on the page as one wants. It doesn't get easier than that! And with no onload event, it plays well with many other scripts.


Demo : http://www.dynamicdrive.com/dynamicindex2/crawler/index.htm

Inspired Navigation Effect Using jQuery

  As you know there are a host of competing javascript libraries around these days. Though I prefer jQuery, I’ve always liked the way the menu on MooTools worked. So in this tutorial we’ll recreate that same effect … but we’ll do it in jQuery!

Demo : http://nettuts.s3.amazonaws.com/004_Moo/tutorial/demo/demo.html

Download : http://nettuts.s3.amazonaws.com/004_Moo/tutorial/demo/Download.zip

Up-Down News Scroller



Description: As its name suggests, this is a up-down scroller that pauses between each message! The look of the scroller is completely styled using external CSS, including the dimensions.

Easily create a single line scroller just by adjusting the scroller's height appropriately!

Demo : http://www.dynamicdrive.com/dynamicindex2/crosstick.htm

Configure Google Fonts API


How to use the Google Font API to add web fonts to your pages. You don't need to do any programming; all you have to do is add a special stylesheet link to your HTML document, then refer to the font in a CSS style.

Demo : http://code.google.com/apis/webfonts/docs/getting_started.html

Sexy Drop Down Menu with jQuery & CSS

 
Studies show that top navigations tend to get the most visual attention when a user first visits a site. Having organized and intuitive navigation is key — and while most drop down menus may look aesthetically pleasing, developing them to degrade gracefully is also essential. In this tutorial I would like to go over how to create a sexy drop down menu that can also degrade gracefully.

Demo : http://www.sohtanaka.com/web-design/examples/drop-down-menu/

Jquery Zoom "JQZOOM"


JQZoom is a javascript image magnifier built at the top of the popular jQuery javascript framework.jQzoom is a great and a really easy to use script to magnify what you want.


Works on all modern browsers:

IE 6+ 
Firefox 2+
Chorme 1.0 
Safari 2+ 
Opera 9+

Demo : http://www.mind-projects.it/projects/jqzoom/demos.php#demo1

Simple Css Drop Down Menu


Dropdown menus and menu bars have been heavily used since the early days of graphical user interfaces. Their use has become ubiquitous, and even expected, in desktop applications, and the web has quickly followed suit.

This article is intended to describe an extremely basic, yet extremely powerful, technique for adding dropdown menus in your application user interface or website design.

Demo : http://designreviver.com/wp-content/uploads/2008/10/example.html

5 Accordion Menus using Jquery

Accordion Menus using Jquery

Creating an Accordion Menu is trivial using Accordion Content script. It basically just comes down to styling your headers and expanding content to conform to that desired menu look.

Demo : http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu.htm

LavaLamp for jQuery lovers!

Hover above and feel for yourself, the nifty effect of Lava Lamp. What you just experienced is nothing but the LavaLamp menu packaged as a plugin for the amazing jQuery javascript library. I personally believe that the effect rivals that of flash – Don’t you? Especially considering the fact that it is extremely light weight.

Often I have noticed, that the credits are usually granted towards the end. Just for a change, i am going to give my credits at the beginning. This effect was originally written by Guillermo Rauch for the mootools javascript library. All I did was to port it for the benefit of jQuery lovers. Thanks Guillermo for inspiring the javascript world with such a nice effect.

A special thanks to Stephan Beal who named it “LavaLamp”, and to Glen Lipka for generously helping with the image sprites. Many fellow jQuery lovers also helped shape this plugin with valuable feedback in the mailing list. Thanks a ton, all you guys.

As User Interface developers, we know that one of the first widgets our visitors use is a “Menu”. Capturing their attention right there is something that we always strive for, and I guess LavaLamp is a step in that direction. Before you get bored with all this useless talk, let me get you started on integrating LavaLamp into your jQuery powered site.

Demo : http://www.gmarwaha.com/blog/category/client-side/jquery/

Superfish – Multi-level drop down menu with jQuery

Superfish – Multi-level drop down menu with jQuery


Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and adds the following much-sought-after enhancements:

    * Suckerfish-style hover support for IE6. The class added is “sfHover” by default but can be changed via the options object,
    * Timed delay on mouseout to be more forgiving of mouse-piloting errors. Default is 800 milliseconds but can be changed via the options object
    * Animation of sub-menu reveal. uses a fade-in by default but can be given a custom object to be used in the first argument of the animate function. The animation speed is also customisable but is set to “normal” by default
    * Keyboard accessibility. Tab through the links and the relevant sub-menus are revealed and hidden as needed
    * Supports the hoverIntent plugin. Superfish automatically detects the presence of Brian Cherne’s hoverIntent plugin and uses its advanced hover behaviour for the mouseovers (mouseout delays are handled by Superfish regardless of the presence of hoverIntent). Using this is only an option, but a nice one. The examples on this page are using hoverIntent. If for some reason you want to use hoverIntent on your page for other plugins but do not want Superfish to use it you can set the option disableHI to true.
    * Indicates the presence of sub-menus by automatically adding arrow images to relevant anchors. Arrows are fully customisable via CSS. You can turn off auto-generation of the arrow mark-up via the “autoArrows” option if required.
    * drop shadows for capable browsers – degrades gracefully for Internet Explorer 6. Can disable shadows completely via options object.
    * Can show the path to your current page while the menu is idle. The easiest way to understand this is to view the nav-bar example.
    * Optional callback functions. The 'this' keyword within the handlers you attach will refer to the animated ul sub-menu. From version 1.4 there are now three other optional callbacks allowing for further enhancements and functionality to be added without needing to alter the core Superfish code.

Demo : http://users.tpg.com.au/j_birch/plugins/superfish/#examples

Download : http://users.tpg.com.au/j_birch/plugins/superfish/superfish-1.4.8.zip

jQuery Floating Menu



To create a floating menu. Yes, a floating effect using jquery.easing, animate top value and a png image. What it does is, on mouse over, the menu item will float, and on mouse out, it will sink. Very simple, but it looks really attractive.

Demo : http://www.queness.com/resources/html/floatmenu/index.html

Download : http://www.queness.com/resources/archives/jquery-floatmenu.zip

jQuery Smooth Animated Menu

jQuery Smooth Animated Menu

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.

Demo : http://buildinternet.com/live/smoothmenu/animated-menu.html

Download : http://buildinternet.com/live/smoothmenu/animated-menu.zip

Create an Apple Style Menu and Improve it via jQuery

Apple Style Menu

Since I wrote my last tutorial on how to create a CSS only multilevel dropdown menu I got a lot of visitors who wanted to know how I created the main navigation of kriesi.at. (a so called kwicks menu)

The interest in extraordinary menus seems to be high nowadays, so today I will teach you how this is done.

Since the Apple-flavored Leopard-text-indent style is currently one of my favorite menu styles, we will start from scratch and build such a menu in Photoshop, then create the needed HTML and CSS and last but not least improve it via jQuery.

Demo: http://www.kriesi.at/wp-content/extra_data/kwicks_tutorial/kwicks_final.html

Download : http://www.kriesi.at/wp-content/uploads/files/kwicks.zip