Working with Office Dynamic Database Menu and Navigation
 
Menu navigations are not easy to create, design even for web developers. Websites can't update because can't change, can't create more menus.

But with Office Dynamic Database Menu Navigation, you don't need any web skills. It creates automatically.

What is Office Dynamic Database Menu Navigation?


Menu Navigation, like Topmenu: Home -> About Us -> Our Vision. There are 2 different kinds of Menu Navigation: Topmenu Navigation and Left Menu Navigation.

- Topmenu navigation: is used for company webpages. Such as: webpage with menu = About Us, or Contact Us.

- Leftmenu navigation: is used for company Products & Services menu, E-commerce... Such as: Left menu = Plants -> Lenox -> Luminary. => People order from Left Menu Navigation.
=> For example, click on Plant -> Plants will display product list of Plants with Price, Description... People order.
- Of course, you can also mixed company webpages put in Left Menu Navigation. Such as: Contact Us -> Contact.


Online business, website totally depends on web developer, after developer left. Can't update. Can't maintain.

Menu Navigation, like Topmenu of websites designed by web developer is manually code or Java Script driven Menu. No database.
Which means, in order to create or to change the menu, web developers manually code, program the java script of menu. When developer gone website can't changed menu. For example, can't change menu name = About Us to different name = About Our Company. Or you can't create a new webpage with menu name = Our Vision
You need the web developer to change menu name, to create new webpage. You can't update, can't change yourself.

Office Menu Navigation
is a dynamic database driven Menu Navigation.
=>
It is called dynamic Menu because it can be changed. Menu data saved in database for re-construction in real time. Not hard coded static menu by web designer.  => Which means when you create a webpage like About Us, Office Database Menu will automatically create menu name About Us for the webpage About Us. And it saved the menu About Us property in the database, not hard coded in JavaScript (= static menu), or in some codes by web designer. Thus when you change menu name About Us become About Our Company, you just need to update the name in database. But if you write hard code the menu name About Us in Java script or in some codes, then when change the menu name About Us, you need the web designer change the code. 

The Menu Property has made up by the components of Menu Name, Menu Id, Main or Sub Menu, Group Menu ...
Office Dynamic Database Menu will read the menu property in database and re-created the menu. No need programming.
And when you select different kind of topmenu, it reads Menu Property in database, and re-construct the menu in real-time.

The advantages of Office Dynamic Database Menu

1) Automatically create menu. Change / select different menu styles right away, without manually program the menu script. It reconstructed the menu in real time.

2) Because Menu Property is saved in database, it is easy change, update menu. No need programming. No web developer.
A lot static websites are not updated
because menus created by script. When developers left, very hard to create, change menus.

3) Menu nested with sub-menu level 3. Can insert menu icon in Main and Sub menu.


Example of Office Webpage. You can design yourself. No need web developer.


- Picture: Office website Homepage

 
A Webpage is divided into different sections

1) The Logo is the Banner.

2) The Topmenu Bar is under the Logo. Used for webpages, like About Us..

3) The Left Navigation Menu is the Left Product Navigation Menu. Used for Product Catalog.
** DO NOT PUT PRODUCT MENU ON THE TOP MENU SECTION BECAUSE IT IS HARD TO SELECT, AND HIDDEN THE LISTING OF PRODUCTS FROM PEOPLE.


4) The Body is your webpage content.

5) The Right section is where you have some thing to insert like adds. If not, the Body takes over.

6) The Footer

- Office Dynamic Database Menu Navigation is used at Topmenu & Left Navigation Menu.

Understanding Office Menu Navigation Property

Office Menu Navigation has two different menus. [1] Topmenu  [2] Left Product Menu Navigation.

Topmenu Navigation

Is the main top bar menu. Ever time you create a webpage, such as: Our Company, using myNet.Word it will automatically create a Topmenu. Topmenu has its Menu Property
Let say the web page Our Company is sub-menu of the web page About Us. The web page Our Commitment and Support is a sub-menu of the webpage Our Company.
The menu order looks like this: [About Us] -> [Our Company] -> [Our Commitment and Support]. Menu nested level 2.

Table: Topmenu Property:

MENU COMPONENT DESCRIPTION
GROUP MENU Is the group menu that this sub-menu is in. In this example of [Our Company] webpage, Group Menu = [About Us]. Webpage [Our Commitment and Support] is in the Group Menu = [Our Company]
MENU ID and MENU LEVEL (1,2,3..) MENU ID: Is the ID number position for the menu. In this example of [Our Commitment and Support] webpage, Menu ID = 2_2_4 Since [Home] Menuid =1, [About Us] Menu Id = 2, [Our Company] has Menu Id = 2_2. [Our Commitment and Support] webpage  Menu Id= 2_2_4. [Our Vision] Menu Id = 2_2_1

MENU LEVEL: In this case, this Topmenu is called nested Level 2.
MENU NAME Is the name of that menu = Our Company or About Us .. is also the name of that web page.
MENU ICON Is the small icon image inserted in the menu. We collect a lot of menu icon you can choose from this Url link. It is in the folder /menu/icon. Here is the display icons
MENU URL Is the Url link of this menu to open the webpage when click on the menu.

How a Webpage and its Topmenu Navigation is created in 2 STEPS

STEP 1: To design a webpage and its menu name = Our Commitment and Support.

- 1)
To create a new webpage. At menu [Net.Page] -> Select New Page => Open Office Word (picture below) for you to design a webpage.
=> You enter the name of the webpage =
Our Commitment and Support in Fname input box

-=> Next, it asks you to select the round button
O to choose Main Menu or Sub-Menu for this page. (See the second bar) 
- If you select Main Menu, then this menu has level 0 menu like [About Us], [Home].
- If select sub-menu, it displays a pull down list of all menus for you to select the menu that this menu is sub menu of. Select [Our Company]. That's is it.  
-
It is very simple. All info property of menu [
Our Commitment and Support] is saved in database. See, you don't need to program or to do menu script for menu any thing. 

- 2) Next,
use Office Word to design webpage. Always first, click [Insert table] icon to Insert a Table (3 cols, 4 rows) in order to divide the webpage into sections of row/col. To expand Edit Area, enter Row =40, Col =140. ->  Enter text in Word ->  Insert picture, create font, size, color, make nice content. It is as easy as to use as Ms Word.
- Finally, click on button [Save] floppy disk icon. DONE!


- Picture: STEP 1 => Open
Office Word. => To create a webpage = Our Commitment and Support and its Topmenu submenu = Our Commitment and Support

=> ** Important ** The name of Webpage is same name of Topmenu.

STEP 2: After created a webpage and its menu navigation, now choose a style of Topmenu in many styles of database Topmenu built-in Office.
- In this case, we choose style = topmenu_office_icon_lev2.jsp =  a style of Office menu.

You choose different Topmenu styles from [Site] -> [Site Property] -> Select a Topmenu from the drop down list for the whole website.
We design more than 10 different Topmenu styles you can choose. You can see it is not static like other site. Our Menu navigation is Dynamic Database Driven Menu.



Picture: STEP 2 => After created a webpage
Our Commitment and Support and its Topmenu, you choose a look and feel of Topmenu from in many built-in database Topmenu in Office.

=> DONE to create a webpage and its Topmenu! You can always change the content of webpage and style of Topmenu.


Picture: The result of webpage Our Commitment and Support and its Topmenu submenu = Our Commitment and Support

=> You can always change the back ground, fore ground color, font, Left Menu Navigation .. of website


CONGRATULATIONS!  You have just created a webpage and its menu navigation in 2 steps.

The Result of the Webpage Our Commitment  and Support with its Topmenu Bar Created.


All Office Top Menu can be changed colors background, foreground, text, font, menu icon.


Picture: Home page created by Office. You have completed controlled of website color, text, size, font ...


To Manage webpages and menu navigation use Page Manager

From main menu [Net.Page] -> [Page Manager]. Where you can:

- Insert menu icon in each Menu Item.

- Change Menu Name, example from [About Us] to [Contact Us], Menu Url.

- Change the order of each menu by changing the order of Menu Id. Delete that menu.

- Edit / View / Delete a webpage. Such as: Change page name About Us...

- Edit property of webpage.

- Insert Left Product Menu into webpage.

- More...


Picture: Page Manager lets you manage webpages and its menu navigation.

Office Topmenu is a unique Menu that lets you insert image icon in menu


- To Insert image icon, use [Page Manager] -> Click on [MenuImage] -> Select many icons in folder /menu/images

- To Insert different Left Product Menu styles in a webpage, like Contact page, use [Page Manager] -> Click on [LeftNav] -> Select a Left Product Menu style. To change, click on [CHANGE LEFT MENU]. NOTE: Each page has different Left Product Menu style make your website look nice.
 

Select from 9 different styles of Office Database Menu Navigation for Topmenu

Select a Topmenu Navigation from many different Menu Styles for the site

From main menu [SITE] -> [Site Property] -> Select one for the site from the list of many Topmenu Bar listed below.

Currently, Office has few different Topmenu Styles you can select. But there is only one to be used as Topmenu for entire site.

To select a Topmenu, from topmenu [SITE] -> [Site Property] -> [Topmenu] -> Select one topmenu style from the pull down list.

We have a lot of menu icons for you to select. Menu Image Icons are store in folder /menu/images/.


Picture: Select Topmenu Navigation from [Site] -> [Site Property] -> [Topmenu bar]
 
Select 9 different styles of Office Topmenu

Select one of the 9 following Topmenu for your website.
TOPMENU NAME: Corporation Style - File name= topmenu_corporation_lev2 to select from: [SITE] -> [Site Property] -> [Topmenu]


Picture: This is Corporation style Topmenu.

It is Level 2 because as you can see [About Us] = level 0 , its Menu Id= 2. It has only one bar is called Level 0.
 
TOPMENU NAME: Multi-nested Levels Style - File name= topmenupulldown_lev3


Picture: This is Multi nested level style Topmenu.
 
TOPMENU NAME: Ms Office Menu Style


 

Picture: This is Ms Office style Topmenu. . It looks like Ms Office menu. Maximum level = 2.

TOPMENU NAME: Apple Menu Style


Picture: This is Apple style Topmenu. It looks like Apple menu. Maximum level = 2.
TOPMENU NAME: Black Forest Menu Style

Picture: This is Black Forest style Topmenu. This menu is flashy and shinning.
TOPMENU NAME: Plain Text Menu Style. Menu file name= topmenu_plaintxt_lev2

Picture: This is Plain Text style Topmenu.
 
TOPMENU NAME: Horizontal Tab Topmenu Style. Menu file name= topmenu_tab_lev2.

Picture: This is Horizontal Tab style Topmenu. This style menu have Level 1 is horizontal, such as: [About Us], [Contact] ... Lev 2 is vertical display.
TOPMENU NAME: Background Color Menu Style. Select menu file name= topmenu_bgcolor_lev2

Picture: This is Background Color style Topmenu. This menu uses color background. You can change different color background
 
TOPMENU NAME: Chocolate Fan  Menu Style. Select menu file name= topmenu_fan_lev2  

Picture: This is Chocolate Fan Menu style Topmenu. This menu is twisting like fan when opening. Its color like chocolate.
How to create Left Product Catalog Menu Navigation

Left Product Menu Navigation is menu from the left side. It is used for Product Catalog.

Every time you create a Catalog and its category it also creates a Product Menu Navigation. It displays in the left section of webpage.

 
1) To Create a Product Catalog

From main menu [Shopping Cart] -> Select sub-menu [Create New/Add Catalog]

Or from main menu [Net.Page] -> [Getting Started] -> Select sub-menu [Create Catalog]

For example to create a Catalog name: Accessories with a Category name: Harddrive in the position = 2. See the right column screen interface.

The Result: See the Left Product Menu screen below.

After create the Left Product Menu, to add more product items into the category, you select:

From main menu [Shopping Cart] -> Select sub-menu [Add New Product Item]. It opens a screen interface where you input info, data for that product item. See Day 1.
 

Picture: To create a new Catalog named Accessories and its Category named: Harddrive.
 
2) Select different Styles of Left Product Menu for each webpage

After having created a webpage, for example, About Us, there is no Left Product Menu displayed in this page yet. You need to insert the Left Product Navigation or this webpage About Us has not.

You have to insert Left Product Navigation for ever webpage you have created.

To Insert Left Product Menu Navigation

There are two different ways:

1) When you create a web page in myNet.Word, example About Us, after the web page is created and saved, you begin to insert Left Product Menu Navigation.

From main menu [Insert] -> [Left Product Menu] -> A GUI screen pop ups, select a one of many styles Product Menu. That's it.

2) OR: after the web page have created, you can Insert or Change its Product Menu from [Page Manager].

Picture: Insert Product Menu GUI screen lets you to select one of many different Left Product Menu Navigation Styles for the webpage.

You can select 12 different Styles of Left Product Menu for each webpage.

For example, the webpage About Us, insert Left Product Group Apple Menu, webpage Contact Us, insert Left Product Splash Dot Menu, webpage Careers, insert Left Product Group Tree Menu... To Insert a Left Product Menu in a webpage, use Page Manager. This will make your website interesting.

NOTE: When listing your products and services, you should use Left Product Menu because your Products and Services are listing all people can see. If you Top Menu, your Products and Services are hidden from people.

Here they are.
 


Picture: Left Product Group Sun Men Style

- It looks like Sun Microsystems webpage menu.
- It is organized in one group Catalog with many Categories.
For example, Catalog = Accessories  + its Categories = Cpu, Harddrive, Memory, and Monitor.

Picture: Left Product Group Apple Men Style

Expand, Collapse, Toggle Menu.
- It looks like Apple website menu.
- It is organized by group Catalog with its Categories.

Picture: Left Product Bar Menu Style

- It looks like one bar menu. 
- It is organized listing all Categories. No Catalog.
 

Picture: Left Product Splash Dot Menu Style

- Expand, Collapse, Toggle Menu.
- It is organized by group Catalog with its Categories.
- Click on the arrow to pull down all listing in that group Catalog.
- It can remember last time you opened by saving in database.
So next time visit, it opens exact the order last time opened.

Picture: Left Product Group Tree Menu Style

- Expand, Collapse, Toggle Menu.
- It looks like tree.
- It is organized by group Catalog with its Categories.

Picture: Left Product Grp Switch Menu Style
- Expand, Collapse, Toggle Menu.
It switches menu close and open when click. It is organized by group Catalog with its Categories.

Picture: Left Product Menu_Css_List Style

- It is designed by CSS Stylist Sheet.
- It is organized by group Catalog with its Categories.
- Move the mouse on Catalog = Lunch And Dinner will displays all Categories = Lunch Specials, ** Combo Specials **, Dinner.

Picture: Left Product Menu SlideFx Style

- It looks like folder menu.
- It is organized by listing all Categories.
- In normal situation, the menu is hidden and displays only the brown Bar. When move the mouse on the brown Bar SIDE MENU, it will slide the whole menu.

Picture: Left Product Menu Switch Style 

- Click on the menu to open its sub-categories

Picture: Left Product Arrow Menu Style

Picture: Left Product Bullets List Menu Style

Picture: Left Product Urban Menu Style
Manage Product Menu Navigation Using PAGE MANAGER

Use Page Manager to manage Product Menu Navigation. You can do:  Insert /Change product menu navigation for that webpage.
 
Using Product Menu Manager Change Order of Menu Id, Menu Name, Group Name of Left Product Menu Navigation

After you have create Group Catalog menu, Menu Name Category, you can use Product Menu Manager to change its name, the order of Menu Group (Catalog), Menu Name (Category)
From main menu [Shopping Cart] -> [Product Menu Manager]
 

Picture: Product Menu Manager is used to change the Menu Id order, Menu Name, Group Name  for Left Product Menu Navigation. Just click on the icon CHANGE MENU NAME AND ITS POSITION under [Action] command.

Picture: Before the Group menu Accessories has been changed.

In this example, the old Left Product Menu is in the Right column. The new Left Product Menu is changed displaying in the left.
What has been changed is:
- Group Menu Name or Catalog = Accessories is changed into different name = Hw Accessories

- Its Group Menu Hw Accessories Id = 2 before Group Menu Keyboards = 3. Now its order has changed the order Hw Accessories Id = 3 and  Group Menu Keyboards = 2.
See the left display menu. Before the group menu Accessories before the Group Menu Keyboards. Now the order has changed.

- The Menu name =Cpu is changed to name = Intel Cpu. And its order of menu name Cpu is changed too.
 

CONCLUSION

To design Topmenu Navigation and Product Menu Navigation is not easy for even web designer. Most websites have static menu hard code by developers.

Office Menu Navigation is database driven menu.
Menu property is stored in database dynamically reconstructed. Office is nested level menu with sub-menu.

  Can Insert small icons in menu

 Create Topmenu and Left Product Menu with no web skills.

A lot websites have not been updated because can't change, can't update menu. Because create new web pages or create new product catalog pages also required to create menu navigation for them. It is complicated to design menu and navigation. When the developers left, without tools, very hard for business to create new menu, or change menu.