I Love PHPMaker

... because it gets even more powerful and flexible!!

I Love PHPMaker » Customize Template » How to Switch Your Site Menu from Horizontal to Vertical and Vice Versa Easily Using PHPMaker version 9.0.1

How to Switch Your Site Menu from Horizontal to Vertical and Vice Versa Easily Using PHPMaker version 9.0.1

This following modification will make the ability to switch your site menu from using Horizontal to Vertical and vice-versa easily in websites that generated with PHPMaker. Since PHPMaker still allows you to use one of the two menu layout (whether Horizontal or Vertical) in one occasion, then you have to re-generate your script files using PHPMaker after adjusting the related setting from Graphical extension (for registered users only).

After implementing template customization below, now you don't have to re-generate your script files each time you want to switch it from one to another. Simply adjust the related constant in your generated configuration file, then your site menu will turn to the new layout as you want to.

Please note that the default value of the menu orientation will be derived from the Graphical extension under the Tools menu -> Extensions menu -> Graphical menu -> Advanced tab -> Project tab -> Orientation column. Try to play with it from PHPMaker and then see the result in your ewcfg9.php file.

Updated on May 29, 2012: This customization has been implemented in PHPMaker version 9.0.2, it matches to each other, and as a result, it works properly.

Updated on July 21, 2012: This customization has been implemented in PHPMaker version 9.0.3, it matches to each other, and as a result, it works properly.

Updated on September 4, 2012: This customization has been implemented in PHPMaker version 9.0.4, it matches to each other, and as a result, it works properly.

Updated on November 26, 2012: This customization has been implemented in PHPMaker version 9.1.0, it matches to each other, and as a result, it works properly.

Updated on February 9, 2013: This customization has been implemented in PHPMaker version 9.2.0, it matches to each other, and as a result, it works properly.

Updated on June 16, 2013: This customization has been handled by using MasinoGraphical extension. You don't need to implement the customization below if you use the extension using the original PHPMaker Template and Extensions.

[hidepost]

  1. First of all, if you have not used the Graphical extension, then it's time for you to use it! To do this, go to Tools -> Extensions of PHPMaker, and then enable the Graphical extension by giving it a checked mark, afterwards re-generate your script files using PHPMaker in order to extract the extension to your template. Make sure you do not skip this step, otherwise you will not find the extracted Graphical extension files in your template.
  2. Open your \Script\ewcfg.php file, and find this code:

    // General

    before that line, please insert the following code:

    // Begin of modification Supports for Horizontal and Vertical Menu, by Masino Sinaga, April 30, 2011
<!--##
var sExtName = "Graphical";
var EXT = EXTS(sExtName);
if (EXT.Enabled) {
	var sOrientation;
	if (ew_IsNotEmpty(EXT.PROJ.Properties("Orientation").Value)) {
		sOrientation = EXT.PROJ.Properties("Orientation").Value;
	} else {
		sOrientation = PROJ.GetExtDefault(sExtName, "Project", "Orientation");
	}
	bVertMenu = (String(sOrientation).toUpperCase() == "VERTICAL");
	bHorizMenu = (!bVertMenu);
}
##-->
define("MS_MENU_HORIZONTAL", <!--##=String(bHorizMenu).toUpperCase()##-->, TRUE); // Default value is <!--##String(bHorizMenu).toUpperCase()##-->, set the second parameter to TRUE if you want to use horizontal (default), or FALSE if you want vertical menu.
// End of modification Supports for Horizontal and Vertical Menu, by Masino Sinaga, April 30, 2011
  3. Open your \extensions\Graphical\ewmenu.php file, and find this code:

    <!--## if (bHorizMenu) { ##-->
var RootMenu = new YAHOO.widget.MenuBar("RootMenu", { autosubmenudisplay: true, hidedelay: 750, lazyload: true });
<!--## } else { ##-->
var RootMenu = new YAHOO.widget.Menu("RootMenu", { position: "static", hidedelay: 750, lazyload: true });
<!--## } ##-->

    then replace it with the following code:

    <?php if (MS_MENU_HORIZONTAL) { // Begin of modification Supports for Horizontal and Vertical Menu, by Masino Sinaga, April 30, 2011 ?>
var RootMenu = new YAHOO.widget.MenuBar("RootMenu", { autosubmenudisplay: true, hidedelay: 150, lazyload: false });
<?php } else { ?>
var RootMenu = new YAHOO.widget.Menu("RootMenu", { position: "static", hidedelay: 150, lazyload: false });
<?php } // Begin of modification Supports for Horizontal and Vertical Menu, by Masino Sinaga, April 30, 2011 ?>
  4. Open your \extensions\Graphical\ewmenucfg.php file, and find this code:

    <!--## if (bVertMenu) { ##-->
define("EW_MENUBAR_CLASSNAME", "yuimenu", TRUE);
define("EW_MENUBAR_ITEM_CLASSNAME", "yuimenuitem", TRUE);
define("EW_MENUBAR_ITEM_LABEL_CLASSNAME", "yuimenuitemlabel", TRUE);
<!--## } ##-->
<!--## if (bHorizMenu) { ##-->
define("EW_MENUBAR_CLASSNAME", "yuimenubar yuimenubarnav", TRUE);
define("EW_MENUBAR_ITEM_CLASSNAME", "yuimenubaritem", TRUE);
define("EW_MENUBAR_ITEM_LABEL_CLASSNAME", "yuimenubaritemlabel", TRUE);
<!--## } ##-->

    then replace it with the following code:

    if (MS_MENU_HORIZONTAL) { // Begin of modification Supports for Horizontal and Vertical Menu, by Masino Sinaga, April 30, 2011
define("EW_MENUBAR_CLASSNAME", "yuimenubar yuimenubarnav", TRUE);
define("EW_MENUBAR_ITEM_CLASSNAME", "yuimenubaritem", TRUE);
define("EW_MENUBAR_ITEM_LABEL_CLASSNAME", "yuimenubaritemlabel", TRUE);
} else {
define("EW_MENUBAR_CLASSNAME", "yuimenu", TRUE);
define("EW_MENUBAR_ITEM_CLASSNAME", "yuimenuitem", TRUE);
define("EW_MENUBAR_ITEM_LABEL_CLASSNAME", "yuimenuitemlabel", TRUE);
} // End of modification Supports for Horizontal and Vertical Menu, by Masino Sinaga, April 30, 2011
  5. Warning: This step only for PHPMaker < 9.1.0. Open your \extensions\Graphical\ewmenuext.php file, and find this code:

    <!--##session menu_top##-->
<!--## if (bHorizMenu) { ##-->
<div class="ewMenuRow">
<!--## } ##-->
<!--## if (bVertMenu) { ##-->
	<!-- content (begin) -->
  <table cellspacing="0" class="ewContentTable">
		<tr>
			<td class="ewMenuColumn">
			<!-- left column (begin) -->
<!--## } ##-->
<!--##/session##-->	
			
			
<!--##session menu_bottom##-->
<!--## if (bHorizMenu) { ##-->
</div>
	<!-- content (begin) -->
  <table cellspacing="0" class="ewContentTable">
		<tr>
<!--## } ##-->
<!--## if (bVertMenu) { ##-->
			<!-- left column (end) -->
			</td>
<!--## } ##-->
<!--##/session##-->

    then replace it with the following code:

    <!--##session menu_top##-->
<?php if (MS_MENU_HORIZONTAL) { // Begin of modification Supports for Horizontal and Vertical Menu, by Masino Sinaga, April 30, 2012 ?>
<div class="ewMenuRow">
<?php } else { // modification Supports for Horizontal and Vertical Menu, by Masino Sinaga, April 30, 2012 ?>
	<!-- content (begin) -->
  <table cellspacing="0" class="ewContentTable">
		<tr>
			<td class="ewMenuColumn">
			<!-- left column (begin) -->
<?php } // modification Supports for Horizontal and Vertical Menu, by Masino Sinaga, April 30, 2012 ?>
<!--##/session##-->	
			
			
<!--##session menu_bottom##-->
<?php if (MS_MENU_HORIZONTAL) { // modification Supports for Horizontal and Vertical Menu, by Masino Sinaga, April 30, 2012 ?>
</div>
	<!-- content (begin) -->
  <table cellspacing="0" class="ewContentTable">
		<tr>
<?php } else { // modification Supports for Horizontal and Vertical Menu, by Masino Sinaga, April 30, 2012 ?>
			<!-- left column (end) -->
			</td>
<?php } // End of modification Supports for Horizontal and Vertical Menu, by Masino Sinaga, April 30, 2012 ?>
<!--##/session##-->
  6. Warning: This step only for PHPMaker version >= 9.1.0. Open your \extensions\Graphical\ewmenuext.php file, and find this code:

    <!--## if (bHorizMenu) { ##-->
<div class="ewMenuRow">
<!--## } ##-->
<!--## if (bVertMenu) { ##-->
	<!-- content (begin) -->
  <table cellspacing="0" class="ewContentTable">
		<tr>
			<td class="ewMenuColumn">
			<!-- left column (begin) -->
<!--## } ##-->
<!--##=SYSTEMFUNCTIONS.IncludeFile("menu","")##-->
<!--## if (bHorizMenu) { ##-->
</div>
	<!-- content (begin) -->
  <table cellspacing="0" class="ewContentTable">
		<tr>
<!--## } ##-->
<!--## if (bVertMenu) { ##-->
			<!-- left column (end) -->
			</td>
<!--## } ##-->

    then replace it with the following code:

    <?php if (MS_MENU_HORIZONTAL) { // Begin of modification Supports for Horizontal and Vertical Menu, by Masino Sinaga, April 30, 2012 ?>
<div class="ewMenuRow">
<?php } else { // modification Supports for Horizontal and Vertical Menu, by Masino Sinaga, April 30, 2012 ?>
    <!-- content (begin) -->
  <table cellspacing="0" class="ewContentTable">
        <tr>
            <td class="ewMenuColumn">
            <!-- left column (begin) -->
<?php } // modification Supports for Horizontal and Vertical Menu, by Masino Sinaga, April 30, 2012 ?>
<!--##=SYSTEMFUNCTIONS.IncludeFile("menu","")##-->
<?php if (MS_MENU_HORIZONTAL) { // modification Supports for Horizontal and Vertical Menu, by Masino Sinaga, April 30, 2012 ?>
</div>
    <!-- content (begin) -->
  <table cellspacing="0" class="ewContentTable">
        <tr>
<?php } else { // modification Supports for Horizontal and Vertical Menu, by Masino Sinaga, April 30, 2012 ?>
            <!-- left column (end) -->
            </td>
<?php } // End of modification Supports for Horizontal and Vertical Menu, by Masino Sinaga, April 30, 2012 ?>
  7. Warning: This step only for PHPMaker version >= 9.1.0. Open your \Script\ewcfg.php file, and find this code:

    <!--##session ewconfigmenu##-->
<?php
// Menu
define("EW_MENUBAR_CLASSNAME", "ewMenuBarVertical", TRUE);
define("EW_MENUBAR_ITEM_CLASSNAME", "", TRUE);
define("EW_MENUBAR_ITEM_LABEL_CLASSNAME", "", TRUE);
define("EW_MENU_CLASSNAME", "ewMenuBarVertical", TRUE);
define("EW_MENU_ITEM_CLASSNAME", "", TRUE);
define("EW_MENU_ITEM_LABEL_CLASSNAME", "", TRUE);
?>
<!--##/session##-->

    then remove that code! Yes, just remove that code as we don't need that code in the configuration file. We will use it in the ewmenu.php file instead. This is very important in version >= 9.1.0 in order to add the ability switching the menu style on the fly. If we don't do this step, then the look and view of the replacement style menu will be so ugly!

  8. Warning: This step only for PHPMaker version >= 9.1.0. Open your \extensions\Graphical\control.xml file, and find this code:

    	<!--
		Update config
	-->
	<control id="ewconfig" type="other" action="change">

    then replace it with the following code:

    	<!--
		Update config
	-->
	<control id="menu" type="other" action="change">

    This is very important in version >= 9.1.0 in order to add the ability switching the menu style on the fly. If we don't do this step, then the look and view of the replacement style menu will be so ugly!

  9. Warning: This step only for PHPMaker version >= 9.1.0. Open your \Script\ewmenu.php file, and find this code:

    <!--##session menu##-->

    after that line, please insert the following code:

    <?php
// Menu
if (MS_MENU_HORIZONTAL) { // Begin of modification Supports for Horizontal and Vertical Menu, by Masino Sinaga, April 30, 2011
define("EW_MENUBAR_CLASSNAME", "yuimenubar yuimenubarnav", TRUE);
define("EW_MENUBAR_ITEM_CLASSNAME", "yuimenubaritem", TRUE);
define("EW_MENUBAR_ITEM_LABEL_CLASSNAME", "yuimenubaritemlabel", TRUE);
} else {
define("EW_MENUBAR_CLASSNAME", "yuimenu", TRUE);
define("EW_MENUBAR_ITEM_CLASSNAME", "yuimenuitem", TRUE);
define("EW_MENUBAR_ITEM_LABEL_CLASSNAME", "yuimenuitemlabel", TRUE);
} // End of modification Supports for Horizontal and Vertical Menu, by Masino Sinaga, April 30, 2011
define("EW_MENU_CLASSNAME", "yuimenu", TRUE);
define("EW_MENU_ITEM_CLASSNAME", "yuimenuitem", TRUE); // Vertical
define("EW_MENU_ITEM_LABEL_CLASSNAME", "yuimenuitemlabel", TRUE); // Vertical
?>
  10. Finally, re-generate your script files using PHPMaker as usual.
  11. Since the default menu layout is Horizontal, then if you want to switch it to Vertical, simply adjust the following code in your ewcfg9.php file:

    define("MS_MENU_HORIZONTAL", TRUE, TRUE);

    to become:

    define("MS_MENU_HORIZONTAL", FALSE, TRUE);

    and don't forget to save that changes in your ewcfg9.php file, and reload your site.

[/hidepost]

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Demo Website

Another Demo

The following template are not available in this site (must be purchased separately)

Demo Explanation

Stock Inventory Management is the good project for your reference, since it uses the real example in the real world. Many useful features you can use from this project, such as how to add the Thousand and Decimal separator character, and also how to calculate multiple row in Grid-Add when End-Users are entering data into the Grid-Add mode.

Categories

Articles based on version

Loading...