Fluid Mega Menu

by styphon

HTML

<nav class="clearfix">
    <ul class="fluid-menu navbar-inner">
        <li class="fluid-menu-top" data-fm-top="50">Test Category 1
            <div class="fluid-menu-window clearfix">
                <div class="fluid-menu-side">
                    <ul>
                        <li data-fm-side="51" class="fluid-menu-side-link">Test Category 1.1</li>
                        <li data-fm-side="52"><a href="products.php?cat=52">Test Category 1.2</a></li>
                        <li data-fm-side="53" class="fluid-menu-side-link">Test Category 1.3</li>
                        <li data-fm-side="54" class="fluid-menu-side-link">Test Category 1.4</li>
                        <li data-fm-side="55" class="fluid-menu-side-link">Test Category 1.5</li>
                        <li data-fm-side="56"><a href="products.php?cat=56">Test Category 1.6</a></li>
                        <li data-fm-side="137"><a href="products.php?cat=137">Test Category 1.7</a></li>
                        <li data-fm-side="138"><a href="products.php?cat=138">Test Category 1.8</a></li>
                        <li data-fm-side="139"><a href="products.php?cat=139">Test Category 1.9</a></li>
                        <li data-fm-side="140"><a href="products.php?cat=140">Test Category 1.10</a></li>
                    </ul>
                </div>
                <div class="fluid-menu-main-window">
                    <div class="fluid-menu-main clearfix" id="fluid-menu-main-51">
                        <ul>
                            <li>
                                <span class="fluid-menu-tier-three-parent">Test Category 1.1.1</span>
                                <ul>
                                    <li><a href="products.php?cat=59">Test Category 1.1.1.1</a></li>
                                    <li><a href="products.php?cat=60">Test Category 1.1.1.2</a></li>
                                    <li><a href="products.php?cat=61">Test Category 1.1.1.3</a></li>
                                 ...

CSS

nav {
    width: 600px;
    background: #131313;
}

ul.fluid-menu, ul.fluid-menu * {
	margin:			0;
	padding:		0;
    list-style:     none;
}
ul.fluid-menu {
	width:			100% /* THIS MUST BE THE MAX WIDTH OF THE MENU */
}
ul.fluid-menu a {
	display:		block;
	text-decoration:none;
}

/* Tier 1 */
ul.fluid-menu > li {
	position:		relative;
	min-width:		80px;
	height:			42px;
	line-height:	42px;
	padding:		0 10px 1px 10px;
	color:			#FFF;
	cursor:			pointer;
	float:			left;
	text-align:		center;
}
ul.fluid-menu > li:hover {
	
}
ul.fluid-menu .fluid-menu-open {
	background:		#FFF;
	color:			#000;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
ul.fluid-menu > li > a {
	color:			#FFF;
}
ul.fluid-menu > li > a:hover, 
ul.fluid-menu > li > a:active {
	background:		#FFF;
	color:			#000;
}

/* Tier 2 */
ul.fluid-menu div.fluid-menu-window {
	position:		absolute;
	margin-top:		2px;
	display:		none;
	z-index:		5;
}
ul.fluid-menu div.fluid-menu-side {
	position:		relative;
	width:			130px;
	height:			295px;
	padding:		15px 30px;
	background:		#FFF;
	-webkit-box-shadow: inset 0px 0px 25px 2px rgba(100, 100, 100, 0.1);
    box-shadow:		inset 0px 0px 25px 2px rgba(100, 100, 100, 0.1);
	border:			1px solid #CCC;
	float:			left;
	text-align:		left;
	z-index:		10;
}
ul.fluid-menu div.fluid-menu-open-side {
	padding:		15px 30px;
}
ul.fluid-menu div.fluid-menu-side > ul > li {
	width:			130px;
	padding: 		5px 2px;
	color:			#000;
	cursor:			pointer;
}
ul.fluid-menu div.fluid-menu-side > ul > li:hover {
	background-color: #f5f5f5;
	background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
	background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
	background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
	background-image: -o-linear-gradient(top,#fff,#e6e6e6);
	background-image: linear-gradient(to bottom,#fff,#e6e6e6);
	background-repeat: repeat-x;
	-webkit-border-radius: 4px;
	-moz-border-radius:...

JavaScript

/**
 * jQuery Plugin: Fluid Menu
 *
 * A customisable mega menu designed by Tony Christopher.
 * Copyright Fluid Studios Ltd © 2013
 * [email protected]
 */

;(function($){
	$.fn.fluidMenu = function(options) {
		
		var defaults = {
			speed: 200,
			t4width: 190,
		};
		var options = $.extend(defaults, options);
		
		var $menu = this;
		return $menu.each(function(options) {
			FluidInitiate();
			
			function FlushThis(id){
			   var msie = 'Microsoft Internet Explorer';
			   var tmp = 0;
			   //var elementOnShow = document.getElementById(id);
			   //var elementOnShow = $(id);
			   if(navigator.appName == msie) {
				  tmp = id.parent().offset().top  +  'px';
			   } else {
				  tmp = id.offsetTop;
			   }
			}
			
			function FluidOpen($this) {
				$this.addClass('fluid-menu-open');
				var $sub = $('.fluid-menu-window', $this);
				$sub.show(defaults.speed);
				FlushThis($sub);
			}
			
			function FluidClose($this) {
				$this.removeClass('fluid-menu-open');
				var $sub = $('.fluid-menu-window', $this);
				$sub.hide(defaults.speed);
			}
			
			function FluidSideOpen($this, delay) {
				var $sub = $('#fluid-menu-main-' + $this.data('fm-side'));
				$this.addClass('fluid-menu-side-link-open');
				$sub.delay(delay).stop().animate({left: '1px'}, defaults.speed).addClass('fluid-menu-open-side');
			}
			
			function FluidSideClose($this) {
				var $sub = $('#fluid-menu-main-' + $this.data('fm-side'));
				$sub.stop().animate({left: '-999px'}, defaults.speed).removeClass('fluid-menu-open-side');
				$this.removeClass('fluid-menu-side-link-open');
			}
			
			function FluidSideCloseSpecific($side) {
				$side.removeClass('fluid-menu-side-link-open');
				var $sub = $('#fluid-menu-main-' + $side.data('fm-side'));
				$sub.stop().animate({left: '-999px'}, defaults.speed).removeClass('fluid-menu-open-side');
			}
			
			function FluidCloseAll() {
				$parent =...