Navigational Menus in Virtual Tours provide navigation and control, allowing users to explore different locations within the tour. Well-designed menus enhance user engagement and ease of use, ensuring a smooth and intuitive tour experience.
There are different navigational menu configurations for Desktops, including;
Single
Subcategory
Subcategory with node image backgrounds
Expanding
Expanding with node image backgrounds
For Mobiles:
Single
Subcategory
Getting Started
Open the **CLEAN_START.(p2vr) file and save it with the name 8_MENU_SINGLE.(p2vr).
Single Menu
The single menu is a one-column vertical menu that displays a button for each panoramic node assigned to it. Clicking on a menu button opens the node assigned to that button.
Note: As we will be using the menus to navigate the tour we don’t need the Previous/Next buttons.
Select all nodes except “loading”, right-click, select Add/Remove Tag, and uncheck “prevnext”.
Note: removing the tag “prevnext” effectively hides the Previous Next buttons but we will also disable them.
Open the Edit Skin Configuration window and scroll to the - [ GENERAL SETTINGS ]- section.
Set the attributes for - [ GENERAL SETTINGS ]-;
Previous Next Buttons [Desktop]: = unchecked
Previous Next Buttons [Mobile]: = unchecked
Click OK to save the Edit Skin Configuration changes.
Note: A panoramic node must be assigned a tag to appear in the menu. In this example, the tag name will be the word “single” (case sensitive)
In the Tour Browser, select all of the nodes except for “loading”, right-click, select Add/Remove Tag and select “Add New Tag”
In the popup box enter the word “single” (case sensitive)
Note: When we select a node, we can see, in the Properties - User Data > Tags section the tag “single”
Open the Edit Skin Configuration window and scroll to the -[ MENU - MAIN ]- and -[ MENU - MOBILE ]- sections.
Set the attributes for - [ MENU - MAIN ]-;
Show Main Menu: = checked
Menu Type: [uncheck = subcategory : check = single]: = checked
Show Expanding Menu: = unchecked
Set Single Menu Tag: = single
Show Menu Image: = unchecked
X2 Image Size: = unchecked
Note: Using the “Set Single Menu Tag,” you can define the tag name you want to use. In this example we are using “single”
Set the attributes for - [ MENU - MOBILE ]-;
Change Category on Node Change: = checked
Show Mobile Menu: = checked
Show Menu on Open: = checked
Menu Type: [uncheck = subcategory : check = single]: = checked
Hide Menu on Open: = unchecked
Click OK to save the Edit Skin Configuration changes.
Save the project and then output the project. The first node should look like the example below.
Note: Clicking on any menu button will take you to the corresponding panoramic node.
Menu Button States
There are 3 “states” for the buttons:
Active or Current Panoramic node
Mouse Over
Passive or Normal
Subcategory Menu
If the 8_MENU_SINGLE.(p2vr) file is not already open, open it and save it as 9_MENU_SUBCAT.(p2vr).
The Subcategory menu is a two-column vertical menu that shows groups of associated panoramic nodes as a subcategory under a category header.
Panoramic nodes appear under a category after being assigned tags and then exposed in the Menu Tables in the Edit Skin configuration window.
Note: In this example the Streetfood panoramic node has the tag “myanmar" and the demonstration panoramic nodes have the tag “basefiles”
Select the Streetfood node, right-click, select “Add/Remove Tag” > “Add New Tag”, and enter the word “myanmar”
Select all of the demonstration nodes, right-click, select “Add/Remove Tag” > “Add New Tag”, and enter the word “basefiles”
Open the Edit Skin configuration window and scroll to the Menu Tables section.
In the Main Menu and Mobile Menu sections, set the tags “myanmar” and “basefiles” in the Tag column and add the names Myanmar and Basefiles in the Title column.
Note: The names in the Title coloumn represent the names that will appear in the Category buttons
Scroll up to the -[ MENU - MAIN ]- and -[ MENU - MOBILE ]- sections.
Set the attributes for -[ MENU - MAIN ]-;
Show Main Menu: = checked
Menu Type: [uncheck = subcategory : check = single]: = unchecked
Show Expanding Menu: = unchecked
Set Single Menu Tag: =
Show Menu Image: = unchecked
X2 Image Size: = unchecked
Set the attributes for -[ MENU - MOBILE ]-;
Change Category on Node Change: = checked
Show Mobile Menu: = checked
Show Menu on Open: = checked
Menu Type: [uncheck = subcategory : check = single]: = unchecked
Hide Menu on Open: = unchecked
Click OK to save the Edit Skin Configuration changes.
Save the project and then output the project.
Now we see two menu categories, Myanmar and Basefiles.
Mouse over either of the categories to see the sub-category menu buttons
Note: Clicking any sub-category menu button will take you to the corresponding panoramic node.
Subcategory Menu with Node Image Backgrounds
This variation on the Subcategory menu replaces button backgrounds with node images.
Note: As the node images are automatically generated, creating this variation requires only a single change to the Edit Skin configuration, checking the “Show Menu Image” option.
Note: This variation is not available on Mobile Devices such as iPhones, it is available on iPads.
Open the 9_MENU_SUBCAT.(p2vr) file if it’s not already open and save it with the name 10_MENU_SUBCATIM.(p2vr).
Open the Edit Skin Configuration window and scroll to the -[ MENU- MAIN ]- section.
Set the Show Menu Image = checked as shown in the image below.
Click OK to save the Edit Skin Configuration changes.
Save the project and then output the project.
Note: Now the sub-category menu buttons are displaying images of the nodes.
Note: There is an additional variation on this menu feature that doubles the size of the image button.
Open the 10_MENU_SUBCATIM.(p2vr) file if it’s not already opened and save it with the name 11_MENU_SUBCATIMLG.(p2vr).
Open the Edit Skin configuration window and scroll to the section
-[ MENU -MAIN ]-,
Set the X2 Image Size: = checked as shown in the image below.
Click OK to save the Edit Skin Configuration changes.
Save the project and then output the project.
Note: The opening node panorama subcategory menu now displays image buttons twice the size.
Expanding Menu
This variation on the Subcategory menu is a single-column vertical menu showing groups of associated panoramic nodes as a subcategory under a Category header, but in a single column, not a separate one.
This is an ideal menu for tours with many panoramic nodes that can be assigned to different categories.
Note: This variation is not available on Mobile Devices such as iPhones, it is available on iPads.
Open the 11_MENU_SUBCATIMLG.(p2vr) file if it’s not already opened, and save it with the name 12_MENU_EXPAND.(p2vr).
Open the Edit Skin Configuration window and scroll to the -[ MENU - MAIN ]- & -[ MENU - MOBILE ]-.
Set the attributes for - [MAIN - MENU ]-;
Show Main Menu: = checked
Menu Type: [uncheck = subcategory : check = single]: = checked
Show Expanding Menu: = checked
Set Single Menu Tag: =
Show Menu Image: = unchecked
X2 Image Size: = unchecked
Set the attributes for - [MOBILE - MENU ]-;
Change Category on Node Change: = checked
Show Mobile Menu: = checked
Show Menu on Open: = checked
Menu Type: [uncheck = subcategory : check = single]: = unchecked
Hide Menu on Open: = unchecked
Scroll to the Menu Tables section.
In the Main Expanding Menu section, set “myanmar” and “basefiles” tags in the Tag column and add the names Myanmar and Basefiles in the Title column.
Click OK to save the Edit Skin Configuration changes.
Save the project and then output the project.
Note: The opening node panorama subcategory menu will look like the example below, which shows two categories: Myanmar and Basefiles.
Clicking on the category buttons reveals the subcategory nodes.
Note: As in the previous example, Subcategory with Node Image Backgrounds, the text button backgrounds can be replaced with Node images.
Open the Edit Skin Configuration window and scroll to the
-[ MENU - MAIN ]- .
Set the attribute Show Menu Image: = checked
Click OK to save the Edit Skin Configuration changes.
Save the project and then output the project.
Note: The opening node panorama subcategory menu will look like the example below, which shows the image buttons.
Note: As in the previous example, Subcategory with Node Image Backgrounds, the text button backgrounds can be resized x2.
Open the Edit Skin Configuration window and scroll to the
-[ MENU - MAIN ]- .
Set the attributes;
Show Menu Image: = checked
X2 Image Size: = checked
Click OK to save the Edit Skin Configuration changes.
Save the project and then output the project.
Note: The opening node panorama subcategory menu will look like the example below, which shows the X2 image buttons.
Logo Above Menus
This option is to display the Splash Screen logo above the menu.
Open the 12_MENU_EXPAND.(p2vr) file if it’s not already opened and save it with the name 13_MENU_LOGO.(p2vr).
Open the Edit Skin Configuration window and scroll to the -[ LOGO ]- section.
Set the attributes;
Logo [inc. ext]: = 3fingerpeace.svg
Logo Tooltip: = Click to read Myanmar Now
Website URL [ https://location ]: = https://myanmar-now.org/
Logo Link Target [ blank, parent, self, top ]: = blank
Scale Logo [ max 100% - 90,80,70 etc]: = 70.00
Show Logo Above Menu [Desktop]: = checked
Show Logo Above Menu [Mobile]: = checked
Click OK to save the Edit Skin Configuration changes.
Save the project and then output the project.
Note: The opening node panorama expanded menu will look like the example below, which shows the 3 fingered salute logo above the menu.
Hide Menu Items on Open - Mobile
Note: there is an additional setting in the Mobile Menus that hides the menu items on open and shows them when you click the hamburger button.
Open the 13_MENU_LOGO..(p2vr) file if it’s not already opened and save it with the name 14_MENU_HIDE.(p2vr).
Open the Edit Skin Configuration window and scroll to the
-[ MENU - MOBILE ]- .
Set the attribute Hide Menu on Open: = checked
Click OK to save the Edit Skin Configuration changes.
Save the project and then output the project.
Note: On the mobile device only the 3 fingered salute logo and the hamburger button are visible. Clicking on the hamburger button reveals the menu items.
This finishes the post on Navigational Menus.
In the next post, we will look at Fixed Buttons V1, which offers basic functionality within the tour.
