top sidemenu

Webix JS
1

Hi,

i create a new post because the old one seems to be dead jeje.

so, I need to use sidemenu view to create a sidemenu from top, not from the left.

On the other hand i need the doc for sidemenu, i need to set width and height for the view too and other things so…

Here is the old post: http://forum.webix.com/discussion/3653/off-canvas-menu#latest

Thanks and regards!

2

Hi,

The next version will contain only left SideMenu. The documentation will also be updated to explain how the new view works.

You can consider “mega menu” demo as the example of top menu

Regards

3

Thanks, maybe i can adapt myself if i could set width and height to that left side menu.

Can you help me?

Thanks and regards

4

It would be easier use Window in this case. You can set size and position for it.

5

It is a design and navegation question.

I could prefer to set my own height and width to a sidemenu. So,

Is it posible?

Thanks!

6

The width is set via menuWidth property of “sidemenu”. menuWidth is 200 by default. You can define “height” and in this case the main part will take this height too.

So, if you want to show sidemenu from the top, there is not such a possibility.

7

thanks Maria,

one last question. I am going to use side menu, but i want to change that default width from 200 to screen.width*2/3.

But i need to change that default on window.onorientationchange event.

So i need to update that width on that event, can you tell me how?
Can you tell me the code line please?
If posible…

Thanks and regards!

8

You can set onRotate event handler:

http://docs.webix.com/api___onrotate_event.html

The width can be changed via:

menu.define("width", 300);
menu.resize();
9

Thanks. At the end i did it with “menuWidth” property.

On the other hand, i have this sidemenu that i want to reconstruct its content.

Sample:

_mainUI.elements.sideMainMenu =
{
view: “eventlayout”,
id: “sideMenu”,
rows:
[
{ view: “template”, template: “

Menu
” }
]

}

_mainUI.elements.sideAlerts =
{
view: “eventlayout”,
id: “sideMenu”,
rows:
[
{ view: “template”, template: “

Alerts
” }
]

}

_mainUI.elements.index =
{
view: “sidemenu”,
menuWidth: width * 2 / 3,
id: “index”,
menu:
{
view: “eventlayout”,
id: “sideMenu”,
rows: [ _mainUI.elements.sideMainMenu ]
},
body:
{
rows: [ _mainUI.elements.indexLayOut ]
}
}

i have buttons with click events and when a button is clicked i need to change sidemenu (menu property).

i have this:

$$(“index”).define(“menu”, _mainUI.elements.sideAlerts);
$$(“index”).resize(); → i need a method to update menu property…which one?

So, resuming, i think i need the method to rebiuld o reconstruct that menu property…could you tell me which one?

If there is a better way, tell me please…

Thanks and regards!

10

Please take a look at the following article about dynamic layout changing:

http://docs.webix.com/desktop__dynamic_layout.html#rebuildingapplicationlayout

11

thanks!