Tabbed menu bar

Creating a tabbed menu bar in the dashboard

Difficulty: Intermediate

Estimated Completion Time: 15 Mins

Version: 1.7+

In this tutorial we will show you how to use this HTML and CSS to create a tab based menu system. Each menu item provides a new tab section where different widgets can be placed increasing the amount of space available for widgets. You will first need to Login to the dashboard builder to start the tutorial.

 

Step1 – Let’s add a Logo to the dashboard using an image

Add a Dynamic Text box widget using the new widget button in the bottom left hand corner of the dashboard builder. Now edit the properties using the spanner. In the Chart Template section paste the following HTML code snippet. Scroll to the bottom and press update. You can now close the dialog [snippet id=”7″]

Step 2 – Now we will add the menu bar using a tab widget

Now we will add the menu bar using a tab widget. Add a tab widget using the new widget button and like in Step 1 paste the following code into the Chart Template section. This widget should be assigned id (#widget2) by default. This id will be used later on in the tutorial to style the menu system when we will assign background color and font. Once again scroll to the bottom and press the update button. You can now close the dialog. Now drag the tab widget and locate it in the centre of your screen. You can also move the logo widget from step 1 to the top [snippet id=”8″]

Step 3 – Add any other widget you like

Add any other widget you like using the new widget button in the bottom left hand corner of the dashboard builder. This widget should be assigned id (#widget3) by default. This id will not be used in this tutorial. The new widget is now going to be placed on to the “Menu Item 1″ tab section of your tab page widget. To do this simply drag the new widget and drop it in the center of the tab widget. Finnaly we will style the menu. To apply the style to the menu system add the following code snippet to the bottom of the CSS Style sheet property. This property is located in the edit dashboard window. To access the Edit dashboard window press the spanner in the top right hand corner of the dashboard builder screen. [snippet id=”9″] Don’t worry that there is a lot of code! This code snippet is applying CSS rules which we cover in another tutorial – Diving into CSS. That’s all done. Please enjoy your new menu system! View the dashboard using the View dashboard button located in the top right section of the dashboard builder screen.

TIP:

You can get fancy by using multiple menus or even combine them with a show/hide button – see the following tutorial for further details.

For extra information, guidance and troubleshooting consult: