Side panel menu is an optional replacement for the default horizontal menu on top of any IntegraXor web interface. By using the side panel menu, you can increase even more pixel area for the mimic screen which was previously occupied by the horizontal menu.
Currently there are 4 options that you can specify for the side panel menu. As have been said in General Options, all the options for side panel menu is contained within a parent object defined as side_panel
- enable
-
Side panel menu is not activated by default. Thus the default value for this is false. To activate the side panel menu, just change the value to true.
- template
-
The side panel menu comes with a built-in CSS definition to address the font, size and colours. If you decide to use a custom CSS file for your side panel menu you will have to specify the css file name here. The default value for this option is an empty string "".
![[Note]](images/note.png)
Note
You can name your custom CSS file to any name you like as long as it doesn't contain any space in the name and don't forget to include the file extension .css at the end of the name.
- auto_hide
-
By default, side panel menu will only close when you click the toggle button. When auto_hide is set to true, the side panel menu will auto close itself after you click any page links within the menu.
- auto_collapse
-
Auto collapse feature is useful if you have multiple sub menus each with multiple items in it. By default, the sub menu expand and collapse mechanism is very mechanical. You have to manually click each sub menus to collapse them. The side panel menu will become very long if you have multiple expanded sub menus in it and it can become tedious to find and collapse each of the sub menu.
With auto_collapse set to true, when you click on a particular sub menu to expand it, any opened sibling sub menu (sub menu with same depth level) will auto collapse before that sub menu is expanded. This can help keep the side panel menu quite short so that it is easier to navigate if your sub menu contains multiple item.
The side panel menu was designed with customizability in mind. For that purpose, a CSS template filled with the default setting has been prepared in the styles folder in your project folder.
Take a look in styles folder in your project folder. You should be able to see a CSS file named sidepanelmenu-template.css. You can edit this to your liking to customize your side panel menu. If you are proficient with CSS, you can even add extra definitions in there depending on your creativity.
Refer to the option name template in the table above to load your custom-made CSS file.