menu bar multy-drop down

[angelsier]

HELLO

i am working in a big project that will be hard and big....can u help me with this plz????

 

i want to do like i show on the image but i dont now how :Si think is all on the image but i think that will be javascript + css and i dont now css language :Siff some 1 can help me out that will be great compz

[davej]

I think one way to start would be to build each of those menu parts. Build a row of buttons. Build the various columns of buttons. Build the various palettes of links.

[Hadien]

such a request is pretty difficult for someone without CSS knowledge to fulfill. and its not something thats easy to answer on the spot. depending on the behavior you're looking for, this can be more advanced than it first appears. but it can be done.I once done something similar with jQuery's UI tooltips (for some "Yo dawg, I heard you like tooltip-ception" goodness). if you're not careful it can get buggy on you (since jQuery UI tooltips weren't meant to be used that way) but they'll effectively do the job. with jQuery UI you'll have access to at least a dozen animation effects and numerous easing motions, plus other prebuilt utilities already at hand to lay much of the ground work.

div.menuheader{width:200px;}div.slideDown{display:inline;}div.menuheader+div{display:none;}

<div class="menuRoot">  <div class="menuheader slideRight">root menu</div>  <div>    <div class="menuheader slideDown">horizontal menu 1</div>    <div>      <div class="menuheader slideRight">vertical menu 1</div>      <div>        <!-- innermost menu-->      </div>      <div class="menuheader slideRight">vertical menu 2</div>      <div>        <!-- other menu items -->      </div>    </div>    <div class="menuheader slideDown">horizontal menu 2</div>    <div>      <!-- other menu items -->    </div>  </div></div>

var right,down;right = {	track:false,	hide:{effect:"slide",direction:"left",duration:800},    show:{effect:"slide",direction:"left",duration:200},    position:{my:"left top",at:"right+10px top",collision:"flipfit flipfit"},    close:function( event, ui ) {        var style = ui.tooltip.attr("style");        var remove = function(){ui.tooltip.remove();}        var reopen = function () {ui.tooltip.stop(true).attr("style",style);}        var reclose = function () {ui.tooltip.stop(true).toggle("slide",{direction:"left"},800,remove);};        ui.tooltip.hover(reopen,reclose);        reclose();    	},    items:".slideRight",	content:function(){return $("<div>").append($(this).next().html()).tooltip(down);}	}down = {	track:false,	hide:{effect:"slide",direction:"up",duration:800},    show:{effect:"slide",direction:"up",duration:200},    position:{my:"left top",at:"left bottom+10px",collision:"flipfit flipfit"},    close:function( event, ui ) {        var style = ui.tooltip.attr("style");        var remove = function(){ui.tooltip.remove();}        var reopen = function () {ui.tooltip.stop(true).attr("style",style);}        var reclose = function () {ui.tooltip.stop(true).toggle("slide",{direction:"up"},800,remove);};        ui.tooltip.hover(reopen,reclose);        reclose();    	},    items:".slideDown",	content:function(){return $("<div>").append($(this).next().html()).tooltip(right);}	}$("div.menuRoot").tooltip(right);

the code is still incomplete, the super-menus will close and deallocate themselves when you hover into the sub-menus, which by extension also delete the sub-menus. I'll try to add in the catching handlers to stop that later, when I figure it out, but heres to show you the gist of it. tooltip animation isn't quite as accessible so you can't do exactly the same thing to it as you can do to other elements.if you want some other animation effects or have the elements positioned a little differently then thats easy to change from this, with a little research in the jQueryUI documentation. and if you don't understand some thing I'll try and explain it.

Edited November 27, 2013 by Hadien

[Hadien]

another update.I've spent some time and wrote up a custom tooltip widget "nesttip" in jQuery ui which should perform to your needs, for the most part. I was able to have the submenus propagate control to the supermenus so that when they close they'll close their parents. one thing however is that I can't seem to have the menus fully reopen if you catch them halfway open/closed. for now I just forced a small delay so that they don't close immediately, but thats not what I wanted initially to happen. Nesttip widget:

(function( $ ) {	$.widget( "custom.nesttip", $.ui.tooltip, {		options: {			position: {				my: "left+15 top",				at: "left top",				collision: "flipfit flipfit"			},			hide:{effect:"slide",direction:"up",duration:800},			show:{effect:"slide",direction:"up",duration:200}		},		_create: function() {			//force no mouse tracking. mouse needs to be able to			// hover over nested tooltip			this.options.track = false;			this._super();			this.currentTooltip = null;			this._supermenu = null;			this._delayClose = null;		},		adopted:function(target){			target = $(target).first();			if(!(target.length) || target.data("nesttip") ===null)				return false;				//adoption failed, target wasn't a				// proper nesttip widget			this._supermenu = target;			return true;		},		orphaned:function(){			this._supermenu = null;		},		_open: function( event, target, content ) {			this._superApply(arguments);			var self = this;			this.currentTooltip = this._find( target );			this.currentTooltip.hover(this.reopen,this.reclose);		},		close:function(event){			//I can't ssem to find a clean way to have the sub-tooltip fully			// reopen the parent tooltip, for now I force a small delay in			// the close script for mouse traversal the problem isn't solved,			// just a bypass solution.			if(this._delayClose!==null){				//normally will do nothing, but if close is called again				// before setTimeout completes...				clearTimeout(this._delayClose);				this._delayClose = null				return this._superApply(arguments);			} 			//setTimeout or _delay don't work directly with _superApply,			// so I got a little creative.			this._delayClose = setTimeout(this.close,400,event);		},		_removeTooltip:function(tooltip){			//if currentTooltip hasn't shifted attention to another target			// before this tooltip is removed, set currentTooltip to null			// this is so reclose can know when to delegate reclose if there			// are any tooltips open wouldn't want it to try to close a			// supermenu if the user meant to hover some other submenu.			if(this.currentTooltip 			&& this.currentTooltip.attr("id")==tooltip.attr("id"))				this.currentTooltip = null;			this._superApply(arguments);		},		reopen: function(){			//reopen only prevents tooltips from closing if they aren't			// fully closed yet tooltips that have already closed will ignore			// this and not propagate reopen.			if(this.currentTooltip === null)				return;			//cancel possible close&delete callbacks			this.currentTooltip.stop( true );			if(this._delayClose!==null){				clearTimeout(this._delayClose);				this._delayClose = null;			}			//if any, make sure the ancestor tooltips also stay open			if(this._supermenu!==null) this._supermenu.nesttip("reopen");			//remove the regular handlers that would close the tooltip,			// calling reclose or simply re-hovering/re-focusing the			// tooltip's target will repair original handlers and will			// close itself			this._off(this.element, "mouseleave focusout");		},		reclose: function(){			//reclose only closes tooltips that are still open.			if(this.currentTooltip === null)				return;			var self = this;			this.currentTooltip.stop( true );			this._hide( this.currentTooltip, this.options.hide, function() {				self._removeTooltip( $( this ) );				//after this tooltip finishes closing, 				if(self.currentTooltip ===null && self._supermenu !==null)					self._supermenu.nesttip("reclose");			});		}  });}( jQuery ) ); 

I also wrote a wrapper function to for your particular multi-menu:

function slider(target,options){	target = $(target);//make sure its a jquery object	if (!(target.length || 0 in target)) throw "invalid jQuery object passed in argument 1";	var ttOptions = {};//list of preset options	var options = options || {};	var d;//reverse direction that animations actually use	if($(parent).length) this.supermenu = $(parent).first();	options.effect    = options.effect    || "slide";	options.openTime  = options.openTime  || 200;	options.closeTime = options.closeTime || 800;	var childOpts     = $.extend({},options)	options.direction = options.direction || "down";	options.direction = (""+options.direction).toLowerCase();	ttOptions.position={my:"left top",at:"left bottom+10",collision:"flipfit flipfit"}	switch(options.direction){		case "right": 			d = "left";			ttOptions.items = ".slideRight";			childOpts.direction="down";			ttOptions.position.my="left top";			ttOptions.position.at="right+10px top";			break;		case "left": 			d="right";			ttOptions.items = ".slideLeft";			childOpts.direction="up";			ttOptions.position.my="right top";			ttOptions.position.at="left-10px top";			break;		case "up":			d="down";			ttOptions.items = ".slideUp";			childOpts.direction="left";			ttOptions.position.my="left bottom";			ttOptions.position.at="left+10px bottom";			break;		case "down":		default:			d="up";			options.direction = "down";			ttOptions.items = ".slideDown";			childOpts.direction="right";			ttOptions.position.my="left top";			ttOptions.position.at="left bottom+10px";		break;	}	ttOptions.hide={"effect":options.effect,direction:d,duration:options.closeTime};	ttOptions.show={"effect":options.effect,direction:d,duration:options.openTime };	ttOptions.content=function(){			var nest = $("<div>").append($(this).next().html())			slider(nest,childOpts).nesttip("adopted",target);			return nest;		}	return target.nesttip(ttOptions);} 

now all you have to do to map all the tooltip functionality, using the html I posted in my previous post, is to run this line in a script tag after the menu html:

slider($(".menuRoot"),{direction:"right"});

boom. your menu should behave like you want. take it for a spin and see if you like the behavior. after that we can work on the css to get it the look you want. lot more work for a post than I usually write up, but it just so happens I was thinking on using similar behavior on one of my own sites.

Edited December 3, 2013 by Hadien