J3.x

Difference between revisions of "Adding a new menu"

From Joomla! Documentation

(fix)
(10 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{Top portal heading|color=white-bkgd|icon=magic|icon-color=#5091cd|size=3x|text-color=#333|title=<translate><!--T:2-->
+
<noinclude><languages /></noinclude>
 +
{{Top portal heading|color=white-bkgd|icon=magic|icon-color=#5091cd|size=3x|text-color=#333|title=<translate><!--T:13-->
 
Tutorial<br />
 
Tutorial<br />
 
How to Add a New Menu</translate>}}
 
How to Add a New Menu</translate>}}
 
<noinclude>{{Joomla version|version=3.x}}</noinclude>
 
<noinclude>{{Joomla version|version=3.x}}</noinclude>
  
Joomla! allows you to create Menus for flexible navigation. In this tutorial, you’ll find a complete walkthrough of the steps involved in creating a Menu in a Joomla! site. In this tutorial, we will set up a new menu with a menu module, position it in a template and add a menu item to it.  
+
<translate><!--T:14-->
 +
Joomla! allows you to create Menus for flexible navigation. In this tutorial, you’ll find a complete walkthrough of the steps involved in creating a Menu in a Joomla! site. In this tutorial, we will set up a new menu with a menu module, position it in a template and add a menu item to it.</translate>
  
==Step 1 - Create a New Menu==
+
<translate>
 +
==Step 1 - Create a New Menu== <!--T:15-->
 +
</translate>
 
__TOC__
 
__TOC__
1. Open a new browser window and type in the URL, which will be similar to <code><nowiki>http://www.your-site-name-here.com/administrator</nowiki></code> or, if you have Joomla! installed on your local computer, <code><nowiki>http://localhost/your-folder-name-here/administrator</nowiki></code>. Here you will have to log in as an Administrator or Super Administrator.
+
<translate><!--T:16-->
 +
1. Open a new browser window and type in the URL, which will be similar to <code><nowiki>http://www.your-site-name-here.com/administrator</nowiki></code> or, if you have Joomla! installed on your local computer, <code><nowiki>http://localhost/your-folder-name-here/administrator</nowiki></code>. Here you will have to log in as an Administrator or Super Administrator.</translate>
  
2. There are 2 ways to add a "Menu": Within the site administration panel, select '''Menus''' from the menu bar in the upper left corner. From the drop-down list, choose the "Manage" then choose "Add New Menu".  You can also select '''Menu Manager''' from the left column and then select "New" from the top left corner icons.
+
<translate><!--T:17-->
[[Image:J3x-Add-Menu-With-Module-en.png]]
+
2. There are 2 ways to add a '''Menu''': Within the site administration panel, select '''Menus''' from the menu bar in the upper left corner. From the drop-down list, choose the "Manage" then choose "Add New Menu".  You can also select '''Menu Manager''' from the left column and then select "New" from the top left corner icons.</translate>
[[Image:J3.x-MenuManager-New-en.png]]
+
[[Image:J3x-Add-Menu-With-Module-<translate><!--T:18-->
 +
en</translate>.png]]
 +
[[Image:J3.x-MenuManager-New-<translate><!--T:19-->
 +
en</translate>.png]]
  
3. Fill in the "Title", "Menu Type" and a "Description":
+
<translate><!--T:20-->
*'''Title *''': A proper title for the menu. This is used to identify the menu in the Menu Manager in the backend.
+
3. Fill in the "Title", "Menu Type" and a "Description":</translate>
*'''Menu type *''': This should be a unique identification name used by Joomla! to identify this menu. Spaces are not allowed but you may use the '-' character such as news-menu.
+
<translate><!--T:21-->
*'''Description''': A description of the menu, useful for your own reference.
+
*'''Title *''': A proper title for the menu. This is used to identify the menu in the Menu Manager in the backend.</translate>
[[File:J3.x-NewMenu-Fields-en.png]]
+
<translate><!--T:22-->
 +
*'''Menu type *''': This should be a unique identification name used by Joomla! to identify this menu. Spaces are not allowed but you may use the '-' character such as news-menu.</translate>
 +
<translate><!--T:23-->
 +
*'''Description''': A description of the menu, useful for your own reference.</translate>
 +
[[File:J3.x-NewMenu-Fields-<translate><!--T:24-->
 +
en</translate>.png]]
  
4. Click the '''Save''' or the '''Save and Close''' toolbar button to create the new menu. The '''Save and Close''' button will return you to the Menu Manager. To leave without saving click the '''Cancel''' toolbar button. {{-}}
+
<translate><!--T:25-->
[[File:J3.x-NewMenu-Save-<translate><!--T:8-->
+
4. Click the '''Save''' or the '''Save & Close''' toolbar button to create the new menu. The '''Save & Close''' button will return you to the Menu Manager. To leave without saving click the '''Cancel''' toolbar button.</translate> {{-}}
 +
[[File:J3.x-NewMenu-Save-<translate><!--T:26-->
 
en</translate>.png]]
 
en</translate>.png]]
  
5. If you saved and closed, you will see your new menu in the list of Menus.  
+
<translate><!--T:27-->
 +
5. If you saved and closed, you will see your new menu in the list of Menus.</translate>
  
==Step 2 - Create the Module for Your Menu==
+
<translate>
 +
==Step 2 - Create the Module for Your Menu== <!--T:28-->
 +
</translate>
  
1. In the far right column of the Menu Manager, click on '''Add a Module for this Menu Type'''. You can also add a Menu Module through the Module Manager. Click here to see this option: [[S:MyLanguage/Help34:Extensions Module Manager Menu|Module Menu]]
+
<translate><!--T:29-->
 +
1. In the far right column of the Menu Manager, click on '''Add a module for this menu type'''. You can also add a Menu Module through the Module Manager. Click here to see this option: [[S:MyLanguage/Help34:Extensions Module Manager Menu|Module Menu]]</translate>
  
[[File:J3x-Add-Menu-With-Module-2-<translate><!--T:8-->
+
[[File:J3x-Add-Menu-With-Module-2-<translate><!--T:30-->
 
en</translate>.png]]
 
en</translate>.png]]
  
2. You will be looking at the "Menu Module". Here are a few of the most basic points regarding the Menu Module:
+
<translate><!--T:31-->
 +
2. You will be looking at the '''Menu Module'''. Here are a few of the most basic points regarding the Menu Module:</translate>
  
*The '''Title''' field is required, so create a descriptive title. If you want this title displayed on the front of the website, click on the "Show Title" button on the right.
+
<translate><!--T:32-->
*Notice the '''Select Menu''' list. This should show the name of the Menu you just created.  
+
*The '''Title''' field is required, so create a descriptive title. If you want this title displayed on the front of the website, click on the "Show Title" button on the right.</translate>
*You need to select a '''Position''' in your template for where you want your menu to appear. Note: getting it to look the way you want it to depends on your template styling.
+
<translate><!--T:33-->
 +
*Notice the '''Select Menu''' list. This should show the name of the Menu you just created.</translate>
 +
<translate><!--T:34-->
 +
*You need to select a '''Position''' in your template for where you want your menu to appear. Note: getting it to look the way you want it to depends on your template styling.</translate>
  
 
[[File:J3x-Add-Menu-With-Module-3-<translate><!--T:8-->
 
[[File:J3x-Add-Menu-With-Module-3-<translate><!--T:8-->
 
en</translate>.png]]
 
en</translate>.png]]
  
3. There are many options to choose from in the Menu Module such as, publishing dates, user access, and sub-menu items just to name a few. For detailed information about the Menu Module and all it's parameters see: [[S:MyLanguage/Help34:Extensions Module Manager Menu|Module Menu]]
+
3<translate><!--T:35-->
 +
. There are many options to choose from in the Menu Module such as, publishing dates, user access, and sub-menu items just to name a few. For detailed information about the Menu Module and all its parameters see: [[S:MyLanguage/Help34:Extensions Module Manager Menu|Module Menu]]</translate>
 +
 
 +
<translate><!--T:36-->
 +
4. Click the '''Save''' or the '''Save & Close''' toolbar button to create the new Menu Module. The '''Save & Close''' button will return you to the '''Module Manager'''. To leave without saving click the '''Cancel''' toolbar button.</translate>
  
4. Click the '''Save''' or the '''Save and Close''' toolbar button to create the new Menu Module. The '''Save and Close''' button will return you to the '''Module Manager'''. To leave without saving click the '''Cancel''' toolbar button.
+
<translate>
 +
==Step 3 - Add Menu Items to Your Menu== <!--T:37-->
 +
</translate>
  
==Step 3 - Add Menu Items to Your Menu==
+
<translate><!--T:38-->
 +
Now it's time to add '''Menu Items''' to your new menu. There are many kinds of Menu Item Types in Joomla. Some are included in the core installation and many third-party components may add more types also. To continue with this exercise you can do one of 2 things:</translate>
  
Now it's time to add Menu Items to your new menu. There are many kinds of Menu Item Types in Joomla. Some are included in the core installation and many third-party components may add more types also. To continue with this exercise you can do one of 2 things:
+
<translate><!--T:39-->
 +
*Complete the detailed tutorial here on Joomla! Documentation which describes how to [[S:MyLanguage/Adding a menu item which points to an Article|Add a menu item which points to an Article]].</translate>
 +
<translate><!--T:40-->
 +
*For detailed information on all the parameters available for Menu Items see: [[S:MyLanguage/Help34:Menus_Menu_Item_Manager_Edit|Menu Item Manager]].</translate>
  
*Complete the detailed tutorial here on Joomla Documentation which describes [[S:MyLanguage/Adding a menu item which points to an Article|Adding a menu item which points to an Article]].
+
<translate><!--T:41-->
*For detailed information on all the parameters available for Menu Items see [https://help.joomla.org/proxy/index.php?option=com_help&keyref=Help34:Menus_Menu_Item_Manager_Edit Menu Item Manager].
+
When you've added a menu item or two to your new menu, make sure you check out how it looks on the front end of your site.</translate>
  
When you've added a menu item or two to your new menu, make sure you check out how it looks on the front end of your site.
+
<noinclude>
 +
<translate>
 +
<!--T:42-->
 +
[[Category:Beginners]]
 +
[[Category:Tutorials]]
 +
[[Category:Joomla! 3.x]]
 +
[[Category:Menu Management]]
 +
</translate>
 +
</noinclude>

Revision as of 07:30, 24 November 2015

Other languages:
Deutsch • ‎English • ‎Nederlands • ‎español • ‎français • ‎hrvatski • ‎português do Brasil • ‎русский • ‎中文(台灣)‎
Tutorial
How to Add a New Menu
Joomla! 
3.x

Joomla! allows you to create Menus for flexible navigation. In this tutorial, you’ll find a complete walkthrough of the steps involved in creating a Menu in a Joomla! site. In this tutorial, we will set up a new menu with a menu module, position it in a template and add a menu item to it.

Step 1 - Create a New Menu[edit]

1. Open a new browser window and type in the URL, which will be similar to http://www.your-site-name-here.com/administrator or, if you have Joomla! installed on your local computer, http://localhost/your-folder-name-here/administrator. Here you will have to log in as an Administrator or Super Administrator.

2. There are 2 ways to add a Menu: Within the site administration panel, select Menus from the menu bar in the upper left corner. From the drop-down list, choose the "Manage" then choose "Add New Menu". You can also select Menu Manager from the left column and then select "New" from the top left corner icons. J3x-Add-Menu-With-Module-en.png J3.x-MenuManager-New-en.png

3. Fill in the "Title", "Menu Type" and a "Description":

  • Title *: A proper title for the menu. This is used to identify the menu in the Menu Manager in the backend.
  • Menu type *: This should be a unique identification name used by Joomla! to identify this menu. Spaces are not allowed but you may use the '-' character such as news-menu.
  • Description: A description of the menu, useful for your own reference.

J3.x-NewMenu-Fields-en.png

4. Click the Save or the Save & Close toolbar button to create the new menu. The Save & Close button will return you to the Menu Manager. To leave without saving click the Cancel toolbar button.

J3.x-NewMenu-Save-en.png

5. If you saved and closed, you will see your new menu in the list of Menus.

Step 2 - Create the Module for Your Menu[edit]

1. In the far right column of the Menu Manager, click on Add a module for this menu type. You can also add a Menu Module through the Module Manager. Click here to see this option: Module Menu

J3x-Add-Menu-With-Module-2-en.png

2. You will be looking at the Menu Module. Here are a few of the most basic points regarding the Menu Module:

  • The Title field is required, so create a descriptive title. If you want this title displayed on the front of the website, click on the "Show Title" button on the right.
  • Notice the Select Menu list. This should show the name of the Menu you just created.
  • You need to select a Position in your template for where you want your menu to appear. Note: getting it to look the way you want it to depends on your template styling.

J3x-Add-Menu-With-Module-3-en.png

3. There are many options to choose from in the Menu Module such as, publishing dates, user access, and sub-menu items just to name a few. For detailed information about the Menu Module and all its parameters see: Module Menu

4. Click the Save or the Save & Close toolbar button to create the new Menu Module. The Save & Close button will return you to the Module Manager. To leave without saving click the Cancel toolbar button.

Step 3 - Add Menu Items to Your Menu[edit]

Now it's time to add Menu Items to your new menu. There are many kinds of Menu Item Types in Joomla. Some are included in the core installation and many third-party components may add more types also. To continue with this exercise you can do one of 2 things:

When you've added a menu item or two to your new menu, make sure you check out how it looks on the front end of your site.