Great Examples Of Menu Designs

MenuMatic Vertical Example

Example

Click to DEMO

 

MenuMatic Horizontal Example

Example

Click to DEMO

 

Suckerfish Dropdown

Example

Click to DEMO

 

Kwicks for jQuery horizontal animated menu

Example

Click to DEMO

 

Dropline with current selection

Example

Click to DEMO

 

Prototype type Vertical Menu

Example

Click to DEMO

 

Digg like Navigation Bar using CSS

Example

Click to DEMO

 

Flickr Menu

Example

Click to DEMO

 

Simple CSS vertical menu Digg-like

Example

Click to DEMO

 

GettyImages like search options menu with Scriptaculous

Example

Click to DEMO

 

Fancy Sliding Tab Menu

Example

Click to DEMO

 

Urban Gray Accordion Menu

Example

Click to DEMO

 

Glossy Accordion Menu

Example

Click to DEMO

 

Bullet List Accordion Menu

Example

Click to DEMO

 

Create a Slick Tabbed Content Area using CSS & jQuery

Example

Click to DEMO

 

Slate CSS Menu

Example

Click to DEMO

 

Vert-one CSS Menu

Example

Click to DEMO

 

Classics CSS Menu

Example

Click to DEMO

 

Rounded CSS Menu

Example

Click to DEMO

 

Matte CSS Menu

Example

Click to DEMO

 

Dolphin CSS Menu

Example

Click to DEMO

 

Jungle CSS Menu

Example

Click to DEMO

 

Fisheye JavaScript Menu

Example

Click to DEMO

 

Lava Lamp Menu Examples

Example

Click to DEMO

 

SuckerFish Style using jQuery

Example

Click to DEMO

 

Create Vimeo-like top navigation

Example

Click to DEMO

Google Extension Effect with CSS or jQuery or MooTools JavaScript

HTML - CSS Only Method

<div class="item itemCss">
 <a href="javascript:;">
  <div class="item-billboard item-billboard-css">
   <img src="my-chrome-theme.jpg">
  </div>
  <div class="item-detail">
   <p>There's more detail about the item inside this DIV!</p>
  </div>
 </a>
</div>

HTML - MooTools Method

<div class="item itemJs">
 <a href="javascript:;">
  <div class="item-billboard" style="margin-top: 0px;">
   <img src="my-chrome-theme.jpg">
  </div>
  <div class="item-detail">
   <p>There's more detail about the item inside this DIV!</p>
  </div>
 </a>
</div>

HTML - jQuery Method

 <div class="item itemJQuery">
  <a href="javascript:;">
   <div class="item-billboard" style="margin-top: 0px;">
    <img src="my-chrome-theme.jpg">
 </div>
   <div class="item-detail">
    <p>There's more detail about the item inside this DIV!</p>
   </div>
  </a>
 </div> 

CSS

.item {
  position: relative;
  width: 240px;
  overflow: hidden;
  border: 1px solid #ccc;
  }
  
.item {
  height: 200px;
  }
  
.item-billboard-css {
    
  -webkit-transition-property: margin-top;
  -webkit-transition-duration: .5s;
  
  -moz-transition-property: margin-top;
  -moz-transition-duration: .5s;
  
  -o-transition-property: margin-top;
  -o-transition-duration: .5s;
  
  -ms-transition-property: margin-top;
  -ms-transition-duration: .5s;
  }
  
.itemCss:hover .item-billboard {
  margin-top: -200px;
  }
  
.item a {
  text-decoration: none;
  color: #000;
  }
  
.item-billboard, .item-detail {
  padding: 10px;
  height: 180px;
  }
  
.item-billboard {
  margin-top: 0;
  background: #fff;
  }
  
.item-billboard h3 {
  font-size: 13px;
  font-weight: bold;
  color: #262626;
  }
  
.item-detail {
  /*background: #ececec;*/
  background: #cd0000;
  color:#FFFFFF;
  }

jQuery.js

Click to Download

MooTools.js

Click to Download

jQuery-Scripts.js

Click to Download

MooTools-Scripts.js

Click to Download

Example

Click to DEMO

MooTabs

css

.mootabs_title { list-style-image: none; list-style-type: none; margin: 0px; padding: 0px; height: 24px; }

.mootabs_title li { float: left; background-color: transparent; padding: 2px 8px 2px 8px; margin-right: 2px; cursor: pointer; color: #999; height: 24px; line-height: 24px; font-weight:bold; }

.mootabs_title li.active { border-top: 3px solid #FF0000; }

.mootabs_panel { display: none; position: relative; width: 100%; top: -1px; clear: both; overflow: auto; 	text-align:left; padding: 10px; }

.mootabs_panel.active { background-color: #E2E2E2; display: block; }

.mootabs_title li.over { border-top: 3px solid #993300; }

HTML

<div id="myTabs" class="mootabs">
  <ul class="mootabs_title">
  <li title="My Work">My Work</li>
  <li title="About Me">About Me</li>
  <li title="Contact">Contact</li>
  </ul>
  
  <div id="My Work" class="mootabs_panel">
<h1>Tab 1</h1>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.				</div>
  
  <div id="About Me" class="mootabs_panel">
  <h1>Tab 2</h1>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.				</div>
  <div id="Contact" class="mootabs_panel">
  <h1>Tab 3</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.				</div>
  </div>

MooTools Usage

window.addEvent('domready', init);
			function init() {
				myTabs1 = new mootabs('myTabs', {height: '200px', width: '500px', changeTransition: Fx.Transitions.Back.easeOut, mouseOverClass: 'over'});
				
			}

mootools.v1.1.js

Click Here to DOWNLOAD

mootabs1.2.js

Click Here to DOWNLOAD

Example

Click to DEMO

Page Peel Effect Using MooTools

CSS

#page-flip { position: relative; right: 0; top: 0; float: right; }
#page-flip-image { width: 50px; height: 52px; z-index: 99; position: absolute; right: 0; top: 0; -ms-interpolation-mode: bicubic; }
#page-flip-message { width: 50px; height: 50px; overflow: hidden; position: absolute; right: 0; top: 0; background: url(subscribe.png) no-repeat right top; }

HTML

<div id="page-flip">
<a href="http://feeds.feedburner.com/iGPSTechBlog"><img src="page_flip.png" alt="Subscribe!" id="page-flip-image" border="0" /></a>
<div id="page-flip-message"></div>
</div>

MooTools JavaScript

(function($,$$) { window.addEvent('domready',function() {
   
   var flip = $('page-flip');
   var flipImage = $('page-flip-image');
   var flipMessage = $('page-flip-message');
   
   flip.addEvents({
    mouseenter:function() {
     $$(flipImage,flipMessage).set('morph',{ duration: 500 }).morph({
      width: 307,
      height: 319
     });
    },
    mouseleave:function() {
     flipImage.set('morph',{ duration: 220 }).morph({
      width: 50,
      height: 52
     });
     flipMessage.set('morph',{ duration:200 }).morph({
      width: 50,
      height:50
     });
    } 
   });
  }); })(document.id,$$);

MooTools 1.2.3

Click Here to DOWNLOAD

Example

Click to DEMO

Using MooTools For Opacity

* MooTools 1.2 is required.

The following MooTools snippet takes every image with the "opacity" class and sets the element’s opacity based upon the number in the image’s rel tag.

MooTools JavaScript

/* on dom ready ... */
  window.addEvent('domready', function() {
   /* for each image that requires opacity */
   $$('.opacity').each(function(el) {
    /* set the opacity based on the alt value */
    el.set('opacity','.' + el.getProperty('alt'));
   });
  });

XHTML

<p align="left"><img src="fruit_and_veg.jpg" alt="80" class="opacity" /></p>
<p align="left"><img src="fruit_and_veg.jpg" alt="60" class="opacity" /></p>
<p align="left"><img src="fruit_and_veg.jpg" alt="40" class="opacity" /></p>
<p align="left"><img src="fruit_and_veg.jpg" alt="20" class="opacity" /></p>

Step 5: The MooTools 1.2

Click Here to DOWNLOAD

Example

Click to DEMO

MooTools Gone Wild: Implement Element Flashing

XHTML

<div id="flash-me"><a id="flash-link" href="javascript:;">Click here</a> to make me flash!</div>

MooTools JavaScript

/* dom ready... */
		window.addEvent('domready', function() {
			
			/* implement flashing */
			Element.implement({
				flash: function(to,from,reps,prop,dur) {
					
					//defaults
					if(!reps) { reps = 1; }
					if(!prop) { prop = 'background-color'; }
					if(!dur) { dur = 250; }
					
					//create effect
					var effect = new Fx.Tween(this, {
							duration: dur,
							link: 'chain'
						})
					
					//do it!
					for(x = 1; x <= reps; x++)
					{
						effect.start(prop,to,from).start(prop,from,to);
					}
				}
			});

Usage

/* flash on click */
			$('flash-link').addEvent('click', function () {
				$('flash-me').flash('#fff','#fffea1',5,'background-color',500);
			});
			
/* flash on ajax complete */
			$('flash-link-ajax').addEvent('click', function () {
				//make the ajax call
				var req = new Request({
					method: 'get',
					url: 'example2.php',
					data: { 'do' : '1' },
					onRequest: function() {  },
					onComplete: function(response) {
						$('flash-me-ajax').set('text',response).flash('#fff','#fffea1',5,'background-color',500); 
					}
				}).send();
				
			});
			
/* flash on scroll ending */
			$('flash-link-scroll').addEvent('click', function() {
				var scroller = new Fx.Scroll(window, {
					onComplete: function() {
						$('scroll-to-me').flash('#fff','#fffea1',10);
					}
				}).toElement('scroll-to-me');
			});
		});

Step 5: The MooTools 1.2

Click Here to DOWNLOAD

Example

Click to DEMO

MooTools 1.2 Zebra Tables Example

CSS

.highlight { background:#d5fcdc; }
.even { background:#fff; }
.mo { background:#e3f1fb; }
.odd { background:#eee; }
.list-table th { padding:5px; background:#ddd; border-bottom:1px solid #999; text-align:left; font-weight:bold; }
.list-table td { padding:5px 20px 5px 5px; border-bottom:1px solid #ddd; }

XHTML

<table cellspacing="0" cellpadding="0" class="list-table">
  <tbody><tr class="odd">
   <th><b>Award</b></th>
   <th><b>Actor</b></th>
   <th><b>Film</b></th>
  </tr>
  <tr class="highlight">
   <td>Actor In A Leading Role</td>
   <td>Daniel Day-Lewis</td>
   <td>There Will Be Blood</td>
  </tr>
  <tr class="highlight">
   <td>Actress In A Leading Role</td>
   <td>Marion Cotillard</td>
   <td>La Vie en Rose</td>
  </tr>
  <tr class="highlight">
   <td>Actor In A Supporting Role</td>
   <td>Javier Bardem</td>
   <td>No Country For Old Men</td>
  </tr>
  <tr class="highlight">
   <td>Actress In A Supporting Role</td>
   <td>Tilda Swinton</td>
   <td>Michael Clayton</td>
  </tr>
  <tr class="highlight">
   <td>Directing</td>
   <td>Joel Coen and Ethan Coen</td>
   <td>No Country For Old Men</td>
  </tr>
 </tbody></table>

JavaScript

/* classes */
  var ZebraTable = new Class({
   //initialization
   initialize: function(table_class) {
    
    //add table shading
    $$('table.' + table_class + ' tr').each(function(el,i) {
     
     //do regular shading
     var _class = i % 2 ? 'even' : 'odd'; el.addClass(_class);
     
     //do mouseover
     el.addEvent('mouseenter',function() { if(!el.hasClass('highlight')) { el.addClass('mo').removeClass(_class); } });
     
     //do mouseout
     el.addEvent('mouseleave',function() { if(!el.hasClass('highlight')) { el.removeClass('mo').addClass(_class); } });
     
     //do click
     el.addEvent('click',function() {
      //click off
      if(el.hasClass('highlight'))
      {
       el.removeClass('highlight').addClass(_class);
      }
      //clock on
      else
      {
       el.removeClass(_class).removeClass('mo').addClass('highlight');
      }
     });
     
    });
   }
  });
  
  /* do it! */
  window.addEvent('domready', function() { 
   var zebraTables = new ZebraTable('list-table');
  });

Step 5: The MooTools 1.2

Click Here to DOWNLOAD

Example

Click to DEMO

Implementing Basic and Fancy Show/Hide in MooTools 1.2

One of the great parts of MooTools is that the library itself allows for maximum flexibility within its provided classes. You can see evidence of this in the "Class" class implement method. Using the implement method, you can add your own methods to custom or core classes.

Basic Example – MooTools JavaScript

//when the dom is ready...
  window.addEvent('domready', function() {
   //time to implement basic show / hide
   Element.implement({
    //implement show
    show: function() {
     this.setStyle('display','');
    },
    //implement hide
    hide: function() {
     this.setStyle('display','none');
    }
   });
   

Basic Example – XHTML / Usage

<p>
 <b>Basic: </b><a href="javascript:$('blove').show();">Show</a> | <a href="javascript:$('blove').hide();">Hide</a><br>
 <img id="blove" src="toys.jpg">
</p>

Fancy Example – MooTools JavaScript

//time to implement basic fancy show / hide
   Element.implement({
    //implement fancy show
    fancyShow: function() {
     this.fade('in');
    },
    //implement fancy hide
    fancyHide: function() {
     this.fade('out');
    }
   });
   
  });

Fancy Example – XHTML / Usage

<p>
 <b>Fancy: </b><a href="javascript:$('blove2').fancyShow();">Show</a> | <a href="javascript:$('blove2').fancyHide();">Hide</a><br>
 <img id="blove2" src="toys.jpg">
</p>

Step 5: The MooTools 1.2

Click Here to DOWNLOAD

Example

Click to DEMO

Get Slick with MooTools Kwicks

Step 1: Create Images

You’ll need an image for kwick, obviously. Make them all the same width. 

Sample Width & Height : 285 pixels, Height: 143 pixels.

Step 2: HTML

<div id="kwick"> <ul class="kwicks"> <li><a class="kwick john" href="http://en.wikipedia.org/wiki/John_lennon" title="John Lennon"><span>John Lennon</span></a></li> <li><a class="kwick paul" href="http://en.wikipedia.org/wiki/Paul_mccartney" title="Paul McCartney"><span>Paul McCartney</span></a></li> <li><a class="kwick george" href="http://en.wikipedia.org/wiki/George_harrison" title="George Harrison"><span>George Harrison</span></a></li> <li><a class="kwick ringo" href="http://en.wikipedia.org/wiki/Ringo_starr" title="Ringo Starr"><span>Ringo Starr</span></a></li> </ul> </div>

Step 3: CSS

#kwick { width:590px; } #kwick .kwicks  { height:143px; list-style-type:none; margin:0; padding:0; } #kwick li  { float:left; } #kwick .kwick  { display:block; cursor:pointer; overflow:hidden; height:143px;width:134px;} #kwick .kwick span  { display:none; } #kwick .john  { background:url(kwicks/john.gif) no-repeat; } #kwick .paul  { background:url(kwicks/paul.gif) no-repeat; } #kwick .george  { background:url(kwicks/george.gif) no-repeat; } #kwick .ringo  { background:url(kwicks/ringo.gif) no-repeat; }

Step 4: The MooTools 1.2 JavaScript

  Click Here to Download  

Example

Dynamically Load Stylesheets Using MooTools 1.2

Step 1: The XHTML

<p>
<a rel="css/black.css" class="load-css" href="?theme=black">Load Black Stylesheet</a><br><br>
<a rel="css/red.css" class="load-css" href="?theme=red">Load Red Stylesheet</a><br><br>
<a rel="css/blue.css" class="load-css" href="?theme=blue">Load Blue Stylesheet</a>
</p>

Step 2: The CSS

/* black.css */
body { background:#000; color:#fff; }
a    { color:#ccc; }


/* blue.css */
body { background:#00f; color:#fff; }
a   { color:#fff; }


/* red.css */
body   { background:#f00; color:#fff; }
a      { color:#fff; }

Step 3: The MooTools JavaScript

window.addEvent('domready', function () {
			$$('.load-css').each(function(el) {
				el.addEvent('click', function(e) {
					e = new Event(e).stop();
					var css = new Asset.css(el.get('rel'), { });
				});
			});
		});

Example

Click Here to DEMO