From the author: Greetings dear friend. In this article we will talk about how a vertical menu is created 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 wouldn’t hurt to consider a couple additional extensions, thanks to which it is very easy to create this navigation block.

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

Traditionally, on the description page of the current extension, click on the “Download” button to go to the official website of the developer.

At the time of writing this article, 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 you need to create it before publishing the module. Next, go to the module manager.

And just go to the settings page installed module.

In the “Select menu” parameter, select the menu whose items will be displayed as module content. 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 sub-items will be displayed on the screen. Also, using the “Start level” and “End Level” parameters, you can determine the initial and final nesting level of links, that is, those levels that will be displayed on the screen. And finally, we select a position for displaying the module on the screen, indicate on which pages it will be available and determine the “Published” status.

Now let's move on to the user part 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 on the “Responsive Options” tab of the current module’s settings page. 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, click on the “Download” button to go to the official website of the developer.

Modern trends and approaches in web development

Learn the algorithm for rapid growth from scratch in website building

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

Parameters available for configuration:

Enable/Disable jQuery – connect your own jQuery library;

Width of module(%) – module width in percentage;

Margin – external margins;

Select Menu – select the menu displayed by the module;

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

Title directory – title of the top-level item;

Start Level – initial level for displaying a multi-level menu;

End Level – the final level of display of a multi-level 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, a menu module is a fairly simple module that, by and large, can be created independently, but for this you need to know the Joomla CMS API. Therefore, if you want to learn how to create your own extensions that will fully solve the assigned tasks, our Joomla-Professional course will be useful to you. Creating extensions for Joomla.

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

Modern trends and approaches in web development

Learn the algorithm for rapid growth from scratch in website building

For a site of any level it has great importance how well his style is put together, how everything is “glued” together. But the next minute, the design fades into another plane, since what becomes much more important is how conveniently the resource interface is organized, how the materials are distributed, how likely it is that you can get to any section using the menu. And then the project owner himself must think about whether what the template developer offers is really so convenient, is it correct and comfortable to work with searching for materials, is there a division of the same articles into categories? If this aspect is not initially brought to the ideal, you can lose those visitors who could really bring you profit, but simply did not want to deal with an unprofessional resource, because otherwise, the organization of site navigation would be at a completely different level. But one should not think that only those provided in Joomla template menu tools become the limit with which you have to work. To improve the structure and navigation of your project, you can easily use extensions, for example Joomla module menu, capable of making very significant changes in this segment.

Specific suggestions for improving the menu

What can extensions that are in this category offer us? First of all, it is a varied menu. The most interesting thing is that the developers care not only about the convenient setup and operation of these solutions, but also about how they look. For this purpose, animation is used, selections of colors and various fonts for the menu are provided, and sets of icons are also prepared for them. Even better, here you will find options that support a different number of levels, and this already opens the way to the creation of serious navigation systems, thanks to which you can Joomla menu item, get into any section of the site, or even some category. Options using images that symbolize each menu item look even more interesting; such additions are already in our list. Choose Joomla dropdown menu, special mega-menus with enormous capabilities, as well as accordion-menu Joomla 3, simulating the folding of a regular accordion to place content. But in addition to such proposals, this category has many more interesting developments.

Creating categories and more

It goes without saying that using various thematic areas, it is necessary to provide visitors with direct access to the necessary materials, and it is advisable to make each category corresponding to its content. If the format in which your standard interface displays categories you don't like, you can use the appropriate extensions. To do this, you will find solutions that display categories in a form similar to a drop-down menu, those that are specifically installed for cooperation with K2, or simply organize convenient access to collections of content corresponding to a specific topic. As a result, even you will be more comfortable working with your project, initially distributing new receipts into “shelves”, because both searching and adjusting such materials becomes more convenient.

Make moving around the site really convenient

When a project is equipped with a convenient menu, when categories are clearly distributed on the page, and even without using a search you can find interesting material for yourself - you want to work with such a resource. In addition, as mentioned above, all current developments are also aimed at attracting attention with their performance style, because without this it is also impossible. So if you are not satisfied with the standard design of the main navigation elements on the site, use extensions from this category to make Joomla menu perfect for you.

Creating a menu in joomla is one of the most important navigation elements on your website. The menu makes it easier to find the necessary material on the pages and allows you to quickly move between sections and categories.

Creating a Menu in Joomla

In the admin panel at the top, click Menu Menu Manager, by default you have the Main Menu available, which is also the main menu, this item has a drop-down item - Create a menu item, select Main Menu.

I will demonstrate three ways to make a menu in Joomla.

Method one - category blog

Let's create the first menu item - Cars, in the menu item type select Category Blog, category selection - Cars, target window - Parent, this means that the opening will occur in the same tab, leave the menu - Main Menu as is, parent element - Root menu item , since it is the first element, it will always be on the page. Status - published so that the menu item is displayed on the site.

Let's repeat all the steps as with Cars for Motorcycles and Bicycles, and we have created menu items for all categories.

in the list of modules, click on the name of the module Main Menu to make changes,

namely: the position of the Menu module, show menu sub-items - yes,

Let's go to our website and see that the created menu appears at the top of our template.

Since we created a menu type - a category blog, when you click on a menu item on the page, all articles from the corresponding category will be displayed: motorcycles,

bicycles

And cars.

Method two - separate material

Let's change the menu item Motorcycles, change the name to Java, clear the alias "mototsikly" otherwise it may lead to an error,

Set the menu item type to material, and select Java for the material itself.

Let's do the same procedure for the remaining menu items,

let's go to the site and see

Method three - drop-down menu

Let's create a menu item Motorcycles again, menu type - system links - title,

clear the alias (alias) of the menu item,

Save. Let's open the Java material and in the drop-down block, select the parent element -Motorcycles.

Now the Java menu item is a child of the parent item Motorcycles.

Let's do the same with Harley, specifying Motorcycles as the parent item, and attach corresponding articles to the Bicycles and Cars items in the same way.

Let's go to the site and see

that our menu has become similar to the menu from the first method, but if you hover the cursor over the menu name,

Then drop-down child items leading to articles will become visible.

Specifically in this template, the menu expands when you hover over the menu title,

But you can also click on this name to open other hidden items. Well, clicking on the child menu items will open the material on the site as in all previous methods.

Which of these basic methods of creating a menu in joomla you want to use is up to you. I would like to note that in one menu you can use all the methods at once, although this is usually not done. The first method is convenient when there are a lot of materials in a category and a visitor to your site will go straight to the section with the materials of interest. The second method can be modified by making a link to the material, the text of which will contain links to materials from one section, the third method makes it possible to quickly view the list of articles in the section in the menu, in my opinion this is best option. But you can also make a link in the menu to a site map, a registration form, add a link to an external resource... and much more, but we’ll talk about other options another time.

This video shows in detail how to make a menu in Joomla:

We recommend watching the video at full screen mode, select quality in tinctures 1080 HD, Do not forget subscribe to YouTube channel, there you will find a lot of interesting videos that come out quite often. Enjoy watching!

A menu is an essential component of any Joomla website. Creating 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.

The lack of navigation is only acceptable for single-page websites. If you have three or more sections, you must indicate them in the menu.

In this article we will look at how to create a menu. various formats(multi-level, vertical, horizontal, etc.). In addition, we will analyze the features of item generation, and you will also find out what type of menu components there are and what a class suffix is. In addition, you will be presented with a small selection of 4 extensions that will provide quick creation menu.
https://www.youtube.com/watch?v=u19ebn-5W40

How to create a Joomla menu manually

Creating a menu is a piece of cake for the Joomla engine. It is very easy to create your own navigation in this CMS system, because it is designed mainly for beginners. You will only need to enter the name, as well as the type of menu being created, so that it appears on the site.

To start creating a menu, first go to the Joomla admin area. Better yet, think in advance about what your navigation will consist of up to the point. Also decide which type is more suitable for your purposes: multi-level, vertical, etc. Once you have thought everything through, 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 this, the actual creation of navigation will begin - you will need to specify the basic parameters for this. The main requirements are to specify the title and type of menu. Please note that navigation type is a symbol for your convenience.
https://www.youtube.com/watch?v=34CARMpcNHM
Now click on “Save and Close”. The creation of the menu will not be completed here, since it does not have a single item. To generate an item, you need to go to manage the created navigation menu. In the tab that opens, you will see the “Menu Items” section. Go to this tab and create components for Joomla site navigation. You will need to indicate the name of the item in the same way as with the menu. In addition, you will need to specify the item type. This time the type will matter as it will affect the display of the item. Most often they include the “Materials” type.

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

1. nav nav-pills - class suffix for horizontal menu, which creates a standard “pills” design for navigation.
2. nav nav-tabs is a class suffix for a horizontal menu that creates a “tab” navigation design.
3. nav nav-pills nav-stacked - similar to the first class suffix, only for vertical navigation.
4. nav nav-tabs nav-stacked - “tab” vertical menu.
5. nav nav-list - class suffix for a vertical menu expanded by a list.

Ari Ext Menu module

Ari Ext Menu is a module that will create a vertical or horizontal menu in Joomla with an 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 “disappearance” or “slide”. The module can be customized at your discretion by editing the CSS file. Ari Ext allows you to create multi-level menu. The only negative of Ari Ext is the lack Russian version, so you will have to figure out the extension settings yourself. Otherwise, Ari Ext does a great job!

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 multi-level menu. The SJ Flat module will allow you to create as many subcategories as you like for various menu items in Joomla. Additionally, SJ Flat works great with popup menus for both vertical and horizontal layouts. Another advantage of SJ is its automatic adaptation to mobile devices. The horizontal menu will turn into a vertical one when you turn on the site 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 necessary to create a vertical navigation menu. The main feature of the Vertical Menu module, in addition to simple installation and easy setup, is SEO friendly code. This extension is optimized so that the menu will help you promote your site. You can choose various design options in the Vertical module, from the font type to the color scheme of the displayed menu.
https://www.youtube.com/watch?v=frwWrSzeO5s

Mega menu module

Mega Menu is a real hit among other navigation menu modules. You can create a menu of any format using of this extension. The Mega Menu module allows you to enter not only text information into items, but also pictures, videos, animations and other files. With Mega, you can customize each menu item individually to ensure smooth, well-designed navigation. Mega works with both horizontal and vertical menus. Mega works best with version 3 of Joomla. The Mega module operates in English.

Creating a menu in Joomla 3

In this lesson we will look at the process of creating a menu on your website running CMS Joomla 3. On sites running Joomla, you can create any type of menu. We will look at 3 main types of menus 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 website you can see a regular menu, both on the right side and on the left.

Creating such a menu is quite simple. First you need to decide on the position where this menu item will be located. To view the positions of your site, you need to add the value “? tp =1" and go to 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 positions are not displayed, then most likely you have disabled their display. To enable them, go to section SYSTEM – GENERAL SETTINGS – TEMPLATE MANAGER.

And in the section VIEWING MODULE POSITIONS set the value to ENABLED.

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 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 this point by point.

1) First, go to the section MENU – MENU MANAGER

2) Here we are interested in the point

3) After this you will be taken to the menu options section.

You need to fill in the following fields:

Heading– the name of your menu. You can specify " Left menu"or ask him specific name"Articles about fishing"

Menu Type– a required field that is absolutely not needed. You can write anything here. Typically 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 created a menu, giving it the name "123". It is now located in the section MENU – MENU MANAGER.

5) Click on the “Add module for” button of this type menu"

Here you need to indicate:

Menu title – indicate the name of your menu.

Show title – set SHOW if you want the title to be displayed on the site.

State – set PUBLISHED

In the POSITION section you must indicate the position where the created menu will be located

For example, the site uses a template - Lightbreeze-blue, which means 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, you need to select the created menu in the MENU section and select the section in the drop-down window.

After this we are taken to the menu item creation page.

Here specify the menu title 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 separate material. To do this, select the value MATERIALS – MATERIAL.

As a result, you should get the following

As you can see, creating a menu on Joomla is quite simple and does not require much time.

Creating a top menu in Joomla 3

For many novice users CMS Joomla 3 having problems creating a top or horizontal menu on your website. Although there is nothing complicated about it. Let's look at the process of creating such a menu using an example. This process is not much different from creating a regular menu on Joomla.

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 indicate the location of our menu at the top of the site. To do this, we review the available positions again by entering search bar requestsite. ru/? tp=1 (where site. ru – the name of your site).

As you can see, at the top of our site there are only 2 positions - Position 2 and Position 1.

Now let's go to the section MENU – MENU MANAGER and press the button

Just like for a regular menu, we write a title. And in the position section, Select position 1 or 2.

Well, now, after you create the menu items, your top menu will take the same form as on our website.

Creating a drop-down menu on 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 a 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 link 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 “Material group”. As a result, you should get something as shown in the figure below.

After that, go to the settings of the main menu “Material group” and in the section set the value to YES.

As a result, we will get a rather convenient drop-down menu.

Conclusion

In this lesson we examined the main issues related to creating a menu in Joomla 3 . If you have any questions, you can ask them by leaving comments on this article!