{"id":2714,"date":"2015-02-17T18:01:05","date_gmt":"2015-02-17T14:01:05","guid":{"rendered":"http:\/\/www.dhtmlx.com\/blog\/?p=2714"},"modified":"2023-05-05T13:49:30","modified_gmt":"2023-05-05T10:49:30","slug":"attaching-menu-to-layout","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/attaching-menu-to-layout\/","title":{"rendered":"DHTMLX Little-Known Features: Attaching Menu to Layout"},"content":{"rendered":"

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<\/a> to the layout<\/a> header. And it can be done quite easy, let’s see.<\/p>\n

\"attach-menu-in-layout\"
\n
\nStep 1.<\/strong><\/p>\n

We attach the container for the menu in the layout header.<\/p>\n

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

Step 2.<\/strong><\/p>\n

Then we init the menu in the created container.<\/p>\n

var<\/span> myMenu =<\/span> new<\/span> dhtmlXMenuObject(<\/span>{<\/span>
\n    parent:<\/span> "menu_here"<\/span>,<\/span>
\n    icons_path:<\/span> "imgs\/"<\/span>,<\/span>
\n    xml:<\/span> "dhxmenu.xml"<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

Step 3.<\/strong><\/p>\n

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)<\/p>\n

dhtmlXLayoutCell.prototype<\/span>._hdrUpdText =<\/span> function<\/span>(<\/span>)<\/span>{<\/span>}<\/span>;<\/span><\/div><\/div>\n

Step 4.<\/strong><\/p>\n

Final step is adding some CSS to make it nice :) The following code is for SkyBlue skin.<\/p>\n

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

\"menu-layout-skyblue\"
\n
\nCSS for Web skin<\/strong><\/p>\n

.dhtmlxMenu_dhx_web_Middle<\/span> {<\/span>
\n    background<\/span>:<\/span> none<\/span>;<\/span>
\n}<\/span>
\ndiv.dhtmlxMenu_dhx_web_TopLevel_Item_Normal,<\/span>
\ndiv.dhtmlxMenu_dhx_web_TopLevel_Item_Disabled,<\/span>
\ndiv.dhtmlxMenu_dhx_web_TopLevel_Item_Selected<\/span> {<\/span>
\n    color<\/span>:<\/span> white<\/span>;<\/span>
\n    margin-top<\/span>:<\/span> 5px<\/span>;<\/span>
\n}<\/span>
\n.dhtmlxMenu_dhx_web_Middle<\/span> div.top_sep<\/span> {<\/span>
\n    border-color<\/span>:<\/span> white<\/span>;<\/span>
\n    margin-top<\/span>:<\/span> 6px<\/span>;<\/span>
\n}<\/span>
\ndiv.dhx_cell_layout<\/span>.dhxlayout_collapsed_v<\/span> div.dhtmlxMenu_dhx_web_Middle<\/span> {<\/span>
\n    display<\/span>:<\/span> none<\/span>;<\/span>
\n}<\/span><\/div><\/div>\n

\"menu-layout-web\"
\n
\nCSS for Terrace skin<\/strong><\/p>\n

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

\"attach-menu-in-layout\"<\/p>\n

We hope that some of you will find it useful for your apps. Feel free to leave your comments below.<\/p>\n","protected":false},"excerpt":{"rendered":"

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 …<\/p>\n","protected":false},"author":2,"featured_media":3308,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,71,1,38],"tags":[33,43,14],"class_list":["post-2714","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-posts-for-codeproject-com","category-tutorials","category-uncategorized","category-visible","tag-all-posts","tag-dhtmlx-tips","tag-tips"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2714","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=2714"}],"version-history":[{"count":1,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2714\/revisions"}],"predecessor-version":[{"id":11405,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2714\/revisions\/11405"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/3308"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=2714"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=2714"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=2714"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}