How to create a new menu in Joomla. How to make a menu in Joomla, three ways to create a menu in Joomla. Additional settings for displaying the menu on mobile devices
In this lesson on Joomla modules, I will show you a great module for displaying menus on site pages.
Where lies?
The "Menu" module directory is located in the /modules/mod_menu directory of the site's root folder. The directory contains standard files for system modules:
- tmpl directory;
- helper.php files;
- mod_menu.php
- mod_menu.xml.
Why is it needed?
The Menu module on the Joomla site is needed to show any previously made site menu in any selected position of the modules.
This module does not pick up the drop down menu style and will show the menu items as a list. This means that using this module in the template position for the main menu will NOT give a dropdown menu, but will show the menu items in a list.
Let me remind you that in order to create a drop-down menu of the site, you need to specify in the template settings which menu you have chosen as the main one.
How to create?
To create a menu module, you must have the appropriate rights. By default, only a super administrator can create this module.
- From the main menu of the administrative panel, go to the Modules tab;
- In the toolbar of the tab, click the "Create" button;
- From the list of module types, select the type Menu;
- Fill in the settings of the menu module on 4 tabs. We save;
- The entire menu has been created, after clearing the cache, the site will appear on the site.
Joomla Menu Module Settings
Let's look at the 4 tabs of the menu module settings.
Tab 1 - Module
Main settings tab. Here
Be sure to fill in the name of the module;
If you want to hide the name of the module, immediately hide it in the setting on the right "Show title";
In the settings fields, you need to: select the menu itself that you want to show (1), select the basic menu item (2), specify the start (3) and end menu item (4), and decide on the display of menu sub-items (5).
By setting (2) you can move the menu within the base menu with a complex site structure. If you take the recommended current menu item, then the nearest older active menu item will be selected as the base one.
Specifying the initial (3) and final (4) menu item allows you to shorten long menus of a complex site structure. A similar purpose for setting the display of menu sub-items (5).
In the right part of the tab, be sure to fill in the title display (6), state (8) and position in the template (7). Other settings are optional.
class="eliadunit">
The “Order” fields are interesting, here you can immediately rank the module being created in the modules of this position. This can also be done in the module table by dragging the module.
"Note" is created for site administrators and is visible in the module table.
"Start publication" will allow you to schedule the release of the module by date.
Tab 2 - Binding
Here you have to choose on which pages of the site this module will be displayed. The default setting is "All Pages".
The choice of display pages is carried out according to the menu items from the filter “On all ...”, “None”, “Only on the specified”, “On all except the specified”.
For example, you want to show the module you are creating only on the main page. To do this, select "Only on the specified" in the filter and select the check in the menu list, only the menu of the main page (selected materials).
Tab 3 - Advanced Settings
Here you can set the unique appearance of the module if your template has additional module styles or if you have created such module styles yourself.
You can do the opposite. Here, specify any of your “Menu class suffix” and “Module CSS class suffix”, and then add your own CSS rule to this module.
Unlike the settings of other modules, there is a change in the styles of the Java Script drop-down menu (Destination position).
Tab 4 - Rights
To be filled in for multi-user sites with more than one administrator.
After filling in all the fields, the menu module on the Joomla site must be saved and after clearing the cache, look at the site.
Conclusion
In this tutorial, we looked at the Menu module on the Joomla site. It is very useful for creating a full-fledged website footer with additional menus for technical and informational navigation.
Introducing a new version of the amazing and versatile vertical menu module Vertical menu 4.0.270. This is a great and versatile solution for displaying the Joomla menu itself or displaying the menus and categories of other popular add-ons. The module is fully Seo optimized and has an easy-to-configure administrative control panel where you can customize the color scheme and themes, customize the typography, display menu sources, and much more.
AP Accordion Menu v3.4 - accordion menu for Joomla
Introducing a simple and highly customizable AP Accordion Menu v3.4 vertical accordion menu module. This Joomla extension allows you to create any number of menu sub-items and supports click or hover functions to activate the menu, add icon classes, subtitles for titles and images. You can set up an unlimited number of color combinations or use 3 prepared and built-in design themes. The module uses the configuration option "layout" and "settings".
Ajax Scroll v1.6 - scrolling for Joomla
Quix Pagebuilder Pro is a professional and one of the best page builders for Joomla 3. This extension allows you to implement modern sites without the need for editing css code and coding. You just need to select a ready-made suitable layout and start building using the Drag & Drop interface. From the functionality, you can emphasize the complete SEO optimization of the created pages, convenience for extension and developers, the presence of more than 30 elements for quickly creating sites, support for Google fonts, the presence of your own media manager, a large collection of photos and other functions.
Offline Vertical Menu v3.1.201
Offline Vertical Menu v3.1.201- one of the most functional and versatile Joomla modules designed to quickly build and design any type of vertical menu. The extension can be used with any template. You can implement accordion menu, popup menu, tree menu and DropMenu. You can also make sidebars. Other features include fully customizable transition animations, overlay menu creation, item filter display, custom logo display, over 220 icon insertion, support for other components, and more.
swMenuPro 10 menu component
swMenuPro v10.7 - a new release of one of the most powerful Joomla extensions designed to create almost any structure and menu types. With this component, you can quickly make four types of pop-up or drop-down menus, three types of accordion-type menus (you can make a combined, dynamic or multi-level menu). You can also implement a multi-column or tree-like menu. In the new version, the developers have added the ability to transfer styles to other sites, connect pictures to items, edit gradients, backgrounds, shadows, corners and fonts.
Menu items in Joomla are extremely important. they form the entire structure of the site. It is the menu items that determine what will be loaded on the page and how. And all this is determined in one of the sections of Joomla - the menu.
There are many varieties of output by menu items, but of course they are all rarely used. The most popular now will be discussed.
We will add menu items to the finished Main menu Joomla, which is presented immediately after installation.
Basic menu item
1. Go to creating a menu item for a single menu (Main Menu).
2. First thing enter the name intended menu item. Next, we move on to menu item type selection, where its destination is selected.
3. Before us is the entire list of appointments. The most common section of the list is "Materials". It outputs one or more materials, i.e. the main content of the site.
Now we are deriving a single material.
4. It remains to choose The most important thing is the material itself. We pass on the new button: "Select".
5. The list will display absolutely all the materials that we have ever created in Joomla. Select the content you want to display.
6. The most important thing is done! Can persist.
7. On the site in the existing "Main Menu", a new item will appear where you can go and make sure it works.
Another menu item option
1. The page we land on, after going through the menu item, it can be completely different, such as category blog.
2. For blog categories a new button appears where you need to select one of the categories. Categories are necessary because it is they who share the whole variety of materials. For example, you can take a standard category, which all materials are divided into by default.
3. On the site, a new menu item is now available, when you click on it, several materials are displayed at once. are actually output all materials the category we have chosen and are even divided into pages.
This is just a small part of Joomla's ability to display site content. You can customize every little thing and debug pages according to your requirements: display contacts, external link, download link and much more.
If you want to turn vertical menu inhorizontalthen check out the tutorial:
Creating a Menu in Joomla 3
In this tutorial, we'll walk through the process of creating a menu on your website running CMS Joomla 3. You can create menus of any kind on Joomla sites. We will look at 3 main menu types for your website.
- Joomla 3
- Joomla 3
- dropdown menu in Joomla 3
Creating a regular menu in Joomla 3
By regular menu, we mean a standard menu that is located on the right or left side of your site and contains several elements. For example, on our site you can see the usual menu, both on its right side and on the left.
Creating such a menu is quite simple. First you need to decide on the position on which this menu item will be located. To view the positions of your site, you need to add the value “? tp =1" and go to the specified address. For example,site. ru/? tp=1 . As a result, all positions that are available in the template installed on your site should be displayed
If the positions are not displayed, then most likely you have disabled their display. To enable them, go to the section SYSTEM - GENERAL SETTINGS - TEMPLATE MANAGER.
And in the section VIEWING POSITIONS OF MODULES set the value to ON.
The figure shows that to create a regular vertical menu, you can use positions 7, 4 and 5. In different templates, the numbers and names of the positions may differ from those shown in the figure.
For example, we want to create a menu and place it at position 5. Now let's figure out how to do it step by step.
1) First, go to the section MENU - MENU MANAGER
2) Here we are interested in the point
3) After that, you will be taken to the menu options section.
You need to fill in the following fields:
header- the name of your menu. You can specify the “Left Menu” or give it a specific name “Fishing Articles”
Type Menu is a required field that is absolutely not needed. Here you can write anything. Usually the text is copied from the Heading section.
Description- you can write a few phrases about your menu. The field is optional and can be left blank.
4) Now you need to specify the position where this menu will be located. We have created a menu, giving it the name "123". Now it is located in the section MENU - MENU MANAGER.
5) Click on the button "Add a module for this type of menu"
Here you need to specify:
Menu Title - enter the name of your menu.
Show title – set to SHOW if you want the title to be displayed on the site.
State
- set PUBLISHED
In the POSITION section, you must specify the position where the created menu will be located
For example, the site uses a template - Lightbreeze-blue, which means we select it and indicate the position where this menu will be located!
But the menu will not be displayed on the site until you create at least 1 item. To create a menu item, select the created menu in the MENU section and select the section in the drop-down window.
After that, we get to the menu item creation page.
Enter the menu title here and select
Joomla offers its users a wide variety of menu modules. All these modules will be discussed in a separate lesson. We will try to create a menu item that will display a separate material. To do this, choose the value MATERIALS - MATERIAL.
As a result, you should get the following
As you can see, creating a menu in Joomla is quite simple and does not take much time.
Creating a Top Menu in Joomla 3
Many novice users CMS Joomla 3 having trouble creating a top or horizontal menu on your site. Although there is nothing complicated in this. Let's take an example of how to create such a menu. This process is not much different from creating a regular Joomla menu.
1) Go to the site section MENU - MENU MANAGER
2) Click create menu and create a new menu, calling it TOP MENU
3) Only now we need to specify the location of our menu at the top of the site. To do this, we again look at the available positions by entering the query in the search linesite. ru/? tp=1 (where site. en - the name of your site).
As you can see, there are only 2 positions at the top of our site - Position 2 and Position 1.
Now let's go to the section MENU - MENU MANAGER and click on the button
As well as for a regular menu, we prescribe a title. And in the position section, select position 1 or 2.
Well, now, after you create menu items, your top menu will look the same as on our site.
Create drop down menu Joomla 3
Well, I would also like to talk about creating a drop-down menu on Joomla 3. This is done quite simply. First you need to create the menu itself and the menu items that will drop out.
To do this, we create the main menu, which we will call "Group of materials" and two sub-items of this menu "Sub-item 1" and "Sub-item 2". In order to bind menu sub-items to the main one, when creating sub-items in the PARENT field, specify the main menu item, in our case it is “Group of materials”. In the end, you should end up with something like the image below.
After that, go to the settings of the main menu "Group of materials" and in the section set the value YES.
As a result, we get a rather convenient drop-down menu.
Conclusion
In this lesson, we've covered the basics of menu creation in Joomla 3 . If you have any questions, you can ask them by leaving comments on this article!
Overview of menu modules for CMS Joomla 3.x.
1. Maxi Menu CK
CMSJoomla 2.5/3.x.
Powerful, SEO optimized module for creating horizontal or vertical dropdown menus with responsive design and beautiful effects. In addition, it is possible to publish several instances of this module on one page. Unfortunately, the functionality of the free version of this extension is very limited.
After installing the module, the screen displays links for downloading documentation for it and paid options: an extended package of graphic themes, a plug-in for easy menu management, patches for Virtuemart, Hikashop, Joomshopping and K2 components, as well as a plug-in for correct display created menu on mobile devices.
Next, you need to go to the "Module Manager" and select "Maxi Menu CK" in it. On the Module tab of the module control panel, you can select the menu to publish, enter a unique module ID, the base menu item and its start and end levels, and you can also turn off the sublevels option.
In addition, you can use the menu setup wizard:
The convenience of using the menu wizard is to quickly switch between menu types and the options they need, but for the most part, it is relevant only if additional paid extensions are installed. On the "Binding to menu items" tab, you can select the pages of the site on which the module will be displayed; The “Effect Options” tab allows you to disable the use of effects in javascript, select their loading type and configure visual effects for menu items and sub-items. In the Styles Option, you can select a menu theme (there are three by default), menu orientation, disable responsive menu design, and select a template CSS file.
In the "Logo options" section, you can select a logo file that will be displayed on the menu, add a link to it and define its position, width, height and padding. After selecting the menu position in the template and changing the status to "Published", the menu appears on the site.
The extension on the site looks like this:
This menu (after installing a paid patch) is best used as the main menu for an online store on Joomshopping, Virtuemart or Hikashop, since it allows you to automatically display a list of product categories.
2. ARI Ext Menu
The extension is fully compatible withCMSJoomla 1.5-1.7/2.5/3.x.
Customizable menu module that supports horizontal and vertical orientation, two transition effects.
To install the extension, you need to go to the "Extension Manager", select the downloaded module file through the dialog and click on the "Download and Install" button. In the module settings, you can select the menu that will be displayed through this module, the menu orientation, the initial and final levels of the hierarchy, and also configure such parameters as showing only active menu sub-items, highlighting the current menu item. Among the system settings, the option to load the ExtJS library, select the method for loading it, and generate a unique identifier are available. You can also customize the style settings of menu items and sub-items: background color, text color, font size, alignment, and so on. The advanced module settings are pretty standard and contain caching options, cache expiration, module HTML tag, Bootstrap size, header HTML tag, and header CSS class. After setting a position for the module and publishing the module on the site, the following menu appears:
3. Accordeon Menu CK
The extension is fully compatible withCMSJoomla 2.5/3.x.
Another menu from JoomlaCK studio. Allows you to insert beautiful effects when opening a submenu, reuse the module on the page. A feature of the module is the ability to insert other modules into it. Also, in addition to the module, there are paid patches for Hickashop and Virtuemart.
After the standard procedure for installing the extension, a message appears on the screen about the successful installation of the module and a link to download documentation for it, as well as a link to insert any module as one of the menu items.
By going to the module control panel, you can select the menu to be displayed in the module, the base menu item, start and end levels, as well as set suffixes and link alignment type for images. On the “Effects” tab, you can select the event at which the menu item opens, whether a link will be shown when the mouse cursor is over the image, the type of transition, the need to use effects for the active submenu; you can also set the ID of the menu item that is active by default. On the Styles tab, you can choose a theme for the menu, specify the image folders that will be displayed when the menu is collapsed and expanded, and specify the alignment position for them. The Menu styles tab contains a lot of customization options for menu appearance: margins, background, menu item corner rounding, shadows and borders. On the "First level link styles", "Second level link styles" and "Other level link styles" tabs, you can change the font, text color, and background color for links displayed in menu items. The "Third party extensions Options" tab is intended for compatibility settings with the "Hikashop" and "Virtuemart" components and requires downloading and installing the appropriate patches. Setting mobile options in the free version of the extension is also not available.
For successful operation, you need to bind the module to menu items, specify its position and publish it. Below is an example of how the module works on the site.
4. JB DropDown Menu for Bootstrap
The extension is fully compatible withCMSJoomla 2.5/3.x.
The menu module, which works with Twitter's Bootstrap and JBootstrap, is based on the built-in Joomla menu module. Module installation is standard. In the module settings, you only need to select one of the system menus, start and end levels, and there is also a customizable ability to show menu sub-items. , as you assign this module its position and publish it, the following menu will appear on the site:
5. DJ Menu
The extension is fully compatible withCMSJoomla 2.5/3.x.
Dropdown menu with animated effects powered by Mootools. The module is installed in a standard way. On the "Module" tab of the extension's settings, you must select the menu that the module will display, as well as determine the last of its levels and, if necessary, enable the display of the menu on small screens and set its width in this case. The “CSS3 Animations and script features” tab allows you to set the animation effects when entering and exiting the menu, as well as the animation speed, set the delay time when closing the submenu, the CSS class of the title, its HTML tag and the Bootstrap size.
Below is an example of a menu created using this module.
All the modules considered in the review for creating menus on a site running CMS Joomla 3.x allow you to create a menu with sublevels. The considered modules for the most part differ in the presence of certain animation effects and the ability to display on mobile devices. Therefore, for sites focused on mobile users (and there are more and more of them), it is worth giving preference to the “DJ-Menu” module. The "Accordeon Menu CK" module is good because it allows you to insert the contents of another module into itself; The "JB DropDown Menu for Bootstrap" module is the simplest and "lightest" of the extensions reviewed and will look good paired with, for example, the default Joomla menu module. The functionality of the "Maxi Menu CK" module is impressive, but since it is significantly limited in the free version, financial investments are required in order to use it.