News Examples Documentation Download Buy Forum Contact

Menu. HTML5
by Alexandr Mikhailov -

Click to view an example.


  • By default, the Menu is created automatically as a "thumbnail bar".
  • Set the required number of lines in the Menu and assign them your actions.
  • Create the number of groups you need.
  • Create groups within groups. You can set the depth of nested lists.
  • When the window height is full, the Menu scrolls automatically.
  • Adjust Menu width, color, transparency.
  • Change You own design of the buttons.
  • You can change the design of the individual button.
  • Assign icons to buttons.
  • You can create thumbnail bar.
  • Enter text in two languages. The language switch button will appear automatically.


This is a universal Menu in which you can create and customize the structure and design, assign the necessary actions to the buttons. The number of elements and depth of attachments depends on Your decision.

Menu buttons can have two purposes:
1. Group header.
Only used to open a group (no other action can be assigned). There must be one or more buttons in the group. The button in the group can cause any action or be a "header" of another group which in turn can also contain buttons "header". The depth of investments is not limited. A marker(arrow) appears on the title button on the right. When you click the button, the window with the group belonging to it is opened.
2.Action call button.
On click on button is assigned fulfilling any actions (opening the scene, change kind of viewing, open information window etc.).
After clicking on the button, the text of this button becomes translucent - an indication that this button has been pressed. The plugin provides code to open the scene load_m(name scene);enter the name of the scene in parentheses.

There are three types of buttons - container, thumbnail or picture.
Button view:
1. Container.
This is a "container" layer with border, fill, shadow, transparency settings, etc. By default, the fill color changes when you hover the mouse (you can change the destination in styles).
2. Miniature (can't be a "header").
To create a thumbnail bar. Image(thumbnail) is assigned to the button. A text bar is created at the bottom of the thumbnail. When you hover mouse, background of the text is highlighted. Clicking on the thumbnail sets (preview) marker in the upper left corner. The button can be used to open scenes, photos, etc. Can be set to any other action.
3. Picture.
Set your button image. By default, the style is spelled out when you hover the image frame change"crop"

You can add an icon to the button, it is set before the text. You can set the button picture individually. Individually assign container style to buttons and text. Default settings are Configured for Menu design, logo, created buttons, text.

How to connect the plugin.

To connect the Menu, place the "Menu" folder in the root folder with the tour.

Write mostly xml:
<krpano .... >
   <include url="menu/menu_sm.xml" />

Create Menu

By default, the Menu is created automatically as a "thumbnail bar".
To create your own Menu structure set in the file: style_menu.xml - auto_menu="false" !
To create a Menu, you need to write down the elements, renaming them according to a certain scheme. The numbers in the name determine the position of the item in the menu (menu_ №… _ №…_ № ), for example: name= "menu_1_2_3" means that this is the third line in group 2, group 2 is the second line in group 1, group 1 is the first line in the start Menu list.

An example of the use of syntax / XML. File list_menu.xml
<krpano >
<menu_v name="menu_1" title_1="Menu 1"/>  	
   <menu_v  name="menu_1_1" title_1="Menu 1-1" click="Test(Menu 1-1);"/>  
   <menu_v  name="menu_1_2" title_1="Menu 1-2"/> 
      <menu_v  name="menu_1_2_1" title_1="Menu 1-2-1" click="Test(Menu 1-2-1);"/>
      <menu_v  name="menu_1_2_2" title_1="Menu 1-2-2" click="Test(Menu 1-2-2);"/>
      <menu_v  name="menu_1_2_3" title_1="Menu 1-2-3" click="Test(Menu 1-2-3);"/> 
<menu_v name="menu_2" title_1="Menu 2" click="Test(Menu 2);"/> 	  

This example shows a Menu creation entry with two lines at the beginning of the Menu (menu_1, menu_2), the first line (menu_1) opens a group of two lines (menu_1_1, menu_1_2). The second row (menu_1_2) in the group opens the next group of three rows (menu_1_2_1, menu_1_2_2, menu_1_2_3). The depth of attachments is 3.
n the example, the Test (text); action displays text on the screen. Look at the result.

The attributes of the element.
<menu_v name="menu_1_2"   
	title_1="text 1" 
	title_2="text 2"

Attribute assignment
  • name - the name of the item. The numbers in the name determine the position of the item in the Menu (group number, line number).
  • click - If the element is intended to perform an action, it is written here. An "Action call button". is automatically created. If this attribute is empty, a "Header group button" is created .
    When you click on the button, the button text changes the transparency to "0.5". You can turn off the transparency change, if at the end of the action do not put a semicolon ";"
  • title_1 - (Optional). Enter text in the main language.
  • title_2 - (Optional). If you are using a second language, enter text in that language.
  • height - (Not necessary). Set the button height selectively.
  • style_cont - (Optional). If you want to apply a custom style to a specific button, enter its name here. Otherwise, the options from the Menu settings are used. In the Style, you can specify the parameters that are in the element krpano "layer" , except for the attributes "y", "parent".
  • style_txt - (Optional). If you want to apply a custom button text style, enter its name here. Otherwise, the options from the Menu settings are used. n the style, you can specify the parameters that are in the element krpano layer type = "text", except for the attribute "parent".
  • icon - (Optional). Specify here the full path to the location of the icon image, which will be set before the button text (example, %CURRENTXML%/image/gory.png).
    The icon style is set in the Menu settings
  • picture - (Optional) if you want to apply a custom button image, enter the path to the image (example, %CURRENTXML%/menu/icon/nature.jpg).
    An additional image layer is created, which is located inside the button container and fills it in height and width by 100%. You can change the borders of the container, they will be applied to the button. The image style is taken from theMenu settings .Additional settings of the button with the image you can change in the file "style_menu.xml" - style "menu_picture"

  • Menu setting..

    In the style_menu.xml file in menu_sm you can select the main Menu settings.
    You can make more advanced settings in the styles that are written in the same file.

    File style_menu.xml
     <menu_sm  auto_menu="true"
    	   logo_css_text="font-family:Arial;  font-size:15px; color:#FFFFFF; 
    			      text-align:center; margin-left:5px; margin-right:5px;"
    	   title_css="font-family:Arial;  font-size:17px; color:#FFFFFF; 
    			  text-align:center; margin-left:20px; margin-right:5px;"
    	   head_bgborder="1,1,1,1 0x777777 0.3"
    	   head_bgroundedge="0 25 0 25"
    	   head_line_css="font-family:Arial;font-size:17px; color:#FFFFFF;
    			      margin-left:15px; margin-right:20px;"
    	   line_bgborder="1,0,1,0 0xFFFFFF 0.0"
    	   line_bgroundedge="0 0 0 0"
    	   line_css="font-family:Arial;  font-size:15px; color:#FFFFFF; 
    			 margin-left:15px; margin-right:10px;"		
    	   thumbnail_bgborder="2,2,2,2 0xFFFFFF 0.3"
    	   thumbnail_bgroundedge="0 15 0 15"
    	   thumbnail_css="font-family:Arial;  font-size:14px; color:#FFFFFF;
    			      text-align:center; margin-left:5px; margin-right:5px;"
    	   icon_style_line="height:20px;vertical-align:middle; margin-right:10px;"
    	   icon_style_head="height:25px;vertical-align:middle; margin-right:10px; "


    Menu design settings
  • auto_menu - (true/false) create a Menu automatically in the form of a bar of thumbnails. You can disable this option and create the Menu yourself. You can also generate code and adjust it at your discretion.
  • open_start -(true/false) open the Menu at the start of the tour (true, false).
  • menu_width - (pix.) the width of the Menu
  • menu_bgcolor - (0x0F373D) Menufill color
  • menu_bgalpha - (0-1) transparency of Menu background .
  • menu_align - (lefttop, righttop) Menu locationleft or right.
  • settings of the Menu container in the "style_menu.xml" - style "Line_menu"

    Installation of the logo and its signature. At the top of the Menu , a container is created in which the logo image is placed.
  • logo_cont_height - (pix.) the height of the container under the logo.
  • logo_height - (pix.) the height of the logo image.
  • logo_y - (pix.) indent from the top edge.
  • logo - (%CURRENTXML%/image/logotip.png) path to logo image.
  • logo_text - text under the logo.
  • logo_css_text - css. text style under the logo.
  • logo_click - the action of clicking on the logo (to open the link, photo, etc.)

  • Container-menu title with return arrow.
    When you open a group its name is set at the head of the list
  • title_height - (pix.) the height of the container under the displayed text groups .
  • title_bgcolor - (0x0F373D) fill color of the container .
  • title_text_1 - ext in the main language.
  • title_text_2 - text in an additional language(languages can be switched).
  • title_css - (css) text style .
  • title_onover_color - (0x0F379D)container fill color on mouse hover.
  • title_picture - (%CURRENTXML%/image/test.png)path to button image. If not filled, the container fill is used. Additional settings of the container with the name you can change in the file "style_menu.xml" - style "cont_title"

    "heading" button opens the group attached to it.
    If the "click" attribute is not set, the button automatically becomes the" title" of the group. An arrow appears on the right of the button to open group list. The group must have attachments!
  • head_step_V - (pix.) the height of the container under the displayed text groups .
  • head_width - (pix. percent) button width relative to the width of the Menu. The button is positioned in the center.
  • head_height - (pix.) button height .
  • head_bgcolor - (0x0F373D) button fill color.
  • head_bgalpha - (0-1) button transparency.
  • head_bgborder - (1,1,1,1 0x777777 0.3) border settings. Thickness, color, transparency.
  • head_bgroundedge - (0 25 0 25) button corner rounding
  • head_line_css - (css) button text style .
  • head_onover_color - (0x43B1C2) button color on mouse hover.
  • Additional settings of the container "header" you can change in the file "style_menu.xml" - style "line_head" , text style - "txt_head" and marker style - "marker_m"

    The group button. Starts the action.
    If the "click" attribute is filled in, the button automatically becomes a group element.
  • line_step_V - (pix.)step between the buttons.
  • line_width - (pix. interest) button width relative to the width of the Menu. The button is positioned in the center.
  • line_height - (pix.) button height .
  • line_bgcolor - (0x0F373D) button fill color.
  • line_bgalpha - the opacity of the button (0-1).
  • line_onover_color- (0x43B1C2) button color on mouse hover.
  • line_bgborder - (1,1,1,1 0x777777 0.3) settings of the curb. Thickness, color, transparency .
  • line_bgroundedge - (0 25 0 25)button corners are rounded.
  • line_css - (css) button text style.

  • Additional settings of the container "action call Button" you can change in the file "style_menu.xml" - style "Line_menu" and text style - "txt_line"

    "Thumbnail bar"

    A button is created in the form of a thumbnail image with text at the bottom of the thumbnail.

  • thumbnail_bgborder- (1,1,1,1 0x777777 0.3) settings of the edging. Thickness, color, transparency.
  • thumbnail_bgroundedge - (0 25 0 25) rounds the corners of the thumbnail .
  • thumbnail_width- (pixels. percent) thumbnail width relative to the width of the Menu. The button is positioned in the center.
  • thumbnail_height - (pix.) height of the thumbnail .
  • thumbnail_step_V - (pix.) the spacing between thumbnails .
  • thumbnail_css - (css) thumbnail signature text style.
  • Additional settings of the container "thumbnail Bar" you can change in the file"style_menu.xml" - style"Line_menu_thumbnail" of image layer-style"menu_thumbnail" and style of thumbnail text - "txt_menu_thumbnail"

    If the path to the image is entered in "picture_line", it is assigned to all Menu buttons. (Optional attribute)
  • picture_line - path to the button image. If not filled, the container fill is used.
  • picture_alpha - (0-1) transparency of the image.
  • picture_crop - (0|80|273|800) cropping of the image (optionally).
  • picture_onower - action when the mouse is over the button. Example set(crop,0|0|273|80).
  • picture_onout - action when you move the mouse away from the button. Example set(crop,0|80|273|80).
  • Additional settings of the button container with the image you can change in the file "style_menu.xml" - style "menu_picture"

    If the icons in the buttons are set, these settings are applied to them.
  • icon_style_line- (css) icon style in the button performing actions, for example-height:20px; vertical-align:middle; margin-right:10px; .
  • icon_style_head - (css) icon style in the button that opens the group. Icon setting.
  • Set icons.

    The bottom of the container with a button to switch language. The button appears automatically if there is a filled attribute "lang_2".
  • bottom_height - (pix.) height of the container at the bottom of the Menu under the language change button.
  • lang_1 - language title_1 (optional).
  • lang_2 - language title_2 (optional).

  • menu_generator - (true/false) if this option is enabled, pressing the "G" key will automatically generate a Menu code in the form of a "thumbnail bar". Open tray-the "O" key in the version krpano before 1.2, starting with version 1.2 call the window with the "title" or "e" key. Copy the code and paste it into the file "list_menu.xml" for further editing and creating your own Menu option.
    Signatures are taken from the "title" spelled out in the scenes.

  • Sample generated code.
    <menu_v name="menu_1" title_1="NGU" title_2="" click="load_m(scene_ngu);" thumbnail="panos/NGU.tiles/thumb.jpg"/>
    <menu_v name="menu_2" title_1="1 Altay" title_2="" click="load_m(scene_1);" thumbnail="panos/1.tiles/thumb.jpg"/>
    <menu_v name="menu_3" title_1="acadtmparc" title_2="" click="load_m(scene_acadtmparc);" thumbnail="panos/acadtmparc.tiles/thumb.jpg"/>
    <menu_v name="menu_4" title_1="alp_lag" title_2="" click="load_m(scene_alp_lag);" thumbnail="panos/alp_lag.tiles/thumb.jpg"/>
    <menu_v name="menu_5" title_1="Bassein" title_2="" click="load_m(scene_bassein);" thumbnail="panos/Bassein.tiles/thumb.jpg"/>

    More information

    Go to the site with the description in order to download a demo plugin or buy a plugin