Convert Mega Menu to vertical operation.
Posted: 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:
Change to:
Look for:
Change to:
Look for:
Change to:
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:
Change to:
That should be the menu tweaked.
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;
Code: Select all
ul#topnav li {
float: none;
width: 150px;
Code: Select all
ul#topnav li a {
float: left;
Code: Select all
ul#topnav li a {
float: none;
Code: Select all
ul#topnav li .sub {
position: absolute;
top: 27px; left: 0;
Code: Select all
ul#topnav li .sub {
position: absolute;
top: 0px; left: 150px;
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
Code: Select all
// $(this).hide().css('left', '0'); // Drillpine reset left