Convert Mega Menu to vertical operation.

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

Convert Mega Menu to vertical operation.

Post by norman » Tue Jul 16, 2013 1:07 pm

You can tweak Mega Menu so the top-level sections appear vertically, with the menu flying out to the right as follows:

First choose a Theme for your menu. In this readme we'll use "configurable".

Go to Design / Library / Layouts / Multi Column Menu / configurable.

Look for:

Code: Select all

ul#topnav li {
	float: left;
Change to:

Code: Select all

ul#topnav li {
	float: none;
	width: 150px;
Look for:

Code: Select all

ul#topnav li a {
	float: left;
Change to:

Code: Select all

ul#topnav li a {
	float: none;
Look for:

Code: Select all

ul#topnav li .sub {
	position: absolute;	
	top: 27px; left: 0;
Change to:

Code: Select all

ul#topnav li .sub {
	position: absolute;	
	top: 0px; left: 150px;
You can change the two occurrences of 150px to suit the column width where you put the menu.

Another change that may be needed is to go to Settings / Site Options / Layout / Multi Column Menu and set MenuInsideId to the ID of a DIV that is wide enough to contain the expanded menu. Usually a DIV that's the width of your page content area works well.

Edit file multicolumnmenu.js (in your Site folder) and look for the line:

Code: Select all

	  $(this).hide().css('left', '0');	// Drillpine reset left
Change to:

Code: Select all

	  // $(this).hide().css('left', '0');	// Drillpine reset left
That should be the menu tweaked.
Norman

Post Reply