{"id":3231,"date":"2015-01-17T12:29:49","date_gmt":"2015-01-17T10:29:49","guid":{"rendered":"http:\/\/www.samlogic.net\/blog\/?p=3231"},"modified":"2019-07-08T12:27:19","modified_gmt":"2019-07-08T12:27:19","slug":"how-to-create-a-menu-interface-with-3-columns-with-buttons","status":"publish","type":"post","link":"https:\/\/www.samlogic.net\/blog\/2015\/01\/how-to-create-a-menu-interface-with-3-columns-with-buttons\/","title":{"rendered":"How to create a menu interface with 3 columns with buttons"},"content":{"rendered":"

\"\"It is easy to create a menu interface with 2 columns with buttons in CD-Menu Creator<\/a>. You only need to select the Double Columns<\/strong> option in the Buttons<\/strong> tab in CD-Menu Creator\u00b4s editor, and add your buttons. Then you will have a menu interface with two columns with buttons. If you click here<\/a> you can see an example of such a menu.<\/p>\n

But what about a menu interface with 3 columns with buttons? Can this be easily done? Well, some more work is needed, but it is quite easy also. The tip below shows how to create a menu interface with 3 columns with buttons:<\/p>\n

1. Start the CD-Menu Creator editor.
\n2. Open the Buttons<\/strong> tab.
\n3. Select Left<\/strong> in the Placement<\/strong> frame.<\/p>\n

\"Buttons:<\/p>\n

4. Open the Buttons (text)<\/strong> tab.
\n5. Click on the Add Button<\/strong> button.
\n6. Enter “Alfa” (or other text) in the Text (button)<\/strong> text box.
\n7. Click OK<\/strong>.
\n8. Click on the Add Button<\/strong> button again.
\n9. Enter “Beta” (or other text) in the Text (button)<\/strong> text box.
\n10. Click on the Options<\/strong> button.
\n11. Open the Position<\/strong> tab.
\n12. Select the Next free (horizontal\/vertical) position<\/strong> option.<\/p>\n

\"Next<\/p>\n

13. Click OK<\/strong>, and OK<\/strong> again.
\n14. Now select the button with the text “Beta” in the button list.
\n15. Click on the Copy Button<\/strong> button and click on Yes<\/strong> in the message box that is shown.
\n16. Repeat this process until you have 6 buttons in the list.
\n17. Double click on button 3, 4, 5 and 6 and enter “Gamma”, “Delta”, “Epsilon” and “Zeta” (or other text) so every button have a unique text.<\/p>\n

\"6<\/p>\n

We have now created a menu interface with 6 buttons. To make the buttons appear in 3 columns you need to adjust the button width and the menu window width, so 3 buttons fits in one row without problem. You can for example enter the following dimensions:<\/p>\n

1. Open the Buttons<\/strong> tab.
\n2. Enter “160” at Width<\/strong> (this sets the button width).
\n3. Open the Window<\/strong> tab.
\n4. Enter “553” at Width<\/strong> (this sets the window width).<\/p>\n

You can now preview the menu window (click on the Preview<\/strong> button). The menu window should look like this:<\/p>\n

\"Menu<\/p>\n

Instead of entering a width manually at step 4 above, you can click on the Size<\/strong> button and use the mouse to resize the menu window so it will have a proper width. The buttons will draw itself automatically when you adjust the menu windows width, and you can adjust the menu width until 3 columns with buttons are drawn and the distance between the rightmost button and the right border is ok.<\/p>\n

\"Window<\/p>\n

When you select the Next free (horizontal\/vertical) position<\/strong> option (see step 12 above) this button will be drawn in the first free area to the right of the previous added button (see figure 1 below). If there is no free area to the right, the button is drawn on the next row instead (see figure 2 below).<\/p>\n

\"Figure<\/p>\n

More tips<\/strong>
\nMore tips about how to use CD-Menu Creator is available on our tips & tricks page<\/a> for the tool.<\/p>\n","protected":false},"excerpt":{"rendered":"

It is easy to create a menu interface with 2 columns with buttons in CD-Menu Creator. You only need to select the Double Columns option in the Buttons tab in CD-Menu Creator\u00b4s editor, and add your buttons. Then you will have a menu interface with two columns with buttons. If you click here you can … <\/p>\n

Continue reading “How to create a menu interface with 3 columns with buttons”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[15],"tags":[],"_links":{"self":[{"href":"https:\/\/www.samlogic.net\/blog\/wp-json\/wp\/v2\/posts\/3231"}],"collection":[{"href":"https:\/\/www.samlogic.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.samlogic.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.samlogic.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.samlogic.net\/blog\/wp-json\/wp\/v2\/comments?post=3231"}],"version-history":[{"count":2,"href":"https:\/\/www.samlogic.net\/blog\/wp-json\/wp\/v2\/posts\/3231\/revisions"}],"predecessor-version":[{"id":6217,"href":"https:\/\/www.samlogic.net\/blog\/wp-json\/wp\/v2\/posts\/3231\/revisions\/6217"}],"wp:attachment":[{"href":"https:\/\/www.samlogic.net\/blog\/wp-json\/wp\/v2\/media?parent=3231"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.samlogic.net\/blog\/wp-json\/wp\/v2\/categories?post=3231"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.samlogic.net\/blog\/wp-json\/wp\/v2\/tags?post=3231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}