How To Create Horizontal Menu In Joomla

From the author: I greet you dear friend. In this article we will talk with you about how to create a vertical menu for joomla 3. Of course, the topic is not new and has already been discussed several times in articles on our site, and most likely you know very well how this element is implemented. But since the menu is the most important block of any good website, I think it will not be superfluous to consider a couple of additional extensions, thanks to which it is very easy to form this navigation block.

So, as mentioned above in this article, we will consider two quite interesting modules that form a vertical menu in CMS Joomla. This means that the first module that we will look at is the Simple Responsive Menu.

Traditionally, on the page describing the current extension, click on the "Download" button to go to the official website of the developer.

At the time of this writing, the latest current version is 1.10, so we download it using the "Download Now" button. After downloading, install the module as usual. Using the Joomla Extension Manager.

Please note that the module displays a specific menu, which means that you need to create it before publishing the module. Next, go to the module manager.

And go to the settings page of the newly installed module.

In the "Select menu" parameter, select the menu, the items of which will be displayed as the content of the module. If the menu is multi-level, that is, it contains both parent and child links, then in the "Show Sub-menu Items" parameter, you must specify "Yes", in this case the sub-items will be displayed on the screen. Also, using the "Start level" and "End Level" parameters, you can define the initial and final level of nesting of links, that is, the levels that will be displayed on the screen. And finally, we select the position for displaying the module on the screen, indicate on which pages it will be available, and define the "Published" status.

Now let's go to the user section to check the results.

As you can see, the extension works great. At the same time, adaptability has been added to the module, that is, at a certain screen size, the content of the module is collapsed into a drop-down list, thereby significantly saving the used screen space.

The parameters responsible for responsiveness are contained in the "Responsive Options" tab of the settings page of the current module. Now let's move on to the next module called Joombig Menu Tree.

This module displays a vertical menu on the screen, the appearance of which is very similar to a tree of directories and files operating system Windows. As usual, we click on the "Download" button to go to the official website of the developer.

Modern trends and approaches in web development

Learn the fast growth algorithm from scratch in site building

Now go to the configuration page of the newly installed module.

Parameters available for customization:

Enable / Disable jQuery - enable your own jQuery library;

Width of module (%) - module width in percent;

Margin - margins;

Select Menu - selection of the menu displayed by the module;

Show / Hide Title Directory - show or hide the title of the parent directory (the line that will be displayed above all menu items)

Title directory - title of the top-level item;

Start Level - the initial display level of the multilevel menu;

End Level - the final display level of the multilevel menu;

Show Sub-menu Items - whether to show sub-menu items.

After publishing the module, go to the user part to check the results.

In general, the menu module is not a complex enough module, which by and large can be created independently, but for this you need to know the CMS Joomla API. Therefore, if you want to learn how to create your own extensions that will fully solve the tasks, our Joomla-Professional course will be useful to you. Creation of extensions for Joomla.

This concludes this article. All the best and successful coding to you !!!

Modern trends and approaches in web development

Learn the fast growth algorithm from scratch in site building

The review will take place in the latest, at the time of this writing (07/01/2016), the Russian version of DJ-MegaMenu 3.4.1, Joomla 3.5.1 in the JM Real Estate Ads 1.0.2 template. Please note that there are more than two dozen ready-made, professional website templates for DJ-MegaMenu. You can read about some of them in. In the article "Video tutorial on DJ-Catalog. Creating an online store from scratch (part 3) "shows an example of setting up a new version of DJ-MegaMenu.

There is a free version of this menu module - DJ-MegaMenu Light and a completely stripped-down version of DJ-Menu.

Features of mega menu for Joomla

Let's consider the main features of DJ-MegaMenu.

The ability to customize each menu item separately from each other using the advanced options in the Joomla Menu Manager. Don't forget to activate the DJ-MegaMenu plugin. Adding icons, subtitles, setting the background (image indicating vertical and horizontal alignment), the ability to show / hide each individual menu item in a mobile or regular menu. You can also set an access key that will allow you to navigate to the desired part of the page using the keyboard.
The ability to create a multi-column (with setting the width of the columns), tree-like or regular submenu (picture below).

Adding icons (Bootstrap or Font Awesome) to menu items. Ability to display icons in a mobile or regular menu.
Add various CSS3 fade in and fade out animation effects (over 30). Setting the time for opening and closing submenus. Setting the direction of opening and the ability to open a submenu by clicking or hovering.
Adding modules to the menu (figure below) (with setting the display style of the module).

Pinned menu. The ability to pin the horizontal mega menu for Joomla to the top of the page when scrolling.
The ability to add a logo to the docked menu, align it and adjust the indentation.
Convenient color settings for menu items from the Joomla administrative part without the need to edit CSS files.
Two pre-configured horizontal menu skins.
This Joomla menu module is responsive. Full support for working with menus using touch (touchscreen) and mobile devices iPhone, iPad, Android, Windows Phone.

Possibility to choose one of several types of mobile menu with settings of each type. For example, position, theme (light and dark), alignment, logo, the presence of an "off canvas" menu (pull-down menu).
Ability to customize the colors of mobile menu elements from the Joomla admin area without the need to edit CSS files.
Ability to customize the state of the mobile submenu (collapsed, maximized, maximized all submenu items of the active menu)
Ability to insert a module into the "off canvas" menu.
Setting up the "off canvas" menu (list or accordion), adding a logo. The presence of 14 effects. The ability to insert a button to open the mobile menu in any part of the pages.
Full support for WCAG 2.0 (Section 508) menu navigation for people with disabilities.
Joomla 3.x and 2.5 support.
Plugin and module mega menu for Joomla translated into Russian.
Availability of Russian-language tooltips for module options.
Good documentation and technical support (in English).

Free version of DJ-MegaMenu

There is a free version of DJ-MegaMenu - DJ-MegaMenu Free Edition. But there are functional limitations of the free version:

There is no possibility to select colors of elements of mega menu and Joomla mobile menu.
There is no way to insert modules into menus and mobile menus.
There is no way to pin the Joomla horizontal menu to the top of the screen.
There is no possibility to set the delay interval before opening the submenu.
There is no way to place the mobile menu button anywhere on the template.
You cannot change the settings of each menu item for such options: column width, submenu type (tree or drop-down list), submenu expansion direction.

By and large, DJ-MegaMenu setting is similar to setting up any other menu:

Create a menu in the menu manager.
Create menu items in this menu.
Install DJ-MegaMenu.
In the settings of the DJ-MegaMenu module, specify the name of the created menu and publish the menu module in the desired position of the template.

All other settings and styling are subtleties. This article has a video tutorial on customizing a regular Joomla menu (you need to start watching the video from 24:13).

More "subtle" DJ-MegaMenu are located in three different places:

Joomla menu module settings (in the module manager). DJ-MegaMenu type.
Mobile menu button module settings (in the module manager). Type "DJ-MegaMenu - Mobile Menu Button".
Settings for each menu item in Joomla Menu Manager. In order for them to appear, you need to activate the plugin "System plugin DJ-MegaMenu" in the plugin manager.

Joomla menu module settings are divided into three tabs: Module, CSS3 animation and script options, Mobile menu settings... Almost all options are equipped with additional tooltips (in Russian) or are clear from the name. Only the most interesting, in my opinion, parameters will be considered. Also, options that are the same for all modules and menu items will not be affected.

On the first tab Module (picture below) You specify the name of the Joomla menu that you want to show. You can also configure the options for displaying icons and subtitles of menu items depending on which menu is displayed to the user. Plus, you can disable / enable the addition of Font Awesome. This is useful when you are using the menu item icons from Font Awesome (styleset). If this set is already loaded by a site template or other extension, you can disable it to prevent re-loading of the style and optimize the site load speed.

The tab basically contains settings for menu animation effects (figure below). Here you can also set the type of submenu (tree or drop-down list), the direction of opening the drop-down list of the sub-menu, the action at which the sub-menu will open (press, hover) and enable / disable improved menu compatibility for keyboard control (WCAG 2.0 (section 508) ). Note that some of these options, for example Column width in pixels, can be overridden for specific menu items in the settings of each of them in the menu manager.

The tab (figure below) contains options that allow you to configure mobile version menu. Moreover, choosing one of the 3 "types" of the mobile menu, you will have access to different settings.

Consider some setting menu items in the menu manager Joomla (picture below).

If you create a multi-column submenu, then to define a new column you need to activate the option Start new column (breakpoint) for the menu item where you want to start a new column. The nested items will be displayed in this column. Here you can also set the width of the new column in pixels (it will override the width specified in the module settings).

In these DJ-MegaMenu settings you can add a background image of the menu item, as well add module (create position). It's enough in the field Module position or Position of the mobile module (depending on which menu you want to add the module to) specify the name of the template position from which you want to display the modules in the menu. You can specify either an existing position or an arbitrary one. If you specified an arbitrary one, then in the settings of the module that you want to display in the menu, specify this position in the settings Position.

In the module settings, the mobile menu buttons (picture below) nothing special. You can choose which DJ-MegaMenu module should be activated by clicking on this button and you can set the CSS class suffix of the module to set the appearance of the button.

Russifier DJ-MegaMenu

As you can see, creating a horizontal mega menu for Joomla with the DJ-MegaMenu extension is quite simple. I would like to emphasize once again that it is very well adapted to mobile devices and can be flexibly configured even without editing the source code. If you use this extension on a site where a template is not from Joomla-Monster.com, then you may need to add additional CSS styles to harmoniously integrate this horizontal Joomla menu with the overall design of the site. And if a template from Joomla-Monster.com is used, then it is enough in the module settings, for options Topic(tab ) and Mobile menu theme (tab ) select option override from template.

Overview of menu modules for CMS Joomla 3.x.

1. Maxi Menu CK

CMS Joomla 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 to download the documentation for it and paid options: an extended package of graphic themes, a plug-in for easy menu management, patches for the components "Virtuemart", "Hikashop", "Joomshopping" and K2, as well as a plug-in for correct display the 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 a menu to publish, enter a unique module ID, a basic menu item and its start and end levels, and you can also turn off the sublevel option.

Alternatively, you can use the Menu Customization Wizard:

The convenience of using the menu wizard consists in quickly switching between the types of menus and the options they need, but it is relevant for the most part only in the case of additional paid extensions installed. On the "Binding to menu items" tab, you can select the site pages on which the module will be displayed; the "Effect Options" tab allows you to disable the use of javascript effects, select their loading type and configure visual effects for menu items and sub-items. In the "Styles Option" you can select a menu theme (three are available by default), menu orientation, disable responsive menu design and select a CSS template 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 a menu item in the template and changing the state to "Published", the menu appears on the site.

The extension working 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 with CMS Joomla 1.5-1.7 / 2.5 / 3. x.

Customizable menu module that supports horizontal and vertical orientation, two transition effects.

To install an 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 settings of the module, you can select the menu that will be displayed by 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. The system settings include the option to load the ExtJS library, select the method for loading it and generate a unique identifier. You can also customize the style parameters of menu items and sub-items: background color, text, font size, alignment, and more. The advanced module settings are pretty standard and include caching options, caching time, HTML module tag, Bootstrap size, HTML header tag, and CSS header class. After setting the position of the module and publishing the module on the site, a menu of the following form appears:

3. Accordeon Menu CK

The extension is fully compatible with CMS Joomla 2.5 / 3. x.

Another menu from the JoomlaCK studio. Allows you to insert beautiful effects when you open 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 the documentation for it, as well as a link to insert any module as one of the menu items.

Going to the module control panel, you can select the menu to display in the module, the base menu item, the start and end levels, and also set the suffixes and link alignment type for images. On the "Effects" tab, you can select the event at which the menu item opens, whether the link will be shown when you hover the mouse 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 folders with images that will be displayed when the menu is collapsed and when expanded, and also specify an alignment position for them. The "Menu styles" tab contains many customizable parameters for the appearance of the menu: margins, background, rounding of the corners of menu items, 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 the settings of compatibility with the "Hikashop" and "Virtuemart" components and requires downloading and installing the corresponding patches. Customizing 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, indicate its position and publish. Below is an example of how the module works on the site.

4. JB DropDown Menu for Bootstrap

The extension is fully compatible with CMS Joomla 2.5 / 3. x.

The menu module, working with Twitter's Bootstrap and JBootstrap, is based on the built-in Joomla menu module. The installation of the module 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 configurable option to show menu sub-items. As you assign this module its position and publish it, a menu of the following type will appear on the site:

5. DJ-Menu

The extension is fully compatible with CMS Joomla 2.5 / 3. x.

Mootools based dropdown menu with animated effects. The module is installed as standard. On the "Module" tab of the extension settings, you must select the menu that the module will display, as well as determine the last of its levels and, if required, enable the menu display on small screens and set its width in this case. The "CSS3 Animations and script features" tab allows you to set the animation effects on entering and exiting the menu, as well as the animation speed, set the delay time when the submenu is closed, the CSS class of the header, its HTML tag and the Bootstrap size.

Below is an example of a menu created using this module.

All modules considered in the review for creating a menu on a site running CMS Joomla 3.x allow you to create a menu with sublevels. The modules considered for the most part differ in the presence of certain animation effects and the ability to display on mobile devices. Therefore, for sites aimed at mobile users (and there are more and more of them), you should give 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 reviewed extensions and will look good when 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, in order to use it, financial investments are required.

From the author: I greet you dear readers. The menu is an element that no site on the Internet can do without, since this block greatly simplifies navigation and provides access to the main pages of the user part of the site. Moreover, if the site is complex enough and contains a huge number of pages, the number of menu links will also be large, which means that to save free space, the menu is created multi-level. Therefore, in this article, we will talk about how to create a joomla 3 dropdown menu.

In fact, the functionality of the multi-level menu is built into the basic version of Joomla, just like the multi-level categories of the material manager. But, as far as the display of the drop-down menu is concerned, there is a small problem, which is that in different templates the same multi-level menu will be displayed differently. For example, in the standard CMS Joomla template - Photostar, a multi-level drop-down menu will be displayed just fine, and using absolutely standard functionality.

At the same time, another standard Beez3 template, in general, in my opinion, does not display this menu correctly.

Moreover, child items appear only when the user clicks on the parent item. In addition, a drop-down menu in Joomla can be implemented using special extensions that, relying on the data of the menu manager, correctly display the links of the multi-level menu.

Therefore, first, let's define the structure of the links of the future menu, and then talk about its display on the screen. So, go to the menu manager and create a new menu.

On the next page, specify the title of the menu, its system name, a short description and click the "Save" button.

In this case, to create parental menu links, in the "Parent element" field, select the value "Root menu item". Once all the parent elements have been created, proceed to creating the child elements.

Please note that when creating a child link in the "Parent element" field, you must select the previously created parent menu item. Thus, the child elements will form the drop-down part of the menu, if, of course, this feature is supported by the template. After adding all the necessary links, in the menu manager we will get the following structure.

So, for CMS Joomla, the drop-down menu is almost ready, it remains only to create a module that will display it in the required position of the template. So, go to the "Menu Manager" and create a new menu module.

Modern trends and approaches in web development

Learn the fast growth algorithm from scratch in site building

When configuring a module, we indicate its title, select the display position in the template and the pages on which it will be available, and do not forget to select the displayed menu in the "Menu selection" field.

After saving the module, go to the user part for testing.

As you can see, for the Photostar template the menu is displayed perfectly, but how to make a drop-down menu in joomla 3, for another template you will ask. The answer is quite simple - use a third-party extension. And in this article we will look at a module called ARI Ext Menu.

By clicking on the "Download" button, we are redirected to the developer's site, where there is a link to download the module.

After downloading, install the extension in the standard way and go to the menu manager to activate it.

The module is quite functional and contains a huge number of different settings, which I will not dwell on now, especially since almost all of them are responsible for the appearance and require simple testing. The main thing is to specify the title, select the display position in the template, change the state to "Published" and in the "Menu name" field select the menu that will be displayed in the module.

Actually after saving we will see the following result.

That is, the module successfully completes its task.

Now you know how to make a drop-down menu in Joomla. If you want to learn more about the structure of modules at the code level, our new course will be useful to you.

This concludes this article! All the best and successful coding to you !!!

Modern trends and approaches in web development

Learn the fast growth algorithm from scratch in site building

The menu is a must-have for any Joomla site. Creating a site navigation is one of the first steps before publishing a web resource on the Internet. Without a menu, your project will not be respected by either visitors or search engines.

Lack of navigation is permissible only for one-page pages. If you have three or more sections, you must mark them in the menu.

In this article, we will analyze how the menu of various formats is created (multilevel, vertical, horizontal, etc.). In addition, we will analyze the features of item generation, and also you will learn what type of menu components are and what the class suffix is. In addition, you will be presented with a small selection of 4 extensions that will allow you to quickly create a menu.
https://www.youtube.com/watch?v\u003du19ebn-5W40

How to create a Joomla menu manually

Menu creation is a breeze for the Joomla engine. It is very easy to make your own navigation in this CMS-system, because it is designed mostly for beginners. You will only need to write down the name, as well as the type the menu being createdto appear on the site.

To start creating your menu, first go to your Joomla admin area. Better yet, think in advance of what your navigation will consist of up to the point. Also decide which type is more suitable for your purposes: tiered, vertical, or so on. After you think it over, go to the admin panel, and then open the "Menu" tab. Next, you need to get to the "Menu Manager" item and click the "Create Menu" button in the drop-down list. After that, the direct creation of the navigation will begin - you will need to specify the basic parameters for this. The main requirements are to register the title and type of the menu. Please note that the navigation type is a shorthand name for your convenience.
https://www.youtube.com/watch?v\u003d34CARMpcNHM
Now click on "Save and Close". This does not complete the creation of the menu, since it does not have a single item. To generate an item, you need to go to the management of the created navigation menu. In the opened tab you will see the "Menu Items" section. Go to this tab and create the navigation components for your Joomla site. You will need to specify the name of the item in the same way as with the menu. In addition, you will need to indicate the type of item. This time the type will matter, as it will affect the display of the item. Most often include the type "Materials".

But the creation of the menu will not end there either. You still need to make it a certain format (layered, horizontal or vertical). To do this, you must write the correct position and class suffix, which determines the placement style of this element. In order for you to specify the class suffix, you must use the correct template that Bootstrap uses. Not every class suffix below will be able to be activated on your site, however, here is a list of the most popular menu styles:

nav nav-pills is a class suffix for a horizontal menu that creates the default pills for navigation.
nav nav-tabs is a class suffix for the horizontal menu that creates a tabbed navigation.
nav nav-pills nav-stacked - similar to the first class suffix, only for vertical navigation.
nav nav-tabs nav-stacked - "tabbed" vertical menu.
nav nav-list - class suffix for expanded list vertical menus.

Ari Ext Menu Module

Ari Ext Menu is a module that will create a vertical or horizontal menu in Joomla with animation effect. The Ari Ext extension is installed in the standard way. To set the animation effect, in the Ari Ext settings, change the Transittion type line to add a "fade" or "slide". The module can be customized to your liking by editing the CSS file. Ari Ext allows you to create multi-level menus. The only drawback of Ari Ext is the lack of a Russian-language version, so you will have to figure out the extension settings yourself. Otherwise, Ari Ext is doing great!

SJ Flat module for Joomla

SJ Flat is a simple and convenient module that will allow you to create beautiful and functional menus. The main orientation of SJ Flat is a layered menu. The SJ Flat module allows you to create as many subcategories as you like for various menu items in Joomla. In addition, SJ Flat works great with pop-up menus for both vertical and horizontal layouts. Another advantage of SJ is its automatic adaptation to mobile devices. The horizontal menu will switch to vertical when the site is turned on through mobile device with low resolution. And the most important advantage of SJ Flat is that the module can be downloaded for free!

Vertical Menu Module

The name of the Vertical Menu module speaks for itself - this extension is needed to create a vertical navigation menu. The main feature of the Vertical Menu module, apart from easy installation and easy customization, is SEO friendly code. This extension is optimized so that the menu will help you to promote your site. You can choose different design options in the Vertical module from the type of font to the color scheme of the displayed menu.
https://www.youtube.com/watch?v\u003dfrwWrSzeO5s

Mega menu module

Mega Menu is a real hit among other navigation menu modules. You can create a menu of any format using this extension. The Mega Menu module allows you to add not only text information to items, but also pictures, videos, animations and other files. With Mega, you can customize each menu item individually so that navigation has a smooth and thoughtful design. Mega works with both horizontal and vertical menus. Mega works best with the 3rd version of Joomla. The Mega module works in English.

If you notice an error, select a piece of text and press Ctrl + Enter