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)
};
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 */
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>
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)
Layout "configurable" (in Design / Library / Layouts / Multi Column Menu) can also be tweaked to adjust the menu style.