WEBIX JAVASCRIPT LIBRARY BLOG

Unlike the regular menus that you can create using the Menu Component, Mega Menus are big and wide enough to allow you place other components and widgets within them. Such a type of menus is widely used on the online shopping websites since it’s pretty easy to use them for navigation purposes.

Here’s an example of how this menu works:

The demo of the final mega menu with its source code is here.

In this article, we’ll create our own mega menu with Webix in a few easy steps.

As we know, web app development is a complex process that, on the one hand, consists of laborious work at the backend and, on the other hand, includes plenty of efforts while creating a nice-looking and responsive UI.

If you want to optimize the construction of your web applications, you need to find the best option for organizing your work with data as well as a fast and powerful js library for drawing app interface.

This variant can be implemented by using OData, an open data protocol for building RESTful API’s, and by adapting Webix UI library to its rules of requesting and modifying data.

OData’s goal is to enable a broad access to data regardless of the way it is stored. It allows requesting and updating resources via HTTP commands and provides an entire query language directly in the URL.

Well, if you are reading this post, you probably know a lot about Webix. If suddenly no, you can find more info here. All in all, I can say that our users find it fast and easy.

Kanban boards allow visualizing the workflow in an easy and intuitive way. And Webix has a tool that allows you to create your own Kanban Board.

There’s already a well written guide that describes how you can use the Webix Kanban Board widget. This time we’ll take a look at some tips and tricks you can use to customize the existing project management application.

Splitting the Columns

First of all, the basics. Here’s how you can create a simple Kanban Board:

And here’s the result:

Webix version 2.4 brings you a new UI component that allows creating portal layouts in an easy and intuitive way. Portlet component can be dragged over the page and swapped with other portlets. This behaviour allows you to rearrange your web page elements the way you want. Let’s take a look at the basics of portlet usage.

Portlets Basics

You can create a basic portlet in the same way as other Webix UI components. Just set “portlet” as the view property value. The body property defines the portlet content:

By arranging portlets into rows and columns, you can create the required layout which can be easily reorganized if necessary:

The result is shown below: