This is a spectacular new feature (available starting in version 3.2) that will make you rub your eyes in disbelief that it isn't a proprietary feature of your browser. Nope: This one works in ALL browsers!
For a truly spectacular effect, try coupling submenu fading with clipTrans! The second submenu on this page has both submenu fading and clipTrans.

Select in transition: North to south South to north West to east East to west Southeast to northwest Southwest to northeast Northeast to southwest Northwest to southeast Center to vertical edges Center to horizontal edges Center to edges North to south with slide South to north with slide East to west with slide West to east with slide Southeast to northwest with slide Southwest to northeast with slide Northeast to southwest with slide Northwest to southeast with slide
Select out transition: North to south South to north West to east East to west Southeast to northwest Southwest to northeast Northeast to southwest Northwest to southeast Vertical edges to center Horizontal edges to center Edges to center North to south with slide South to north with slide East to west with slide West to east with slide Southeast to northwest with slide Southwest to northeast with slide Northeast to southwest with slide Northwest to southeast with slide
Type duration: (milliseconds)
Type frames:

To make this transition work, you must include one JavaScript libary found in the js/ directory. As of WebDDM 3.4, sliding menus are no longer core to WebDDM - it is a plugin. However, implementation is exactly the same on your side. Your code should look something like this if you need to use this transition:

<script src="../js/core.WebDDM.compressed.js"></script>
<script src="../js/clipTrans.WebDDM.compressed.js">
	<!-- For WebDDM sliding/clipping transitions -->
</script>

The configuration for sliding menus (aka clipTrans) is very similar to menu fading configuration. The internal system is also very similar but we won't get into that here.
Here's how to configure your menu to work with clipTrans:

'items':{
	/* clipTrans configuration */
	'clipTrans':{
		'duration':1000, // Time (in milliseconds) it takes to complete the transition
		'frames':15, // The number of frames in the transition animation
		'transition':'transitionName' // Name of the transition to use 
	},
	// Other stuff...
}

Optionally, you can specify 'transitionIn' and 'transitionOut' instead of 'transition'.

clipTrans has several transitions you can use. Simply put one of the following names as the value of the 'transition' attribute to see exactly how it works:

• north-to-south - Shows the top of the submenu first, and the area of visibility moves down until everything is visible.
• south-to-north - Shows the bottom of the submenu first, and the area of visibility moves up until everything is visible.
• west-to-east - Shows the left of the submenu first, and the area of visibility moves right until everything is visible.
• east-to-west - Shows the right of the submenu first, and the area of visibility moves left until everything is visible.
• southeast-to-northwest - Shows the southeast corner of the submenu first, and the area of visibility moves northwest until everything is visible.
• northwest-to-southeast - Shows the northwest corner of the submenu first, and the area of visibility moves southeast until everything is visible.
• southwest-to-northeast - Shows the southwest corner of the submenu first, and the area of visibility moves northeast until everything is visible.
• northeast-to-southwest - Shows the northeast corner of the submenu first, and the area of visibility moves southwest until everything is visible.
• center-to-vertical-edges - Shows the center of the submenu first, and the area of visibility moves outward to the vertical edges until everything is visible. Note that this transition is reversed (vertical edges to center) with out transitions.
• center-to-horizontal-edges - Shows the center of the submenu first, and the area of visibility moves outward to the horizontal edges until everything is visible. Note that this transition is reversed (horizontal edges to center) with out transitions.
• center-to-edges - Shows the center of the submenu first, and the area of visibility moves outward until everything is visible. Note that this transition is reversed (edges to center) with out transitions.
• north-to-south-slide - Shows the top of the submenu first, and the area of visibility moves down until everything is visible. With "slide" appended to the name, the bottom side of the submenu is actually the first to be visible and the submenu appears to slide.
• south-to-north-slide - Shows the bottom of the submenu first, and the area of visibility moves up until everything is visible. With "slide" appended to the name, the top side of the submenu is actually the first to be visible and the submenu appears to slide.
• west-to-east-slide - Shows the left of the submenu first, and the area of visibility moves right until everything is visible. With "slide" appended to the name, the right side of the submenu is actually the first to be visible and the submenu appears to slide.
• east-to-west-slide - Shows the right of the submenu first, and the area of visibility moves left until everything is visible. With "slide" appended to the name, the left side of the submenu is actually the first to be visible and the submenu appears to slide.
• southeast-to-northwest-slide - Shows the southeast corner of the submenu first, and the area of visibility moves northwest until everything is visible. With "slide" appended to the name, the northwest corner of the submenu is actually the first to be visible and the submenu appears to slide
• northwest-to-southeast-slide - Shows the northwest corner of the submenu first, and the area of visibility moves southeast until everything is visible. With "slide" appended to the name, the southeast corner of the submenu is actually the first to be visible and the submenu appears to slide.
• southwest-to-northeast-slide - Shows the southwest corner of the submenu first, and the area of visibility moves northeast until everything is visible. With "slide" appended to the name, the northeast corner of the submenu is actually the first to be visible and the submenu appears to slide.
• northeast-to-southwest-slide - Shows the northeast corner of the submenu first, and the area of visibility moves southwest until everything is visible. With "slide" appended to the name, the southwest corner of the submenu is actually the first to be visible and the submenu appears to slide.
• none - Just show or hide subitems. Useful if you want the effect when showing a submenu, but no effect when hiding the submenu.

Note that the above list assumes that the submenu is becoming visible. If the submenu is being hidden, the effect is the same but "opposite": instead of one side being the first to become visible, it is the first side or corner to become invisible. Just test it out, you'll see :) View CSS file - View JavaScript file. Plugins: Last - Next