How to...Make an awesome menu 2.0 navigation system (Style Editor)

howtologofin_tn.png

Menu 2.0 Design
[Enjin CMS]


What is it?

Enjin has just released Menu Module 2.0 in beta, and accompanying the release is a great set of flexible deisgn options in the form of the "Style Editor" section. A nice indication of the capability of the editor is the menu bar on our official forums (Have a lookie up ^).

In this "How to" we'll walk you through all the tricks necessary to create an awesome menu module, just like the one you see above the Enjin official support forums!

Video tutorial - Coming soon.

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?

main.png


How do I set it up?

1) Menu Manager & Style Editor

The majority of magic takes place in both the Menu Manager and Style Editor. The first being used to create the structure, and the second to design everything around the structure.

To get started, head over to Admin -> Modules -> Menu Module 2.0

style.png

Menu Manager

You'll want to visit the Menu Manager tab first and create your menu items. When creating sub menu items, make sure to create a Division Line that can be placed between your items. We'll be improving on the deisgn of these in the Style Editor later in the article, so add as many as you like!

style3_tn.png

Style Editor

Ok, so you have your menu structure - great! Next stop, the Style Editor tab.

From here, the first thing you'll want to do is select between a "Fixed" and "Contained" menu positioning. A fixed positioning will allow the menu to "stick" to your website top, with any content able to scroll beneath it. We're using a total of two menus (More on this later) with a Fixed Top positioning, so if you'd like to create a menu like our Enjin one, select the "Fixed Top" option

You may also want to choose a preset style from our awesome gallery. This is far easier than building from scratch and gives you a solid base to customize. Our Enjin menu is set as "Clarity (Blue)".

style2.png

Backgrounds

After you've chosen your positioning and theme, it's off to the "Background Style" tab. This is where you'll create and edit your menu background, colors and images. For our Menu design, we've set a simple blue gradient using the "Gradient Style" selector, have chosen to have rounded corners, and to hide the stroke effects on the menu top and bottom.

If you'd prefer your menu transparent, you can click to disable it using the "Disable Menu Background" check box.

style4_tn.png

Fonts & Effects

The "Font Style" section is where, well, you'll style your font (Duh)! You can choose from a bunch of font styles, and whether you'd like the text All Capitalization. You can also add glow effects to your text and drop shadows.

We've opted for a small drop shadow and glow effect on hover on our official menu.

style5_tn.png

Mind the Gap

Moving on, we arrive at the "Positions & Gaps" section.

From this section you can position your menu buttons and item dividers, as well as choosing the convenient "Auto Position" option for easier positioning and centering.

We've chosen to Auto Position, and we've added a simple black/white 2px divider gap between our items, circled in the below image.

style6_tn.png

Buttons and Effects

From the two Button based Style Editor sections you can customize your menu buttons and hover effects. Since we're only using font hover effects on our Menu items, we've chosen to "Disable Button Style". This is entirely up to you, however, as there are some really cool things you can do with buttons and images. Make sure to play around with the Text Hover Effect options and upload your own button images if you see fit!

style7_tn.png

Submenu items

This section is a lot of fun to play around with, giving you some really cool "drop down" sub menu effects. We've chosen the "Slide down/up" effect and on a "fast" speed setting. You can also adjust the Horizontal and Vertical positioning of this effect, and specify when the submenu will open.

style8_tn.png

Submenu Button

Similar to the Submenu section, the Submenu Button section will apply to the items instead your dropdown sub menu. This section is for editing the buttons, effects and division lines of the menu items.

As you can see from our setup below, we have a slightly lighter blue colour as a Button Hover effect and a 2px wide Blue Divider colour applied.

style9_tn.png

2) Widgets

Nice! Your new menu is all styled and ready to go...but how do you create that cool logo and link back? Onward, to the "Widgets" section!

From here adding your guild/clan logo is really easy. You just need to add an Image Widget and set it to the left side column (Assuming your menu items are on the right side, of course).

You can fiddle with the positioning by editing the widget once placed, and even upload a second "Hover" image on top. This is a really nice feature, and as you can see from our below screenshot, we've set the same image with a small glow added giving an awesome effect on mouse hover.

widget_tn.png

3) Prepare for trouble, and make it double!

Why settle for a single menu module when you can use two...or three...or, well, you get the picture!

Adding more than one menu module is a great way to separate your menu items. Having too many items on a single menu can become rather cluttered, so a useful and easy trick is to just add another module containing your widgets, leaving your initial module with just your menu items.

This is something we've done on the Enjin forums, making a second menu instance containing all our fancy widgets, placing it just above our main menu module in our global header section.

NOTE: From the Style Editor, make sure both menu modules are set as "Fixed Top" or this won't work!

menu2_tn.png

menu22_tn.png

Most Widgets are fairly straight forward, but one which is slightly more complicated, although incredibly useful, is the Dynamic Content widget. This modules allows you to display dynamic data based on the variables you choose to set.

As an example, we're using the "Message_count" variable showing Enjin users any new mail they have in their inbox. We've even included a link to their inbox so all they need to do is click the widget.

menu23.png


The 3 T's

Tips and Tricks

- If you want to have a transparent style/background, choose the "Disable xxx Style" option if available for that section.

- Instead of trying to duplicate a sections style manually onto another section, try to make use of the "Inherit Style From" option.

- If you're using the two or more Menu Modules on top of one another, make sure they're set as "Fix Top" positioning from the Style Editor main tab.

Troubleshooting

- Our Menu 2.0 module is still in beta, so if you see any bugs or have any suggestions, do let us know -www.enjin.com/support

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