В отличие от обычных меню, которые вы можете создать с помощью компонента Меню, Мега меню имеют большие размеры. Это позволяет разместить внутри них другие компоненты и виджеты. Меню такого типа широко используются при создании интернет-магазинов, поскольку их удобно использовать для навигации по сайту.
Ниже представлен пример того, как может выглядеть Мега меню:
Демо готового Мега меню, а также его исходный код можно найти здесь.
В этой статье представлено пошаговое руководство по созданию Мега меню с помощью Webix.
Шаг первый. Переопределение компонента Popup
Popup — это вариант компонента Window, который исчезает после того, как вы кликните где-либо на странице за его пределами. Этот компонент можно использовать для вывода сообщений, а также для создания всплывающего меню.
Наш сценарий использования требует от компонента необычного для него поведения. Нам нужно, чтобы он заполнил собой всю доступную ширину страницы. Еще одним требованием является использование попапов одинаковой высоты для различных элементов меню. Чтобы реализовать наш сценарий, мы можем использовать метод protoUI, который поможет нам создать новое view на основе уже существующих.
Вот как это работает:
name:"subpanel",
defaults:{
padding:0,
position:function(state){
state.left = 0;
state.width = state.maxWidth;
state.height = 380;
}
},
$init:function(config){
config.body = config.data;
config.body.borderless = true;
}
}, webix.ui.popup);
С помощью данного кода мы создали новое view с именем subpanel, а затем описали его дефолтные свойства. Мы задали для свойства left offset значение 0, и изменили начальные значения свойств width и height. Метод $init инициализирует компонент на странице. Также, мы указали, что наше новое view наследуется от существующего компонента popup.
Чтобы узнать больше о создании кастомных компонентов, загляните в соответствующее руководство.
Шаг второй. Создание меню
Наше Мега меню будет располагаться внутри компонента Toolbar. Для создания самого меню мы будем использовать компонент Menu:
//enabling CustomScroll
if (!webix.env.touch && webix.ui.scrollSize)
webix.CustomScroll.init();
webix.ui({
paddingX:10,
cols: [
{view: "menu", submenuConfig:{ view:"subpanel" },
width: 460, openAction:"click",
data:[
/* mega menu items*/
],
},
{}
],
})
})
Давайте взглянем на свойства меню. Параметр submenuConfig устанавливает в качестве объекта подменю view subpanel, которое было создано на предыдущем шаге. Вам нужно установить значение свойства width в соответствии с общим количеством элементов вашего мега меню. Свойство openAction определяет способ раскрытия подменю. В нашем примере, чтобы раскрыть элемент меню, необходимо кликнуть по нему. Параметр data содержит элементы нашего меню.
Шаг третий. Создание элементов меню
Теперь давайте разделим содержимое нашего меню на модули. Такой подход дает возможность легко менять порядок элементов или использовать их в других проектах.
В качестве примера, давайте создадим элемент меню “Electronics”, который показан на первом скриншоте статьи.
Прежде всего, нам нужно задать лэйаут:
value:"Electronics", submenu:{
cols:[
{ rows: [
{/* 1-ый хедер */},
{/* содержимое 1-го submenu */}
]
},
{ rows:[
{/* 2-й хедер */},
{/* содержимое 2-го submenu*/}
]}
]
}
};
Свойство submenu содержит элементы, которые появятся на экране внутри subpanel view после того, как вы кликните по элементу меню. Мы разделили подменю на два столбца. Каждый из них содержит две строки: одну для хедера и вторую — для содержимого. Вот пример того, как мы можем создать хедер, используя компонент Template:
Для первой части этого элемента Мега меню мы будем использовать компонент Grouplist. Это анимированный виджет, который позволяет визуализировать иерархические данные. Перед тем, как его использовать, давайте зададим данные, которые будут в него входить:
/* данные первого уровня */
{ id: "1", value: "Smartphones", data: [
/* данные второго уровня*/
{ id: "sm_0", value: "iOS", data: [
/* данные третьего уровня */
{ id: "sm_0_0", value: "iPhone 5"},
{ id: "sm_0_1", value: "iPhone 6"},
{ /* еще элементы*/}
]},
{id: "sm_1", value: "Android", data: [
{ id: "sm_1_0", value: "Nexus 5"},
{ /* еще элементы */}
]},
]},
{ id:"2", value:"Photo & Video", data:[
{ id: "p_0", value: "Digital cameras", data: [
{ id: "p_0_0", value: "Canon" },
{ /* и так далее */}
]},
]},
];
После того, как вы задали необходимые данные, элемент grouplist можно добавить во вторую строку первого столбца:
height:310, select:true, scroll:false}
Этот код установит массив electronics_data в качестве источника данных. Свойство height:310 устанавливает высоту элемента равной 310 пикселям, select:true позволяет выделять элементы, а scroll:false делает scrollbar неактивным.
Теперь нам нужно что-то разместить во второй строке второго столбца. На этот раз, использовать иерархические данные нет необходимости, а значит, мы можем применить компонент List.
Ниже приведен пример данных, которые можно использовать в качестве содержимого:
{ id:1, value:"Car Audio"},
{ id:2, value:"Car Video"},
{ /* etc */},
];
Для создания нового view list можно использовать те же свойства, что и в предыдущем примере:
height:310, select:true, scroll:false}
Шаг четвертый. Добавляем созданные элементы в Мега Меню
Комбинируя доступные виджеты, вы можете создать нужную конфигурацию мега меню. Чтобы заставить все компоненты работать вместе, просто разместите созданные переменные в параметре data вашего меню.
Вот так выглядит содержимое мега меню, которое было создано в качестве примера для данной статьи:
home,
electronics,
films,
login,
cart
]
Комбинируя виджеты Template, Pager, List и DataTable, вы можете получить следующий результат:
А вот так может выглядеть комбинация двух форм:
Обратите внимание на то, как выглядит свойство data, которое определяет содержимое и порядок элементов Мега меню. Поскольку вместо кода мы используем ранее описанные модули, то легко можем изменить последовательность элементов или их конфигурацию, а также исправить ошибки.
Заключение
Webix позволяет создать любое Мега меню, которое вам необходимо. Для создания нужного лэйаута могут использоваться сложные комбинации строк и столбцов. Любые виджеты можно использовать в качестве элементов Мега меню. И помните, что вы всегда можете создать собственный вариант уже имеющегося компонента.
Чтобы посмотреть полное демо и его исходный код, перейдите по ссылке.
