How do I control the navigation menu items?

The default Web Cube template provides three menus that can be controlled by using the Menu Builder application.

 

Screen_Shot_2013-02-18_at_3.41.09_PM.png

 

If you take a look at the default Web Cube template (webcube/base.html) you will find three menu keys,  nav_global and nav_global_secondary at the top of the template and nav_footer for the footer. The first step is to create menu groups with keys that match the keys in the default Web Cube template. 

 

So let's create a menu group that controls the top global navigation.

 

1. Click on the CMS tab.

Screen Shot 2013-01-10 at 11.45.16 AM.png

 

2. Click on the Custom then on the Menu groups menu items.

Screen_Shot_2013-02-18_at_4.00.06_PM.png

 

3. Click on the Add menu group button.

Screen_Shot_2013-02-18_at_4.00.29_PM.png

 

4. Write a name for this group. The name will be used to associate menu items to this menu group.

Screen_Shot_2013-02-18_at_4.02.11_PM.png

 

5. Set the key for this group. If you are using the default Web Cube template make sure this key matches the key found in the default template. 

Screen_Shot_2013-02-18_at_4.02.17_PM.png

 

6. To customize the CSS for the menu provide a list of custom CSS classes separated by spaces.

Screen_Shot_2013-02-18_at_4.02.24_PM.png

 

7.  The description is used as a reference to let the admin user know where this menu group is used. This description will not be shown to the front end users.

Screen_Shot_2013-02-18_at_4.04.00_PM.png

 

8. Check if this menu groups should be active.

Screen_Shot_2013-02-18_at_4.04.12_PM.png

 

9. Select the sites where this menu should be displayed.

Screen_Shot_2013-02-18_at_4.04.20_PM.png

 

10. Save

Screen Shot 2013-01-11 at 12.43.21 PM.png

 

 

 

Now let add a menu item to the menu group just created.

 

1. Click on the CMS tab.

Screen Shot 2013-01-10 at 11.45.16 AM.png

 

2. Click on the Custom then on the Menu items.

Screen_Shot_2013-02-18_at_4.42.28_PM.png

 

3. Click on the Add menu item button.

Screen_Shot_2013-02-18_at_4.43.01_PM.png

 

4. The name is the text that will be shown in the menu.

Screen_Shot_2013-02-18_at_4.47.16_PM.png

Screen_Shot_2013-02-18_at_5.00.14_PM.png

 

5. Slug is used to generate the URL for this menu item. 

Screen_Shot_2013-02-18_at_4.47.22_PM.png

 

6. Parent Section is used when we need to create menus with sub-menus. If this is a sub-menu item click on the magnifying glass to select the parent menu item.

Screen_Shot_2013-02-18_at_4.47.29_PM.png

7. Set the order of this menu item. Lower order values have higher priority.

Screen_Shot_2013-02-18_at_4.47.36_PM.png

 

8. Select the menu Group to which this menu item should be associated.

Screen_Shot_2013-02-18_at_4.47.43_PM.png

 

9. Set the link for this menu item. 

Screen_Shot_2013-02-18_at_4.47.48_PM.png

 

10. To customize this menu item a list of custom CSS classes can provided. Separate the classes with spaces.

Screen_Shot_2013-02-18_at_4.47.55_PM.png

 

11. Target is the HTML attribute that specifies where to open the linked document. For more information click here.

Screen_Shot_2013-02-18_at_4.48.02_PM.png

 

12. Check if this menu item should be active.

Screen_Shot_2013-02-18_at_4.48.08_PM.png

 

13. Set the site where this menu item should be active. Hold down Control, or Command on Mac, to select more then one site.

Screen_Shot_2013-02-18_at_4.48.14_PM.png

 

14. Save.

Screen Shot 2013-01-11 at 12.43.21 PM.png

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk