How to...Make the most of Menu Module 2.0

howtologofin_tn.png

Menu 2.0
[Enjin CMS]

 

 



What is it?

Enjin's Menu 2.0 system allows you to create incredibly streamlined, highly sophisticated and totally custom website menu's with ease.

Create menus, sub menus, html menus, widgets and even dynamic content with a few mouse clicks. And we haven't forgotten about your design needs, either! Load some pre-set templates, or design literally from scratch - we have both areas covered.

In this How To article we'll cover the basics of the new menu system, giving you an overview of the features we think you'll find most useful. Read on to find out more!

Menu 2.0 Feature Overview

  • Fully customize your menu, from top to bottom.
  • Choose from a huge range of pre-set themes.
  • Menus, Sub menus, Sub Sub Menus, HTML Menus Division lines supported.
  • Add Icons/images to your menu items, or even use them instead of text.
  • Set viewing permissions per menu item.
  • Choose between Fixed and Contained menu styles.
  • Add Widgets, such as Admin tools and/or Social Media features.
  • Custom built your menu from the ground up with CSS!


What does it look like?

Front End -

front%20end_tn.png

Back end -

back%20end_tn.png

How do I set it up?

1) Menu Manager

First stop, the Menu Manager section! This is where we style our menu's layout, adding menu items and sub menu items, as well as customizing our links and images. Just head over to your Admin -> Modules section. From here you should see your new menu module under the name "Menu 2.0" (Fancy!). Just click edit and you will be taken to the Menu Manager section.

Adding menu items:

From the Menu Manager just click the "Create Menu Item" option to start adding items to your module.

create_tn.png

After clicking Create Item you will be given a few fields to fill in. You can add a Menu Name, a Menu Link, or a Custom Link URL. If you're linking to an Enjin website page, use the "Menu Link" option. If you're intending to re-direct off Enjin, use the "Custom Link URL".

You can also add permissions to your menu item. You can set View Access to a specific tag/team, which will hide the menu item to users outside that particular tag/team group.

You can also add a "Menu Hint" - nifty, huh?

create2_tn.png

A bit further down we also have the awesome option to upload or select an image/icon to use on our Menu Item. You can upload you own, or choose from our huge icon gallery! You can even disable text completely and just use an image. Just select "Disable Menu Text".

create3_tn.png

And last but not least, before you add your Menu Item you can choose what type of Menu you want. You can choose between Normal Menu (Not a Submenu Item), a Submenu, A division Line or a HTML Submenu.

  • A Normal Menu is exactly that. a Normal Menu Item.
  • A Submenu Item will appear as a drop down item below it's parent Menu Item.
  • A Division Line is used to create a "gap" between menu items (Normal or Sub) which can be customized in the Style Editor.
  • A HTML Submenu is a option that allows you to add your own HTML code.



When chosen, just click "Create Item".

create4_tn.png

Re-arranging items:

Once you've created a few Menu Items you may want to move and arrange them. No problem! Just click and drag on the small cross icon and move as you wish! To delete, just hit the red cross button on the far right.

create5_tn.png

2) Style Editor

This is where we can customize our new menu system...and when we say customize, we mean it! There is far too much to cover here in a single article, so we'll just give you an overview and try to highlight the best aspects, and any small ones you may miss.

All design (Not including Custom coded design) is done from the 'Style Editor' tab. From here you'll be given a load of Menu options to navigate through, giving you huge design flexibility over all your menu elements. To start customizing one, just select the appropriate menu option.

style2_tn.png

Preview and Toggle:

Need a better design perspective? Toggle between a range of different backgrounds, and preview menu changes in real time via the editor.

create6_tn.png

Click and Edit:

From the preview window, simply "click" to edit your menu items. No need to jump between different tabs!

style1_tn.png

Design:

And when it comes to design, we really have got you covered. Simply choose the menu element you'd like to customize from the side menu. From here, most tabs offer you a Gradient Style slider and a bunch of cool presets.

style3_tn.png

To use the Gradient Style tool, just click to create an anchor point and select your color. The color will be pulled up until that anchor point. You can add as many anchor points as you want, so let's get colorful!

style4.png

There is also an option to "Copy Style from" a different element. This is great to avoid having to duplicate the elements style manually. Just choose from the drop down list.

You can also just disable the elements style altogether using the "Disable Style" button.

style5.png

We have some great "Hover" Effects available to use (Mostly on button tabs), and you can even upload your own images (Available on almost all tabs - whoo!).

style6_tn.png

But seriously, there is SO much included in our Style Editor (With most being self explanatory), we recommend you simply jump in and start experimenting!

3) Widgets

We've also give you guys the awesome ability to add widgets and system tools to your menu, further enhancing it's functionality!

Adding Widgets:

To get started adding Widgets, head over to the "Widgets" tab. From here, just click "Create Widget".

widget_tn.png

After clicking Create, you'll be given a bunch of cool widgets to choose from. You can choose from system tools such as Login boxes and Admin Navigation, or social widgets, such as Facebook Likes and Twitter Follower count.

widget2.png

Most widgets are pretty self explanatory, but two we'll highlight are the "Dynamic Text" Widget and "Site Admin Nav" widget.

The Dynamic Text widget is really cool. What makes it dynamic? Variables. We've added a bunch of variables for you to make use of, to pull real time data which your users will see when browsing. Display a users credit totals, post count, or even their last login date - Static content, move over!

widget4_tn.png

The next Widget we'll cover is the "Site Admin Nav" Widget. This useful feature adds the website system navigation to your menu. It no longer needs to be stuck at teh top, you can move it anywhere you like with our new Menu Module.

admin%20nav.png

Moving Widgets:

Once you've added your Widgets, it's also super easy to manage how they're displayed. Your Menu 2.0 is structured into two columns, left and right. You can move Widgets between columns by pressing the small arrow icon, or simply move them up and down the priority list of their home column using the arrow button.

widget3_tn.png

4) CSS

And last, but by no mean least, for the adventurous of you, we have our CSS section. This section allows you to fully code and customize your new menu from the ground up. Edit and build on our pre-set code, or build from scratch - the choice is yours!

css_tn.png

The 3 T's

Tips and Tricks

- Use two menus together! You can throw together as many menu modules as you like. Using two in the 'Fixed' position is a cool way to separate your Admin/Login widgets from your actual menu items.

2menus_tn.png

- Need a more customized menu item? Use a HTML Menu object. Just throw in some HTML code and Bam!

- Make use of the "toggle" feature in our Style Editor to get a better feel for your menu before you publish.

- It's tough creating things from scratch, so don't forget to have a look at our great pre-set themes inside the Style Editor.

Troubleshooting

- Using your own custom images is awesome, but make sure they meet the sizes requirements. Images too large won't be uploaded!

- Using custom CSS will disable all styles set in the editor. You can only design one way or the other!

What do you think?

Have any tips, tricks, or suggestions related to this article you'd like to share? Post a comment below!

Create your guild/clan website today, and make use of all the great features listed above.
Sign up for our awesome 14 day free trial !
Was this article helpful?
0 out of 0 found this helpful