DHTMLX Little-Known Features: Attaching Menu to Layout

| Comments (6)

This post is for those people who want to save as mush space in their apps as the can. We provide the possibility to attach the menu to the layout header. And it can be done quite easy, let’s see.

attach-menu-in-layout

Step 1.

We attach the container for the menu in the layout header.

var myLayout = new dhtmlXLayoutObject(document.body, "3L");
myLayout.cells("a").setText("<div id='menu_here'></div><div class='collapsed_text'>This is collapsed cell</div>");

Step 2.

Then we init the menu in the created container.

var myMenu = new dhtmlXMenuObject({
    parent: "menu_here",
    icons_path: "imgs/",
    xml: "dhxmenu.xml"
});

Step 3.

Also we need to disable text/collapsed_text replacement while cell expands or collapses, i.e. no ability to set different text for a collapsed cell (note: this will affect on all the cells)

dhtmlXLayoutCell.prototype._hdrUpdText = function(){};

Step 4.

Final step is adding some CSS to make it nice :) The following code is for SkyBlue skin.

/* important for proper layout rendering */
html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    background-color: #ebebeb;
    overflow: hidden;
}
/* menu customization */
div.dhtmlxMenu_dhx_skyblue_Middle {
    position: relative;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    font-weight: normal;
    background: none;
}
div.dhtmlxMenu_dhx_skyblue_TopLevel_Item_Normal {
    border-width: 0px;
    margin: 3px 3px 1px 1px;
    line-height: 21px;
}
div.dhtmlxMenu_dhx_skyblue_TopLevel_Item_Selected {
    margin-top: 2px;
    line-height: 21px;
}
div.dhtmlxMenu_dhx_skyblue_Middle div.top_sep {
    height: 19px;
    border-color: #a4bed4;
}
/* if cell collapsed hide menu */
div.dhx_cell_layout.dhxlayout_collapsed_v div.dhtmlxMenu_dhx_skyblue_Middle {
    display: none;
}
/* text for collapsed cell */
div.collapsed_text {
    display: none;
}
div.dhx_cell_layout.dhxlayout_collapsed_v div.collapsed_text {
    display: inline;
}

menu-layout-skyblue

CSS for Web skin

.dhtmlxMenu_dhx_web_Middle {
    background: none;
}
div.dhtmlxMenu_dhx_web_TopLevel_Item_Normal,
div.dhtmlxMenu_dhx_web_TopLevel_Item_Disabled,
div.dhtmlxMenu_dhx_web_TopLevel_Item_Selected {
    color: white;
    margin-top: 5px;
}
.dhtmlxMenu_dhx_web_Middle div.top_sep {
    border-color: white;
    margin-top: 6px;
}
div.dhx_cell_layout.dhxlayout_collapsed_v div.dhtmlxMenu_dhx_web_Middle {
    display: none;
}

menu-layout-web

CSS for Terrace skin

div.dhtmlxMenu_dhx_terrace_TopLevel_Item_Normal,
div.dhtmlxMenu_dhx_terrace_TopLevel_Item_Disabled,
div.dhtmlxMenu_dhx_terrace_TopLevel_Item_Selected {
    border-color: #f5f5f5;
    margin-top: 1px;
}
.dhtmlxMenu_dhx_terrace_Middle div.top_sep {
    width: 1px;
    border-right: 1px solid #ccc;
    margin: 4px 3px 0 2px;
    height: 24px;
}
div.dhx_cell_layout.dhxlayout_collapsed_v div.dhtmlxMenu_dhx_terrace_Middle {
    display: none;
}

attach-menu-in-layout

We hope that some of you will find it useful for your apps. Feel free to leave your comments below.

Comments

  1. cemang February 20, 2015 at 7:41 pm

    Great !!!

  2. Niss February 26, 2015 at 10:48 am

    It works! Thanks

  3. Brian March 5, 2015 at 5:25 am

    Why not just use:
    var myMenu = myLayout.cells(“a”).cells(id).attachMenu();

    This is much easier, cleaner and less chance of messing it up.

    • Brian March 5, 2015 at 5:26 am

      or rather:
      var myMenu = myLayout.cells(“a”).attachMenu();

    • Ivan (DHTMLX team) March 5, 2015 at 12:32 pm

      Because we have “expand/collapse” button in the header that we need to leave.

      If we just attach the menu separately and hide the header, the button mentioned above will also be hidden.

      • Brian March 5, 2015 at 3:32 pm

        Makes sense. That’s what’s great about dhtmlx, the components can be dropped into divs on any page or added to other dhtmlx components using APIs. Endless possible combinations.

Leave a Reply