<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Top Web Resources &#187; DrillDown Menu</title>
	<atom:link href="http://www.iyiz.com/tag/drilldown-menu/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.iyiz.com</link>
	<description>iyiz.com</description>
	<lastBuildDate>Thu, 09 Feb 2012 11:14:51 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>13 Awesome Javascript CSS Menu</title>
		<link>http://www.iyiz.com/13-awesome-javascript-css-menu/</link>
		<comments>http://www.iyiz.com/13-awesome-javascript-css-menu/#comments</comments>
		<pubDate>Tue, 21 Oct 2008 17:31:53 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Web Design]]></category>
		<category><![CDATA[AJAX Dropdown Tab Menu]]></category>
		<category><![CDATA[DrillDown Menu]]></category>
		<category><![CDATA[Dropdown Menu]]></category>
		<category><![CDATA[Horizontal Animated Menus]]></category>
		<category><![CDATA[Sliding JavaScript Menu]]></category>
		<category><![CDATA[Vertical Animated Menus]]></category>

		<guid isPermaLink="false">http://www.iyiz.com/?p=110</guid>
		<description><![CDATA[Every web designer tries to be creative when it comes to designing the main navigation of the website. Today we would like to present you 13 awesome Javascript CSS menus that will be very handy and easy to modify to suit your needs. Popular javascript libraries are used: jQuery, Scriptaculous and Mootools. Lets take a [...]]]></description>
			<content:encoded><![CDATA[<p>Every web designer tries to be creative when it comes to designing the main navigation of the website. Today we would like to present you 13 awesome Javascript CSS menus that will be very handy and easy to modify to suit your needs. Popular javascript libraries are used: <a href="http://jquery.com/">jQuery</a>, <a href="http://script.aculo.us/">Scriptaculous</a> and <a href="http://mootools.net/">Mootools</a>.</p>
<p>Lets take a look at recent examples of these …</p>
<p><span id="more-110"></span></p>
<h3 class="title">1. Vertical Animated Menus</h3>
<h3 class="sub-title">1. <a href="http://woork.blogspot.com/2008/04/nice-animated-menu-using-css-and.html">Nice animated menu using CSS and Mootools</a></h3>
<div class="img-post"><img src="http://www.iyiz.com/dmg/animated-menus1.png" alt="animated menu" /></div>
<p>This tutorial illustrates how to implement a nice animated menu using Mootoolsand some lines of CSS and HTML code ready to reuse in your project.</p>
<div class="download"><a href="http://www.box.net/shared/t7fd9t8kk8">Download {Code}</a>| <a href="http://woork.bravehost.com/mefmoo/index.html">Live Demo</a></div>
<h3 class="sub-title">2. <a href="http://www.filamentgroup.com/lab/jquery_ipod_style_drilldown_menu">jQuery iPod-style Drilldown Menu</a></h3>
<div class="img-post"><img src="http://www.iyiz.com/dmg/jquery7.jpg" alt="jQuery Plugins" /></div>
<p>A jQuery 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.</p>
<div class="download">Demo can be found <a href="http://www.filamentgroup.com/examples/menusHierarchical/">here</a>.</div>
<h3 class="sub-title">3. <a href="http://greengeckodesign.com/projects/menumatic.aspx">MenuMatic </a></h3>
<div class="img-post"><img src="http://www.iyiz.com/dmg/animated-menus9.png" alt="jQuery Plugins" /></div>
<p>MenuMatic is a MooTools 1.2 class that takes a sematic ordered or unordered list of links and turns it into a dynamic drop down menu system.</p>
<div class="download"><a href="http://greengeckodesign.com/downloads/MenuMatic_0.67.zip">Download {Code}</a> | Demo can be found <a href="http://greengeckodesign.com/projects/menumatic/examples/vertical/">here</a>.</div>
<h3 class="sub-title">4. <a href="http://www.barandis.com/dev/jquery/ddmenu/index.html">BDC DrillDown Menu</a></h3>
<div class="img-post"><img src="http://www.iyiz.com/dmg/animated-menus10.png" alt="jQuery Plugins" /></div>
<p>The BDC DrillDown Menu is a compact, hierarchical drilldown menu implemented as a jQuery plugin. A drilldown menu takes up constant space like an accordian menu but offers the deep hierarchy of a flyout menu at the same time.</p>
<div class="download"><a href="http://www.barandis.com/dev/jquery/ddmenu/download.html">Download {Code}</a> | Demo can be found <a href="http://www.barandis.com/dev/jquery/ddmenu/examples.html">here</a>.</div>
<h3 class="title">2. Horizontal Animated Menus</h3>
<h3 class="sub-title">5. <a href="http://woork.blogspot.com/2008/01/mootools-animated-sidebar-menu.html">Mootools animated sidebar menu</a></h3>
<div class="img-post"><img src="http://www.iyiz.com/dmg/animated-menus2.png" alt="animated menu" /></div>
<p>This tutorial explains how to implement an animated menu using mootools. You can see how it works directly from <a href="http://mootools.net/">mootools site</a>.</p>
<div class="download"><a href="http://www.box.net/shared/o43rbxrsw4">Download {Code}</a>| <a href="http://mootools.net/">Live Demo</a></div>
<h3 class="sub-title">6.<a href="http://www.consideropen.com/blog/2008/06/simple-mootools-12-animated-menu/">Simple Animated Menu for Mootools 1.2</a></h3>
<div class="img-post"><img src="http://www.iyiz.com/dmg/animated-menus3.png" alt="animated menu" /></div>
<p>A really nice animated menu created using Mootools, with a flash hover effect of an arrow.</p>
<div class="download"><a href="http://www.consideropen.com/downloads/simple_animated_menu.zip">Download {Code}</a></div>
<h3 class="sub-title">7.<a href="http://www.leigeber.com/2008/05/sliding-javascript-menu-highlight-1kb/"><br />
Sliding JavaScript Menu Highlight</a></h3>
<div class="img-post"><img src="http://www.iyiz.com/dmg/animated-menus4.png" alt="animated menu" /></div>
<p>This sliding hover effect script is an easy method to add some flavor to your navigation. Using the CSS you can easily customize the navigation to fit your “look and feel”.</p>
<div class="download"><a href="http://www.leigeber.com/wp-content/uploads/2008/05/menueffect.zip">Download {Code}</a></div>
<h3 class="sub-title">8. <a href="http://www.andrewsellick.com/71/fancy-sliding-menu-for-mootools"><br />
Fancy Sliding Menu for Mootools</a></h3>
<div class="img-post"><img src="http://www.iyiz.com/dmg/animated-menus5.png" alt="animated menu" /></div>
<p>The menu is developed in Mootools with a nice sliding effect on each tab.</p>
<div class="download"><a href="http://www.andrewsellick.com/examples/tabslideV2-mootools/tabslideV2-mootools.rar">Download {Code}</a> | <a href="http://www.andrewsellick.com/examples/tabslideV2-mootools/">View Demo</a></div>
<h3 class="sub-title">9. <a href="http://tools.uvumi.com/dropdown.html"><br />
UvumiTools Dropdown Menu</a></h3>
<div class="img-post"><img src="http://www.iyiz.com/dmg/animated-menus6.png" alt="animated menu" /></div>
<p>A simple and lightweight menu that can be easily updated by simply editing a &lt;ul&gt; HTML element. Created using Mootools.</p>
<div class="download"><a href="http://tools.uvumi.com/dropdown.html">Download {Code}</a></div>
<h3 class="sub-title">10. <a href="http://users.tpg.com.au/j_birch/plugins/superfish/"><br />
Superfish</a></h3>
<div class="img-post"><img src="http://www.iyiz.com/dmg/animated-menus7.png" alt="animated menu" /></div>
<p>Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu and adds Suckerfish-style hover effect. Features include: Timed delay on mouseout, Animation of sub-menu reveal, Supports the hoverIntent plugin, drop shadows for capable browsers and more…</p>
<div class="download"><a href="http://users.tpg.com.au/j_birch/plugins/superfish/#download">Download {Code}</a> | <a href="http://users.tpg.com.au/j_birch/plugins/superfish/#examples">Demo can be found here</a></div>
<h3 class="sub-title">11. <a href="http://www.flash-free.org/en/2008/04/05/e24tabmenu-%e2%80%93-menu-desplegable-ajax/"><br />
AJAX Dropdown Tab Menu</a></h3>
<div class="img-post"><img src="http://www.iyiz.com/dmg/animated-menus8.png" alt="animated menu" /></div>
<p>e24TabMenu is a plugin written for <a href="http://script.aculo.us/">Scriptaculous</a>. It is a tab menu that expands collapse smoothly.</p>
<div class="download"><a href="http://www.flash-free.org/wp-content/files/e24tabmenu/e24tabmenu.zip">Download {Code}</a> | <a href="http://www.flash-free.org/wp-content/files/e24tabmenu/index.html">Demo can be found here</a></div>
<h3 class="sub-title">12. <a href="http://snook.ca/archives/javascript/jquery-bg-image-animations/">Using jQuery for Background Image Animations</a></h3>
<div class="img-post"><img src="http://www.iyiz.com/dmg/jquery11.jpg" alt="jQuery Plugins" /></div>
<p>Snook wrote a straignforward script to produce a nice menu background image animation. The animation needs to run when the user moves their mouse over and out of the navigation. The key thing to note is that any animation is stopped before attempting to animate again. This avoids animations queuing up from repeatedly moving the mouse in and out of the element.</p>
<div class="download"><a href="http://snook.ca/technical/jquery-bg/">Download {Code}</a></div>
<h3 class="sub-title">13. <a href="http://www.getintothis.com/blog/2006/09/26/my-first-jquery-plugin-a-sliding-menu/">A Sliding Menu</a></h3>
<div class="img-post"><img src="http://www.iyiz.com/dmg/animated-menus11.png" alt="Animated menus" /></div>
<p>It is a very simple sliding menu using the effects provided by <a href="http://interface.eyecon.ro/">Interface</a>. The defauly behavior of the menu is to hide after 1000ms (1 sec.) and to display when your mouse hovers over the “menu” label. The menu will also auto-hide after 1000ms when the mouse leaves the menu area. Most of these values, including the sliding effect, can be customized.</p>
<div class="download"><a href="http://www.getintothis.com/pub/projects/rb_menu/js/rb_menu.js">Download {Code}</a> | Demo can be found <a href="http://www.getintothis.com/pub/projects/rb_menu/">here</a></div>
]]></content:encoded>
			<wfw:commentRss>http://www.iyiz.com/13-awesome-javascript-css-menu/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

