Thursday, November 30, 2023
HomeVideo EditingHow you can Create a Navigation Menu in eLearning

How you can Create a Navigation Menu in eLearning


(Final Up to date On: January 16, 2023)

With a navigation menu, learners can simply make their approach round your eLearning programs or shows and attain their vacation spot. Let’s learn to create a navigation menu with ActivePresenter. 

a sample of navigation menu

You might be conversant in navigation bars, panes, or menus on any file or net browser.  A navigation menu is commonly positioned on the highest or left facet of the web site. It shows an organized checklist of all of the content material from one devoted space. When you choose one from the checklist, you possibly can entry data or be directed to the corresponding location. To create issues like that, you want coding expertise which appears to be exhausting for inexperienced customers. Should you simply desire a navigation menu or shows, it’s a lot simpler to do because of ActivePresenter. From model 9 of the app, making a navigation menu with one of many new options – Dropdown is a chunk of cake. To see the way it works, obtain ActivePresenter 9 and open this pattern.

Download ActivePresenter

At this time, let’s dive into this weblog to learn to create a navigation menu with ActivePresenter 9. The steps lined are as follows:

Let’s get began!

Put together for Making a Navigation Menu

As you possibly can see, the pattern is a report about Vietnam’s main agricultural merchandise export for the interval 2017 – 2021. The venture consists of 1 opening slide and 5 content material slides. The opening slide is created with a background picture, title, a dropdown that reveals a listing of productions, and the sources of information. Every content material slide accommodates a form, a chart, an image of an export product, and a button. Amongst these objects, some can be found within the app comparable to shapes, textual content, charts, and buttons. So, you could put together for the remainder of the assets. They’re:

  • A background picture for the opening slide; 
  • 5 photos of the merchandise. You may import them to the Assets pane upfront (View tab > Assets > click on E8iYU9h1z VOwm3PXPTa6FWHEPZ48vFpe K5D9 RPNPB6iaEaXxt56Dd8A7qrTuxjVG0vMHdPA3bADlJw Yhk0EjTQSCU4P 0HA1scUJt7UHQ0O0hdigdIT Rqu35nZwoIDZiZX9C5xzyMtN8 5OassoA8KxqUHxVnwYd R5bXesWDOxY1u1KVio6w6 UQ to import the images).
  • Information of exporting agricultural merchandise. On this pattern, it’s public on associated web sites of the Vietnam authorities. 

Whenever you end gathering all of them, prepare to start out the following step.

Create the Navigation Menu 

The navigation menu within the pattern is definitely a dropdown that’s inserted into the opening slide. When it’s lively within the course, merely click on the dropdown arrow of the dropdown. It would present you a listing of main export merchandise. Choose a product on that checklist and you may be directed to the corresponding content material slide containing the product data. If you wish to return to the opening slide to pick one other product, click on the “Again to Merchandise”  button on the opening slide. Repeat the steps to discover the venture. In brief, to create a navigation menu, carry out the next steps:

Create Opening Slide

The opening slide has 3 foremost elements: title, dropdown, and the supply of information. The primary and the third ones are textual content objects. The dropdown will be inserted into the slide with a couple of clicks. Bear in mind so as to add a background picture to the slide beforehand (Properties pane > Slide Properties tab > Background Picture part > choose a background picture from the venture or import it out of your pc). 

Now, let’s create the textual content objects and the dropdown one after the other.

Create the Title and the Supply of Information on the Slide

To create these textual content objects:

  • Add 2 textual content captions to the slide (Insert tab > Textual content Caption).
  • Click on every textual content field > add the title and the supply of the info. 
  • Type them the best way you want.
  • Drag them to the specified place. 

Subsequent, you possibly can insert a dropdown into the slide. 

Insert a Dropdown into the Slide

Observe the steps under so as to add a dropdown to the slide:

  • Insert a dropdown (Insert tab > Dropdown).
  • Type it for a greater look (choose the dropdown > Format tab > select a preset model within the Dropdown Kinds checklist. Alternatively, you should utilize instruments within the Dropdown Instruments, Fast Type, and Type Instruments in the identical tab). 

Change the Dropdown Properties

Now you possibly can change the properties of the dropdown in its Properties pane > Interactivity tab > Dropdown part. Intimately, you could:

  • Identify the trace merchandise “Merchandise” (click on on the Trace Merchandise field > kind “Merchandise”).
  • Add 5 gadgets, specifically “Rice”, “Espresso”, “Rubber”, “Cashew nuts”, and “Inexperienced tea” to the Merchandise Record (click on E8iYU9h1z VOwm3PXPTa6FWHEPZ48vFpe K5D9 RPNPB6iaEaXxt56Dd8A7qrTuxjVG0vMHdPA3bADlJw Yhk0EjTQSCU4P 0HA1scUJt7UHQ0O0hdigdIT Rqu35nZwoIDZiZX9C5xzyMtN8 5OassoA8KxqUHxVnwYd R5bXesWDOxY1u1KVio6w6 UQ> kind the names of these gadgets).
dropdown properties for a navigation menu

That’s how you can create the opening slide. Within the subsequent half, let’s learn to create content material slides.

Create Content material Slides

content slide

Every content material slide has 3 elements: a chart, an illustrated image of a product, and the “Again to Merchandise” button. 

Insert a Column Chart into the Content material Slide

As you might know, the newest model of ActivePresenter permits you to add column charts to your venture. On this pattern, the chart reveals the data on an exported agricultural product in a column chart format. The orange and inexperienced columns signify the exported quantity and the worth respectively. So as to add a chart like that to the slide, do the next steps:

  • Insert a column chart (Insert tab > Chart > Column).
  • Edit information within the Chart Information.
    • Add and title the Class as years from 2017 to 2021.
    • Identify the Dataset because the exported quantity and worth. Each have the corresponding models. For instance, “Export Quantity (million tons)”.
dataset in a content slide
  • Type the chart:
    • Change the chart title. 
    • Type the columns (choose the chart > Properties pane > Chart tab > Type part > model every dataset).
    • Change the model of the title and chart legends.

Insert an Illustrated Image 

To insert the image, merely drag it from the Assets pane to the slide. 

Create the “Again to Merchandise” Button

The button within the content material slide is to navigate learners again to the opening slide with a click on. So, they’ll select to test different content material slides. To create the button, comply with the steps under:

  • Add a button (Insert tab > Button).
  • Identify it “Again to Merchandise”.
  • Type it the best way you need (Format tab > select a built-in model in Fast Kinds, or use instruments in Type Instruments to model the button).
  • Add the On Click on occasion to the button (navigate to its Properties pane > Interactivity tab > Occasions – Actions part > click on E8iYU9h1z VOwm3PXPTa6FWHEPZ48vFpe K5D9 RPNPB6iaEaXxt56Dd8A7qrTuxjVG0vMHdPA3bADlJw Yhk0EjTQSCU4P 0HA1scUJt7UHQ0O0hdigdIT Rqu35nZwoIDZiZX9C5xzyMtN8 5OassoA8KxqUHxVnwYd R5bXesWDOxY1u1KVio6w6 UQ > choose On Click on).
  • Add the Restart Presentation motion to the button (click on E8iYU9h1z VOwm3PXPTa6FWHEPZ48vFpe K5D9 RPNPB6iaEaXxt56Dd8A7qrTuxjVG0vMHdPA3bADlJw Yhk0EjTQSCU4P 0HA1scUJt7UHQ0O0hdigdIT Rqu35nZwoIDZiZX9C5xzyMtN8 5OassoA8KxqUHxVnwYd R5bXesWDOxY1u1KVio6w6 UQ on the occasion > Restart Presentation).

Be aware that, don’t neglect to untick the Auto Advance checkbox. Then, copy and customise this slide to create extra content material slides. Bear in mind to set every slide with a significant title so you possibly can acknowledge them within the subsequent step. 

Add Occasions – Actions to the Dropdown within the Opening Slide

The final step to making a navigation menu is so as to add occasions and actions to the dropdown within the opening slide. By doing so, when you choose a price within the dropdown checklist, it navigates you to the corresponding content material slide. To try this:

  • Add the On Change occasion to the dropdown (navigate to its Properties pane > Interactivity tab > Occasions – Actions part > click on E8iYU9h1z VOwm3PXPTa6FWHEPZ48vFpe K5D9 RPNPB6iaEaXxt56Dd8A7qrTuxjVG0vMHdPA3bADlJw Yhk0EjTQSCU4P 0HA1scUJt7UHQ0O0hdigdIT Rqu35nZwoIDZiZX9C5xzyMtN8 5OassoA8KxqUHxVnwYd R5bXesWDOxY1u1KVio6w6 UQ > choose On Change).
  • Add Go to Slide motion > choose the corresponding content material slide. Repeat the step till all of the content material slides are linked.
  • Set the situation to the motion. This helps the navigation menu direct you to the best content material slide. To try this, choose values as proven within the image under:
add condition to the navigation menu
  • Click on Add to complete including the situation.

To make the venture extra partaking when it really works, add the Play Audio motion > Right 1 to the On Change occasion. Lastly, you get the On Change occasion of the dropdown like this:

events - actions of a navigation menu

Preview, Export, and Share the Mission

To test how the navigation menu works, press F5 or click on the HTML5 icon HFkqDtq EoA7hgJICqfDreYxNWZuAmN1eOjmVlm A15PWCECAUNeZA2e5R7qCOs8U2WRsWVGimzQ4F2hCHM8QE7GuzNG8IE9RcsF9Hj4Epi uUmy5pmApoucFKVUc6ZSNsM1vCWV6fFCCqBSbYm1TLTTaVOHo8AzJK9vHIhzX1JKlX5feY8XVamhiNA4ig.

To export the venture to eLearning output and share it along with your learners, navigate to the Export tab > choose one of many outputs you want. The app allows you to export it to HTML5, SCORM, and xAPI packages.

That’s how you can create a navigation menu with ActivePresenter 9. Obtain the app and check out all of the options unlimitedly. Observe our Tutorials web page, Weblog, and YouTube channel for extra data. When you have any questions, be at liberty to contact us at electronic mail help@atomisystems.com.

See extra:

Create an Interactive Timeline Slider in eLearning Course

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments