This shows you the differences between two versions of the page.
admin_dashboard:system_admin:system_settings:menu [2015/06/09 07:48] mooeditor |
admin_dashboard:system_admin:system_settings:menu [2015/08/24 01:12] |
||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====== Menu Manager Introduction ====== | ||
- | |||
- | ---- | ||
- | |||
- | {{:admin_dashboard:system_admin:system_settings:d8f893bcebefb0323123e6d47b1f39f7.jpg}} | ||
- | |||
- | #The Menu Manager Layout. | ||
- | |||
- | ***This article is about customizing your menu, not only main menu.** | ||
- | |||
- | Explaination: | ||
- | |||
- | {{:admin_dashboard:system_admin:system_settings:12f22196e4aa280b405b4720f5906738.jpg}} | ||
- | |||
- | #1 This is the area of **Pages**, **Links**, **Header** **Title** for your menu to add | ||
- | |||
- | #2 The **Menu name,** and **Setting** are for displaying your menu Horizontal or Vertical | ||
- | |||
- | #3 The **Menu Structure** settings, in this area, you can config the plugin or page enabled/disabled to users, change names, change order…etc | ||
- | |||
- | #4 **Save Menu** button after changes. | ||
- | |||
- | __**I/How to add a new page as a item in your menu:** __ | ||
- | |||
- | {{:admin_dashboard:system_admin:system_settings:fd72bad66f4c9e08ba7bb40316028609.jpg}} | ||
- | |||
- | #1 Check on the **checkbox** of the page you want to add. | ||
- | |||
- | #2 Press on **Add to Menu.** | ||
- | |||
- | #3 Press on **Save Menu ** to finish. | ||
- | |||
- | On Front End, it will look like: | ||
- | |||
- | {{:admin_dashboard:system_admin:system_settings:f009941c7e6520e1726a1fdd8bb7639f.jpg}} | ||
- | |||
- | #The page you added, now displayed in Main Menu | ||
- | |||
- | __**II/How to add link:** __ | ||
- | |||
- | {{:admin_dashboard:system_admin:system_settings:31b460b588101cb14817ed71be6b07dc.jpg}} | ||
- | |||
- | #1 Enter the url that you wanted to lead user to. | ||
- | |||
- | #2 Enter the text for displaying on the menu | ||
- | |||
- | #3 Press on **Add to Menu** | ||
- | |||
- | #4 **Save Menu**. | ||
- | |||
- | At the Front-end, it will be like: | ||
- | |||
- | {{:admin_dashboard:system_admin:system_settings:75c7c32c97e97b119edd3cc13721705c.jpg}} | ||
- | |||
- | #Link added now displaying at **Main Menu.** | ||
- | |||
- | When a user clicks on this, it will lead user to URL you added. | ||
- | |||
- | **__III/How to add Header Title:__ ** | ||
- | |||
- | {{:admin_dashboard:system_admin:system_settings:9ead0eb59c0c27d56beaca215584304f.jpg}} | ||
- | |||
- | #1 Enter the **Header Title.** | ||
- | |||
- | #2 Press on **Add Header to Menu.** | ||
- | |||
- | #3 Press **Save Menu.** | ||
- | |||
- | After finished, front-end will be displayed as: | ||
- | |||
- | {{:admin_dashboard:system_admin:system_settings:89c7fff0de3ec6f07a0ad5edfa03280e.jpg}} | ||
- | |||
- | # The **Header ** after added to **Main Menu** | ||
- | |||
- | __**IV/How to change menu order:** __ | ||
- | |||
- | Simply just drag & drop the cards at **Menu Structure**, replace or moving these cards as order you preferred. | ||
- | |||
- | An example, we decided to move Events at the end of order to the 2<sup>nd</sup> position on Main Menu. | ||
- | |||
- | {{:admin_dashboard:system_admin:system_settings:afb701c0b05adcbdf9d843394699a589.jpg}} | ||
- | |||
- | #Drag Event card and then drop it below Home card. | ||
- | |||
- | #Hit Save Menu button. | ||
- | |||
- | {{:admin_dashboard:system_admin:system_settings:4ec208f763acbdb76fcad6d4e2de2bea.jpg}} | ||
- | |||
- | #After moved | ||
- | |||
- | And at Front-end, we have: | ||
- | |||
- | {{:admin_dashboard:system_admin:system_settings:a9351e622eabfe03080c40ee74a0cd6d.jpg}} | ||
- | |||
- | # Events has been moved to 2<sup>nd</sup> position. | ||
- | |||
- | __**V/How to set Sub-Menu**__: | ||
- | |||
- | Just like moving menu, we drop & drag cards in **Menu Structure ** to the position below others to make them as sub-menus for these cards. | ||
- | |||
- | Now, example, we set Events as a sub-menu for Home: | ||
- | |||
- | {{:admin_dashboard:system_admin:system_settings:e65e5eb73fdbd992122978c04f578ed4.jpg}} | ||
- | |||
- | #Drag then Drop Events card to position below Home, and little bit to the right to make it as Sub-Menu of Home. | ||
- | |||
- | {{:admin_dashboard:system_admin:system_settings:078d54f91fdd83616862c10adab9c881.jpg}} | ||
- | |||
- | #The Events is now Sub-Menu of Home, you can see Events card now has the //sub item // next to it. | ||
- | |||
- | At the Front-End: | ||
- | |||
- | {{:admin_dashboard:system_admin:system_settings:2d61df9a52fedfc1a1f6f1905a71aaf2.jpg}} | ||
- | |||
- | #Events now is a Sub-Menu of Home, when you point your mouse at Home, its submenu will fly out. | ||
- | |||
- | __**VI/How to customize your menu’s item:** __ | ||
- | |||
- | You can start customize your menu’s item by clickin’ on drop down button of the card. | ||
- | |||
- | {{:admin_dashboard:system_admin:system_settings:9a2273bc18500ea3ff550f00bf721612.jpg}} | ||
- | |||
- | #Click on drop down button and the menu settings will show. | ||
- | |||
- | You can change the item name: | ||
- | |||
- | {{:admin_dashboard:system_admin:system_settings:0085cdc4d3b82667c566c00d2a707d81.jpg}} | ||
- | |||
- | #At the Navigation Label, type in anything you want for displaying as the title for the item. | ||
- | |||
- | You can add Title Attribute for your item: | ||
- | |||
- | {{:admin_dashboard:system_admin:system_settings:92371c4e3600ddfd0e4349345ca360c7.jpg}} | ||
- | |||
- | #Fill in your content to display as Title Attribute then Hit on **Save Menu** button. | ||
- | |||
- | At the Front-end we will see: | ||
- | |||
- | {{:admin_dashboard:system_admin:system_settings:a4ea48f2cd9435938a7c3cede1f8da48.jpg}} | ||
- | |||
- | # The Title Attribute will display when you pointing your mouse at the item. | ||
- | |||
- | Font Awesome Class: | ||
- | |||
- | You can add Font Awesome to your menu’s items, just get the code of icon from the link we provided. | ||
- | |||
- | {{:admin_dashboard:system_admin:system_settings:da3c5d3a3d135462799dfb4282055843.jpg}} | ||
- | |||
- | #Click on the Font Awesome link. | ||
- | |||
- | At the Font Awesome site, click on any icon you like, after that: | ||
- | |||
- | {{:admin_dashboard:system_admin:system_settings:5672a51b575c630860027618d1c1c169.jpg}} | ||
- | |||
- | #Copy the highlighted as above Font Awesome Class. | ||
- | |||
- | Now we’re about to add it to Font Awesome Class field: | ||
- | |||
- | {{:admin_dashboard:system_admin:system_settings:c07f80f946912ff4e4df4adca6f4890c.jpg}} | ||
- | |||
- | #Add code into your Font Awesome Class field and hit **Save Menu** button. | ||
- | |||
- | What will happen at Front-end: | ||
- | |||
- | {{:admin_dashboard:system_admin:system_settings:72677e292042605ffddd307e8f7c4090.jpg}} | ||
- | |||
- | #You can see the icon is added to Groups. | ||
- | |||
- | Enable/Disable item to users: | ||
- | |||
- | Example, we want to disable Groups. | ||
- | |||
- | {{:admin_dashboard:system_admin:system_settings:80e7448d24c8053d55d828cd9d480745.jpg}} | ||
- | |||
- | #Switch to No at Active options and press **Save Menu** button. | ||
- | |||
- | All the users will not see Groups anymore at front end. | ||
- | |||
- | {{:admin_dashboard:system_admin:system_settings:eb3407a4f2975648b3b66998e5b93645.jpg}} | ||
- | |||
- | #The Groups is disabled to users, did not displayed on your menu. | ||
- | |||
- | Open in new tab when clicked on item: | ||
- | |||
- | After enabled Open In New Tab, the item will open in new tab after users clicked on it. | ||
- | |||
- | Example, we want the Groups open in new tab | ||
- | |||
- | {{:admin_dashboard:system_admin:system_settings:3575fff4ee527642a628a49445e0f37e.jpg}} | ||
- | |||
- | #Enable Open in new tab and hit **Save Menu ** button. | ||
- | |||
- | Making User Group Access: | ||
- | |||
- | You can make User Group Access, for simple, if you do not want Guests to access your Groups, remove the tick from Guest role. | ||
- | |||
- | {{:admin_dashboard:system_admin:system_settings:1d04e4af9833ddb95b12a28693ab7d8b.jpg}} | ||
- | |||
- | #Remove the tick from Guest role and hit **Save Menu ** button to make it performed its function. | ||
- | |||
- | Then, at the Front-end: | ||
- | |||
- | {{:admin_dashboard:system_admin:system_settings:9c278d432b3be7fd644b4fedc41f06c6.jpg}} | ||
- | |||
- | #The unregistered users (Guests) cannot see Groups after you disabled user’s role Guest to access. | ||
- | |||
- | Remove your item out of the menu: | ||
- | |||
- | If you wanted to remove the item out of your menu, just press **Remove ** button at the bottom in the item customizer. | ||
- | |||
- | {{:admin_dashboard:system_admin:system_settings:cec3c1aba404d558ad22297de62fca18.jpg}} | ||
- | |||
- | #Press **Remove ** button then **Save Menu.** | ||
- | |||
- | **__VII/Add new Menu:__ ** | ||
- | |||
- | Simply press on Add New Menu: | ||
- | |||
- | {{:admin_dashboard:system_admin:system_settings:5dce48656e5415b90055c2cb38fc39e3.jpg}} | ||
- | |||
- | #Press on Add New Menu to begin | ||
- | |||
- | Then you have to fill in this New Menu’s name, Style Vertical or Horizontal | ||
- | |||
- | {{:admin_dashboard:system_admin:system_settings:be8da5dc0ed5737ed45c1c82d5868aa1.jpg}} | ||
- | |||
- | #1/ Enter your new menu name. | ||
- | |||
- | #2/ Select your menu style. | ||
- | |||
- | #3/ Click on **Create** button. | ||
- | |||
- | To select menu for editing, you will have to select it from the drop down list next to **Add New Menu** button. | ||
- | |||
- | {{:admin_dashboard:system_admin:system_settings:cf9a876462a402f5461f49a38bc34b34.jpg}} | ||
- | |||
- | #Select your menu from drop down list next to **Add New Menu** | ||