Display vertical menu on LHS with menu flying out on right

Horizontal menu bar with dynamic multi column drop-down display.
Post Reply
norman
Site Admin
Posts: 1238
Joined: Sat Feb 07, 2004 9:55 pm

Display vertical menu on LHS with menu flying out on right

Post by norman » Mon May 14, 2012 11:58 pm

Making Multi Column Menu into a left hand column flyout menu.

This requires a good bit of tweaking and you may need to further adjust the CSS for best looks.

1) Install Mega Menu using "For a general purpose setup...." in the ReadMe. If already installed set everything to default.


2) Replace file multicolumnmenu.js (in your Site folder) with:

Code: Select all

// Tweaked Drillpine V1.04 - CUSTOMISED FOR LEFT COLUMN FLYOUT
function megaHoverOver(){
	var sub = $(this).find(".sub").stop().fadeTo('fast', 1).show();
	//Calculate width of all ul's
	(function($) { 
		jQuery.fn.calcSubWidth = function() {
			rowWidth = 0;
			//Calculate row
			$(this).find("ul").each(function() {					
				rowWidth += $(this).width() + MenuSubItemAdjust; 
			});	
		};
	})(jQuery); 
	
	if ( $(this).find(".row").length > 0 ) { //If row exists...
		var biggestRow = 0;	
		//Calculate each row
		$(this).find(".row").each(function() {							   
			$(this).calcSubWidth();
			//Find biggest row
			if(rowWidth > biggestRow) {
				biggestRow = rowWidth;
			}
		});
		//Set width
		$(this).find(".sub").css({'width' :biggestRow});
		$(this).find(".row:last").css({'margin':'0'});
		
	} else { //If row does not exist...
		
		$(this).calcSubWidth();
		//Set Width
		$(this).find(".sub").css({'width' : rowWidth});
		
	}
}

function megaHoverOut(){ 
  $(this).find(".sub").stop().fadeTo('fast', 0, function() {
	  $(this).hide().css('left', MenuInside);	// Drillpine reset left
  });
}

var config = {    
	 sensitivity: 7, // number = sensitivity threshold (must be 1 or higher)    
	 interval: 100, // number = milliseconds for onMouseOver polling interval    
	 over: megaHoverOver, // function = onMouseOver callback (REQUIRED)    
	 timeout: 200, // number = milliseconds delay before onMouseOut    
	 out: megaHoverOut // function = onMouseOut callback (REQUIRED)    
};
3) Replace Design / Library / Layouts / Multi Column Menu / configurable with:

Code: Select all

/* Start Configurable Multi Column Menu - CUSTOMISED FOR LEFT COLUMN FLYOUT */

#multicolumnmenu {
	<actinic:variable name="MenuContainerStyle" />
}

.mcmseeall	{	/* for the See all ... link */
	<actinic:variable name="MenuMaxThirdLevelStyle" />
}

ul#topnav {
	margin: 0; padding: 0;
	width: 100%;
	list-style: none;
	background-color: <actinic:variable name="MenuTopBarColour" />;
	border: <actinic:variable name="MenuTopBarBorder" />;
}

ul#topnav li {
	height: 20px;
	width: 95%;
	margin: 0; 
	padding-top: 7px;
	padding-left: 7px;
	/* border-right: <actinic:variable name="MenuTopBarSeparator" />; */
	position: relative; /* --Important--*/
	z-index: 8888;
}

ul#topnav li a {
	padding: 0;
	font-weight: <actinic:variable name="MenuTopTextWeight" />;
	color: <actinic:variable name="MenuTopTextColour" />;
	text-decoration: none;
}

ul#topnav li a:hover { 
	color: <actinic:variable name="MenuTopTextHoverColour" /> !important;
}

ul#topnav li:hover { /*--Hover State--*/
	background-color: <actinic:variable name="MenuTopBarHoverColour" />;
} 

ul#topnav li .sub {
	position: absolute;	
	top: 0px; left: <actinic:variable name="MenuInsideId" />px;
	background: <actinic:variable name="MenuSubBarColour" />;
	border: <actinic:variable name="MenuSubSectionBorder" />;
	z-index: 8888;	
	padding: 20px 20px 20px;
	float: left;
	/*--Bottom right rounded corner--*/
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	/*--Bottom left rounded corner--*/
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
	display: none;
}

ul#topnav li .row {
	clear: both;
	float: left;
	width: 100%;
	margin-bottom: 10px;
}

ul#topnav li .sub ul{
	list-style: none;
	margin: 0; padding: 0;
	width: <actinic:variable name="MenuSubColumnWidth" />px;
	float: left;
}
ul#topnav .sub ul li {
	border-right: none;
	height: auto;
	width: 100%;
}
ul#topnav .sub ul li h2 {
	padding: 0;  margin: 0;
	padding-left:10px;
	font-size: 1.1em;
}
ul#topnav .sub ul li h2 a {
	padding: 3px 0;
	background-image: none;
	color: <actinic:variable name="MenuSubTextColour" />;
	font-weight: <actinic:variable name="MenuSubTextWeight" />;
}
ul#topnav .sub ul li a {
	float: none; 
	text-indent: 0; /*--Reset text indent--*/
	height: auto;
	padding: 3px 5px 7px 15px;
	display: block;
	text-decoration: none;
	font-weight: normal;
	color: <actinic:variable name="MenuSubSubTextColour" />;
}

ul#topnav .sub ul li:hover {
	background-color: <actinic:variable name="MenuSubBarHoverColour" />; /*--Hover State--*/
} 

ul#topnav .sub ul li a:hover {
	color: <actinic:variable name="MenuSubTextHoverColour" /> !important;
}

.mcmparent	{	/* for the parent top section */
	<actinic:variable name="MenuTopParentStyle" />
}

/* End Configurable Multi Column Menu */
4) Replace Design / Library / Layouts / Multi Column Menu / Multi Column Menu Setup with:

Code: Select all

<script type="text/javascript">
	// v111 - CUSTOMISED FOR LEFT COLUMN FLYOUT
	if ( typeof(jQuery) == 'undefined' ) document.write('<script type="text/javascript" src="jquery-1.3.2.min.js"></sc' + 'ript>');
</script>
<actinic:block if="%3cactinic%3avariable%20name%3d%22MenuUseHoverIntent%22%20%2f%3e" >
	<script type="text/javascript" src="jquery.hoverintent.minified.js"></script>
</actinic:block>
<script type="text/javascript" src="multicolumnmenu.js"></script>
<script type="text/javascript">
var MenuSubItemAdjust = <actinic:variable name="MenuSubItemAdjust" selectable="false" />;
var MenuInside = '<actinic:variable name="MenuInsideId" encoding="perl" selectable="false" />';
$(document).ready(function() {
	// MenuInside = $('#<actinic:variable name="MenuInsideId" encoding="perl" selectable="false" />');
	// $("ul#topnav li .sub").css({'opacity':'0'});
	<actinic:block if="%3cactinic%3avariable%20name%3d%22MenuUseHoverIntent%22%20%2f%3e" >$("ul#topnav li").hoverIntent(config);</actinic:block>
	<actinic:block if="%21%20%3cactinic%3avariable%20name%3d%22MenuUseHoverIntent%22%20%2f%3e" >$("ul#topnav li").hover(megaHoverOver,megaHoverOut);</actinic:block>
});
</script>
5) Go to Settings / Site Options / Layout / Multi Column Menu and set everything to defaults except:

Code: Select all

Menu Theme				 configurable
MenuBrochureColumns	 2		(or 3 - this is the number of items across in the flyout
								 	   don't make flyout wider than the page)
MenuColumns				2		(or 3 - this is the number of items across in the flyout
									    don't make flyout wider than the page)
MenuInsideId			140		(this becomes the setting for the flyout left offset
									    adjust as required) 
Other settings can be tweaked once the menu is operating.

Layout "configurable" (in Design / Library / Layouts / Multi Column Menu) can also be tweaked to adjust the menu style.
Norman

Post Reply