Affordable Solutions For All Your Software Needs - Website Builders, Shopping Cart Software/Programs, PHP Software, Ecommerce Solutions…

Faq type - Company Website Builder
How-to create a dynamic Expanding Menu in Company Website Builder

As you may already know, our software is 99% based on HTML template files, with very few HTML code in the PHP sources. Due to this fact any change of the interface is easier than in case of other ready to use web solutions.

In this tutorial we will see the modality to change the look and feel of the Company Website Builder left menu. First of all you have to open the home page template which is programtemplates/template_firstpage.html. You will see an SSI include in this page which is displayed visually in the visual editors such as Macromedia Dreamweaver. The files in which the left menu resides are left_menu.html for the main categories and left_menu_subcat.html for the subcategories. The solution presented in this tutorial is applicable ONLY IN CASE all categories have subcategories as the links on the main categories will be removed.

In order to get started in changing the layout you will need a few CSS styles (download here) and a JavaScript file (download here) (example used from http://javascript.internet.com/navigation/expanding-menu.html). Save the above files to your local computer following the next pattern: CSS from the css/menuexp.css and the JavaScript file from javascript/expandingMenu.js

Open template_firstpage.html and template_index.html and in the header of the documents, following the first import line i.e. @import "css/other.css"; add another one that is @import "css/menuexp.css"; Add the following lines to this files afterward following

Now you are ready to apply changes to the categories and subcategories files .

Let's see the content of the left menu file: left_menu.html:

Everything residing between the BEGIN DYNAMIC BLOCK and END DYNAMIC BLOCK lines will be repeated in case there are more than one categories in your database, meaning that these lines are highly necessary and need to be in a new line.

The original version of the script looks like this:

• Menu Item 1
  
  
  
  1. Sub Item 1.1
  
  
  2. Sub Item 1.2
  
  
  3. Sub Item 1.3
  
  
  
  


• Menu Item 2
  
  
  
  1. Sub Item 2.1
  
  
  2. Sub Item 2.2
  
  
  3. Sub Item 2.3
  
  
  
  


• Menu Item 3
  
  
  
  1. Sub Item 3.1
  
  
  2. Sub Item 3.2
  
  
  3. Sub Item 3.3
  
  
  
  


• Menu Item 4
  
  
  
  1. Sub Item 4.1
  
  
  2. Sub Item 4.2
  
  
  3. Sub Item 4.3
  
  
  
  


• Menu Item 5
  
  
  
  1. Sub Item 5.1
  
  
  2. Sub Item 5.2
  
  
  3. Sub Item 5.3
  
  
  
  

Take the second file which is more important is this example, the files in which the subcategories reside, i.e. left_menu_subcat.html. It's content is the following:

Before the first line open the

tag and after the last line close the

If you upload the files to your testing server, you will see the links opening an expandable menu just like on: http://javascript.internet.com/navigation/expanding-menu.html.

Here you may download the two HTML files that need to be copied in the programtemplates directory in case you do not succeed following the tutorial).

Download the files in ZIP archive .

| Adobe Dreamweaver Extensions | Company Website Builder |