The web developers at Maui Website Design have designed a  dynamic image menu that allows you to navigate easily through any visual content with a Motools-inspired effect, powered by jQuery Javascript.

The menu’s main functions require a jQuery-compatible script, a valid XHTML, a Motools-like sliding effect, and it should be lightweight. It comes in two versions, the first of which you can view HERE.

Click on the image to download the source.

Step 1: HTML

<div class="jimgMenu">

<ul>

<li><a href="#">Landscapes</a></li>

<li><a href="#">People</a></li>

<li><a href="#">Nature</a></li>

<li><a href="#">Abstract</a></li>

<li><a href="#">Urban</a></li>

</ul>

</div>

Step 2: CSS

.jimgMenu {

position: relative;

width: 670px;

height: 200px;

overflow: hidden;

margin: 25px 0px 0px;

}

.jimgMenu ul {

list-style: none;

margin: 0px;

display: block;

height: 200px;

width: 1340px;

}

.jimgMenu ul li {

float: left;

}

.jimgMenu ul li a {

text-indent: -1000px;

background:#FFFFFF none repeat scroll 0%;

border-right: 2px solid #fff;

cursor:pointer;

display:block;

overflow:hidden;

width:78px;

height: 200px;

}

.jimgMenu ul li.landscapes a {

background: url(images/landscapes.jpg) repeat scroll 0%;

}

.jimgMenu ul li.people a {

background: url(images/people.jpg) repeat scroll 0%;

}

.jimgMenu ul li.nature a {

background: url(images/nature.jpg) repeat scroll 0%;

}

.jimgMenu ul li.abstract a {

background: url(images/abstract.jpg) repeat scroll 0%;

}

.jimgMenu ul li.urban a {

background: url(images/urban.jpg) repeat scroll 0%;

min-width:310px;

}

Step 3: Javascript

Include jQuery and all plugin files listed in the header of your HTML file. It should look like this:

<link href="css/jimgMenu.css" rel="stylesheet" type="text/css" />

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

<script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>

<script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>

Include the jQuery in your attached file or page.

<script type="text/javascript">

$(document).ready(function () {

// find the elements to be eased and hook the hover event

$('div.jimgMenu ul li a').hover(function() {

// if the element is currently being animated

if ($(this).is(':animated')) {

$(this).stop().animate({width: "310px"}, {duration: 450, easing:"easeOutQuad", complete: "callback"});

} else {

// ease in quickly

$(this).stop().animate({width: "310px"}, {duration: 400, easing:"easeOutQuad", complete: "callback"});

}

}, function () {

// on hovering out, ease the element out

if ($(this).is(':animated')) {

$(this).stop().animate({width: "78px"}, {duration: 400, easing:"easeInOutQuad", complete: "callback"})

} else {

// ease out slowly

$(this).stop(':animated').animate({width: "78px"}, {duration: 450, easing:"easeInOutQuad", complete: "callback"});

}

});

});

</script>

In the second version, kwicks are used to add functionality and help to the Sliding Image Menu animation. Get the DEMO and SOURCE here.

Step 1: HTML

<div class="jimgMenu">

<ul>

<li id="landscapes"><a href="#">Landscapes</a></li>

<li id="people"><a href="#">People</a></li>

<li id="nature"><a href="#">Nature</a></li>

<li id="abstract"><a href="#">Abstract</a></li>

<li id="urban"><a href="#">Urban</a></li>

</ul>

</div>

Step 2: CSS

(Adapted for kwicks)

.jimgMenu {

position:relative;

margin: 0px 0px 0px 50px;

padding: 0px;

width:475px;

height:200px;

overflow: hidden;

}

.jimgMenu ul {

list-style: none;

margin: 0px;

padding: 0px;

display: block;

height: 200px;

position: relative;

}

.jimgMenu ul li {

width: 95px;

float: left;

display: block;

overflow: hidden;

}

.jimgMenu ul li a {

text-indent: -1000px;

background:#fff repeat scroll 0%;

border-right: 2px solid #fff;

cursor:pointer;

display:block;

overflow: hidden;

height: 200px;

}

.jimgMenu ul li#landscapes a {

background: url(images/landscapes.jpg) repeat scroll 0%;

}

.jimgMenu ul li#people a {

background: url(images/people.jpg) repeat scroll 0%;

}

.jimgMenu ul li#nature a {

background: url(images/nature.jpg) repeat scroll 0%;

}

.jimgMenu ul li#abstract a {

background: url(images/abstract.jpg) repeat scroll 0%;

}

.jimgMenu ul li#urban a {

background: url(images/urban.jpg) repeat scroll 0%;

border-right-style: none;

}

Step 3: Javascript

Include the jQuery and all files below in the header section of your HTML.

<link href="css/jimgMenukwicks.css" rel="stylesheet" type="text/css" />

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

<script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>

<script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>

<script type="text/javascript" src="js/jquery.kwicks-1.5.1.pack.js"></script>

The above code will activate jQuery Sliding Image Menu plugin. Lastly, place the script below in your html head or document body.

<script type="text/javascript">

$().ready(function() {

$('.jimgMenu ul').kwicks({max: 310, duration: 300, easing: 'easeOutQuad', complete: 'callback'});

});

</script>

Take note that CSS controls most of the image menu’s style and if you want to customize the easing type and duration, use the jQuery easing plugin to achieve different sliding effects.

Incoming search terms for the article:

• jquery image menu
• image menu jquery
• image menu with jquery
• jimgmenu
• jquery menu image
• scrolling image menu jquery
• easing:easeoutquad
• menu design jquery images
• jquery 이미지 메뉴
• jquery scrolling image menu

Make sure that you have enabled your mobile template on blogger, so you can get in touch with your readers while they’re on the go! Just login on your account and setup mobile template for your blog on blogger.

This tutorial uses a new version of blogger, if you are using an older version please upgrade to bloggers advance with a click. (super easy)

1. Login to your blogger account on blogger.com

2. Go to on Main Menu for your blog -

3. In the Template pages, setup on Mobile views

4. Click Setting (gear icons) and enable / checking “Yes. Show mobile Template on mobile devices.”

5. Choose Template for Mobile views and Save configuration.

6. Check your  blog using any mobile device:

For example: www.tofu-burger.blogspot.com

Mobile template -> ‘Picture Window’ -> enabled  makes everything way easier  and faster to search and find posts on mobile devices.

Incoming search terms for the article:

• html5 templates for blogspot mobile
• iphone mobile template
• Choose Template on blogger com
• iphone mobile template for blogger
• iphone template for blogger
• templet bloger
• toturial blog
• mobile templates
• mobile template login
• amazing blogger mobile tempelate

With The Wall you may have an endless grid or an original draggable coda slider, if you like better. You’re right! The Wall can work in a traditional or draggable coda fuctionality. 2 functions and a new and original interaction system.

Requirements: MooTools 1.3.2+
Demo: http://wall.plasm.it
License: MIT License

Incoming search terms for the article:

• wall of sound draggable image gallery jquery
• mootools wall
• the wall
• jquery dragable wall
• the wall mootools
• mootools 1 3 carousel
• draggable gallery
• fullscreen gallery with mootools
• mootoold 1 3 2 div carousel
• wall gallery script

MochaUI library does not use any images but canvas tags for gradients, rounded-corners or shadows.  MochaUI allow us to  create horizontally and vertically fluid layout modules with columns and panels easily. Columns and panels can displayed as tabed, panel can be collapsed, expanded, and resized.

Requirements: Mootools framework
Demo: http://mochaui.org/demo/
License: MIT License

Incoming search terms for the article:

• mochaui
• mochaui themes
• mochaui mobile
• mootools UI
• mootools mobile UI
• mochaui tutorial
• mochaui demo
• django mochaUI
• mochaui cakephp
• layout mootools

CeraBox can grouping images to be presented as a gallery where they can be browsed with prev-next buttons. CeraBox requires MooTools 1.3 +.

Requirements: MooTools 1.3 +
Demo: http://cerabox.ceramedia.nl/
License: Other License

Incoming search terms for the article:

• cerabox
• cerabox wordpress
• cerabox demo
• cerabox form
• mootools 1 3 carousel
• lightbox mootools login
• login form mootools
• fancybox gallery out of iframe
• Loading content Ajax mootools
• how to cerabox

Here we have a great collection of the most popular plugins for MooTools. The range includes UI elements, graphs and canvas creation, image cropping, dropdown menus, animation effects, and so much more! For more info check out the MooTools Forge Page on further documentation.

Vertical CSS Show/Hide Menus

The Vertical menu was created with a toggle switch between states. There is an active and hidden view which displays between a calming transition effect. All code is written standard through MooTools and works simply by including the project files.

Skype-style Buttons with MooTools

Here you are able to create a unique Skype-style button set for MooTools. The demo requires just a bit of CSS and some external images to wrap everything together. This effect will allow for great contact fields.

Pamoorama

A very creative JavaScript class built on the mootools framework. Here you create a fielding box to house your image and allow the user to drag and drop positioning. Dragging from right to left will move the view between areas on the picture. This effect only works on larger images and has been tested in mostly all modern browsers.

Kroppr

Ever seen the cropping effects for avatars or profile pictures in social networking applications? These have been developed over time and refined through 3rd party libraries. With Kroppr you are able to add these effects through MooTools and create your own dynamic image cropping script!

MooTools Charts

With MooTools Charts you have the ability to draw data on the fly. These graphics include datasets for digital graphics such as bar, pie, plot-point or tables. The framework is very detailed and contains thorough documentation on their functions.

Mediabox Advanced

I’m sure most are familiar with the popular lightbox plug-in for the jQuery library. Mediabox Advanced is a step up offering huge potential for in-page fade in popups. You can store all types of data and you control all settings for each box. Content includes videos, text, external pages, any many other media types.

AutoCompleter

AutoCompleter is a newer plugin under development in Germany. It allows you to create a search bar autocomplete function which matches that of Google Instant. This promotes growth in many areas and with Ajax calls being easier than ever implementation is a snap.

Facebook Sliders with MooTools

Facebook has offered many custom UI elements since launching its new design just a year or 2 prior. Here David Walsh goes over a very simple tutorial for developing a MooTools plugin for UI elements. The design mirrors that of Facebook’s sliders and gives precise control to user input fields.

SmoothScroll

Smooth scroll is a versatile plugin useful for many web designers. Utilizing DOM functionality in MooTools you can create a smoothing effect with each mouse scroll. This isn’t supported in all browsers, although results produced turn out fantastic in all the demos I’ve tried.

iPhone Checkboxes

Also developed by David Walsh is this great collection of iPhone checkboxes. These are all created using some basic HTML and CSS markup to cleverly decorate form input fields. From here MooTools can check the element’s state and change each from on to off based on a mouseclick event handler.

OmniGrid

Here we have another advanced data grid plugin. This allows you to manipulate input data (even from RSS or Atom feeds) and plug in to dynamic data fields. You are able to create tables on-the-fly with custom scrollbars and sorting functionality for columns.

ImageCaption

Image Caption is a very handy function for all MooTools enthusiasts. You are able to add a unique custom caption beneath each image without wrecking the page flow on your site. Each image is given a small padding area and all content is customized beforehand with careful CSS techniques.

Content Slider Class v2

This is a simple plugin with features allowing to create content sliders in-page. HTML doesn’t offer many solutions and plain JavaScript can get messy. MooTools handles this nicely and with some recent alterations the Slider Class v2 contains many bug fixes and new features.

Ultra-Versatile Slider

Although similar as above this plugin was developed from Antonio Lupetti of Woork. Ultra-Versatile Slider is yet another great content slider plug-in with support for custom HTML elements. All of the code is documented and throughout the post Antonio explains many of the key points at integrating the plugin.

Moogenda

There aren’t many powerful apps allowing you to run your own dynamic calendar online. Moogenda does just this in a very sophisticated way – all through the power of the MooTools framework! The plugin allows for events to be posted and edited and custom scope can be set between year/month/day views.

Custom Missing Image

Most browsers are known for their “image not found” graphics. The small red x from Internet Explorer is the most prominent memory of this. This plugin runs off MooTools to counter the browser’s missing image and replace with one of your own choosing. Although not very practical it can provide a nice branding effect not seen in many sites today.

TwitterGlitter

Here is one of the few plugins to connect into an external API. By pulling data from your Twitter feed you are able to manipulate the tweets into your own board. This plugin works under its own class of functions and can be shared between documents with ease.

Twitter Emulation with MooTools 1.2

Another great Twitter tool based in JavaScript and powered by MooTools. This Twitter emulator not only works quickly but offers extensive documentation into the unknown functionality. I wouldn’t recommend one plugin over another, rather test both out and see which you prefer.

Newsvine-Style News Ticker

We’ve all seen news ticker feeds and open source projects pooling search results. Newsvine is prominently known for showcasing a fastidious and impressive news feed ticker. Using this plugin you are able to create and pull RSS data into a Newsvine-like feed ticker for your own website!

MooFlow

Similar to cover flow for the iTunes store, MooFlow is a clone script creating the same effect. MooTools has a powerful graphics library so manipulating the animation and scroll bar are the only convoluted tasks involved.

Reflections

Yet another great effect taken from the marketing strategies of Apple Computers. Image reflections are popular in web 2.0 design and it’s been created in the past through Flash and Java applets. Now JavaScript allows you to create such a run with the Reflections plugin through MooTools.

Morph Effect On Mouseenter/Mouseleave

Event handlers are some of the most important events for MooTools activists. Here we are checking for a mouse over event which morphs content underneath the container division. This isn’t an entirely useful plugin, but it does provide some nice aesthetics.

Track Outbound Analytics Links

Google Analytics is also another favorite client of mine. Tracking traffic data is simple with this MooTools plugin. You are able to see how many visitors are clicking your links and which are the most popular. This can be combined with other graphics and maths plugins to create your own graph representing website traffic data.

Window Growl

Window Growl is a competitive plugin for MooTools similar to lightbox. This is a much simpler effect which can pop up mid-screen or into a corner of the page with a short amount of information. This is great for letting the user know you’ve saved their profile settings or updated a small piece of the web page.

MIF Tree

Tree structures are very difficult to create in HTML and even with HTML5/CSS3 standards things are still difficult. MIF Tree is a MooTools plugin allowing you to create tree directories on-the-fly. These will display properly in browser and are even open for edits to folders and file names.

mooSocialize

Social media sharing buttons are all the rage. You can see badges sewn across blogs throughout Google and beyond. mooSocialize is a unique plugin which contains all the sharing code needed for dozens of popular social media apps. The sharing widget is powered through MooTools and features custom input functionality.

WP Tools

WP Tools is a great set of DOM effects for manipulating popular WordPress elements. The plugin lets you change site appearance and CSS documents on the fly – or even update them with the passing of each day (morning to night). There are plenty of options and effects to mess around with. Check the documentation link for further info.

Sliding Login Panel

Just another popular sliding login panel. Powered by MooTools many of the animation effects are clean and browser friendly. Although not as popular as the earlier page slider, this does contain more room for visitors to browse while staying unobtrusive to the reader.

MooTools.Floor

Math isn’t always everybody’s favorite task. When developing with math problems often times we ask ourselves why even bother? MooTools.Floor is a revolutionary new platform which allows for complex mathematical manipulation to be performed quickly and efficiently. The project is still under active development and offered free to download.

BySlideMenu

Just another slider menu? Actually here we are working with a simple slide effect which can be used to house menu items. These could also be tabs inside a sliding content box which houses individual page items. Either way give it a try – just remember to install MooTools before activating!

Incoming search terms for the article:

• mootools plugins 2011
• best mootools plugins
• mootools plugins
• mootools time slider
• mootools time
• mootools plugin 2011
• light mootools carousel
• best mootools plugins 2011
• best mootools
• mootools fly effect

Features

• a play / pause control
• buttons to move inside the video (rewind and fast forward)
• an interactive play progress slider
• a load progress bar
• a volume slider and a mute button
• subtitles loaded through an ajax request and synchronized with the video. Supported formats are SubRip (.srt) and SubViewer (.sub)
• full page display
• current and/or remaining time

The video element methods can be called by other scripts, MooPlay objects will adapt themself to any state changes. About a hundred tests are running on each new step, to make sure all the functionnalities are still available.

Requirements: MooTools, Modern Browser
Demo: http://mooplay.challet.eu/
License: GPL License

Incoming search terms for the article:

• video play bar
• mooplay
• make your own html5 player
• video player buttons
• video player button
• play progress
• mooplay wordpress
• mooplay player
• video play buttons
• html5 slider

To implement MooTune, you need to setup the tracking scripts for the backend services you’d like to use (e.g Google Analytics, Mixpanel). Once you create an instance of MooTune, you can add calls to myMooTune.handleEvent(obj) in your code wherever something happens that you’d like to log to your backend(s). For each call to handleEvent, MooTune will send the appropriate call to all of the backends you have specified.

MooTune supports a simple method for doing A/B (split) testing. Actually, it’s multivariate (as many options as you want). When instantiating MooTune, pass in an array of tests.

Requirements: MooTools Framework, tracking scripts (e.g Google Analytics, Mixpanel)
Demo: https://github.com/3n/MooTune/
License: Other License

Incoming search terms for the article:

• mootune
• MooTune demo
• mootools audio player
• a/b test mootools
• wordpress mootools errors
• ruby logging events tracker
• mootools sound event
• mootools logging
• mootools event timeline
• mootools class events

The class is extensible, you can integrate other video sharing websites and network. It is completely customizable.

Requirements: MooTools(1.2+ or 1.3+)
Demo: http://mooves.firebuntu.com
License: MIT License

Incoming search terms for the article:

• mooves
• video enhancement
• mootools video player
• mootools video
• mootool video gallery
• mootools video gallery
• free mootools video player
• video gallery mootools
• mooves com
• mooves firebuntu com

This notification plugin can be used to show any kind of notifications on web pages using custom positioned modal windows. You can dismiss the message by clicking on it. You can also add extra class on message box for styling purpose.

Requirements: MooTools Framework
Demo: http://re5et.github.com/projects/purr/demo/
License: Free License

Incoming search terms for the article:

• mootools popup
• growl style
• popup mootools
• mootools growl
• mootools notification
• purr mootools
• mootools purr
• mootools pop up
• pop mootools
• mootools Popup demo