DP_PanelManager:
Animated Menu

The HTML code:

<div id="ItemMenuHolder" class="MenuOffset1">
	<div id="ItemMenu" class="MenuOffset2">
		<div id="Item_1" class="MenuItem">Item 1!</div>
		<div id="Item_2" class="MenuItem">Item 2!</div>
		<div id="Item_3" class="MenuItem">Item 3!</div>
		<div id="Item_4" class="MenuItem">Item 4!</div>
		<div id="Item_5" class="MenuItem">Item 5!</div>
	</div>
</div>
		

The Style sheet:

<style type="text/css">
	.MenuOffset1 {
		padding: 20px;
		background-color: #eeeeee;
	}
	.MenuOffset2 {
		padding: 20px;
		background-color: #dddddd;
	}
	.MenuItem {
		font-color: black;
		font-weight: bold;
		background-color: gray;
		width: 50px;
	}
</style>
		

The JavaScript code:

<script language="JavaScript" type="text/javascript" src="DP_PanelManager.js"></script>
<script type="text/javascript">
	init = function() {

			// Create a Panel Manager for the Menu
		Menu = new DP_PanelManager();
			// Create a new Panel Manager for Popups
		Popups = new DP_PanelManager();

			// Add All the Menu Items to the panel manager
			// Create popup elements
		for ( var Cnt = 1; Cnt <= 5; Cnt++ ) {
				// Add Panels to the Manager
			CurPanel = Menu.addPanel("Item_" + Cnt);
				// Create a Popup for that item
			CurPanel.Popup = Popups.newPanel("Popup_" + Cnt);
				// Style the menu item
			CurPanel.setOpacity(50);
				// Style the popup
			CurPanel.Popup.style.backgroundColor = "gray";
			CurPanel.Popup.load("This is Popup '" + Cnt + "'.");
			CurPanel.Popup.setSize([0, 0]);
			CurPanel.Popup.setPosition([CurPanel.getPosition()[0], CurPanel.getPosition()[1] + 100]);
			CurPanel.Popup.setOrder("toFront");
				// Register Mouse event with items
			CurPanel.addEvent("mouseover", Item_mouseover);
			CurPanel.addEvent("mouseout", Item_mouseout);
		};

		function Item_mouseover(Event) {
				// Get the Current "Left" position of the panel
			var CurLeft = this.getPosition()[1];
				// Modify the menu item
			this.setOpacity(100, 0, 50);
			this.setSize([null, 100], 0, 100);
			this.setPosition([null, CurLeft + 5]);
				// Reset the Popup
			this.Popup.setSize([0, 0]);
				// Modify the generated popup
			this.Popup.setDisplay("show");
			this.Popup.setSize([200, 300], 100, 100);
		};

		function Item_mouseout(Event) {
				// Get the Current "Left" position of the panel
			var CurLeft = this.getPosition()[1];
				// Modify the Popup
			this.Popup.setSize([0, 0], 0, 100);
			this.Popup.setDisplay("hide", 100);
				// Modify the menu item
			this.setPosition([null, CurLeft - 5]);
			this.setSize([null, 50], 100, 50);
			this.setOpacity(50, 150, 50);
		};

	};
</script>