Follow sppwebsites on Twitter
 
Chapter 7 - Create Navigation Menu(s)

This page will guide you through creating navigation Menu Item linking to one of your articles. Then we will create an additional Menu and activate the menu module in a new module position. In the end result, your website will have two separate menus. One menu will display horizontally along the top and the other vertically on the left.


Step 1

Go to your new Joomla website by typing "www.YOURDOMAINNAME.com" into the address bar of your browser, if you have not already done so.

Click for Larger Images

Step 2
After entering your domain name and going to your website, you should see an address like this "http://www.YOURDOMAINNAME.com/". At the end of the address, type "administrator" and hit return. This will load the administrative login page. Chapter 7, Create Navigation 1
Step 3
Enter the Username and Password you created in "Step 5 - Set Up Joomla" and click "Login". Chapter 7, Create Navigation 2
Step 4
You will now see the Administrative Control Panel. Go to the "Menus" drop down menu and select "Main Menu*". This will load the "Menu Item Manager" page for "mainmenu". Chapter 7, Create Navigation 3
Step 5

There should be one menu item listed named "Home". We are going to create a second menu item to link to "Page 1". "Page 1" is a generic name for an additional page we created in Step 6 - Create Website Pages.

Select "New".

Chapter 7, Create Navigation 4
Step 6

Select "Article". Then select "Article Layout".

Chapter 7, Create Navigation 5
Step 7

Enter a "Title" for your link. Then click on the "Select" button next to "Select Article".

Note: The title represents the text displayed in the link and may be different than the title of the page.
Chapter 7, Create Navigation 6
Step 8

In the "Select Article" window, click on "Page 1" (or the name of the page you wish to link to)..

Chapter 7, Create Navigation 7
Step 9

Select "Save". You will be returned to the "Menu Item Manager". Repeat steps 5-9 for as many pages as you wish to link to from the Main Menu.

Chapter 7, Create Navigation 8
Step 10

Now we are going to create a second menu which will display horizontally across the top of the website.

Select "Menu Manager" from the "Menus" drop down menu.

Chapter 7, Create Navigation 9
Step 11

The "Menu Manager" displays a list of all your menus. Select "New".

Chapter 7, Create Navigation 10
Step 12

Enter "Top Menu" for the "Unique Name", "Title", "Description" and "Module Table". Then click "Save".

Note: You can name the menu whatever you want. We are naming it "Top Menu" to maintain clarity in this tutorial. Of the four fields, "Title" is of the most consequence, because in some cases you may want the title of the menu to display on the website.
Chapter 7, Create Navigation 11
Step 13

Return to the "Menus" drop down menu and select "Top Menu".

Chapter 7, Create Navigation 12
Step 14

Repeat Step 5-9 for as many links as you wish to add to your top menu.

 
Step 15

When you are done, select "Module Manager" from the "Extensions" drop down menu.

Chapter 7, Create Navigation 13
Step 16

In the "Module Manager" you will see the "Main Menu" module and the "Top Menu" module. Select the "Top Menu" module.

Note: Modules are a method Joomla uses for displaying a wide variety of features or content in different positions on your website.
Chapter 7, Create Navigation 14
Step 17

Select "No" for "Show Title", select "Yes" for "Enabled", select "user3" from the "Position" menu and click "Save".

Note: The choice of module "Position" is effected by the template you have chosen. For the purposes of this tutorial we are assuming that you are using the default "rhuk_milkyway" template. We'll learn more about templates in Chapter 9 - Choose Design Template.
Chapter 7, Create Navigation 15
Step 18

Go to the front page of your Joomla website by typing "www.YOURDOMAINNAME.com" into the address bar of your browser. You should see the links you created in both the "Main Menu" (displayed on the left) and the "Top Menu" (displayed horizontally near the top of the webpage).

Chapter 7, Create Navigation 16


Congratulations! You now have links from two navigation menu modules to the pages you created. It's starting to look a bit more like a website, but we still have more to do.

Now let's move on to Chapter 8 - Create Contact Us Page.

  • Previous Page
  • Next Page
 

Stuck? We can Help.

For Hosting, Setup & Domain Name Support (Chapters 1-5) Contact : 480-624-2500

For Joomla & Website Development Support (Chapters 6 - 11) Contact : 831-706-4277

Our Joomla Services

Personalized Joomla Trainings



The Joomla!® name, or sometimes referred to as Joomla, is used under a limited license from Open Source Matters in the United States and other countries. SunPoweredProductions.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.