Good menu for Joomla 3. How to make a menu in Joomla, three ways to create a menu in Joomla

Rating on jed: In general - 28, functionality - 50, support - 23, documentation - 28.

BM Cool Menu. - one of my favorite free and secure modules for CMS Joomla 3 . I like his simplicity and conciseness, adaptability (which is infrequently visiting the free versions) and the possibility of light donoye manually. In its pure form, this extension did not quite suit me, but with some adjustment of the CSS file there were no problems left. I think that the low estimates of the module in the Joomla JED catalog are explained by the need for its manual donoyake. It is not as difficult as it seems. Moreover, your own CSS file settings I saved for myself and you in a separate file.

This module is ideal for someone who needs a simple adaptive horizontal and fully free menu on its website with Joomla 3. I will say right away that he supports multi-level menusBut personally I have certain problems with this. While I did not understand with them, because I found other options; But I believe that the case in the conflict of jQuery libraries - if desired, it is more than solved. (I'll tell you how I decided. It's not jQuery at all). For a single-level menu module more than optimal. I use it on most of my sites.

Demo module BM Cool Menu

The actual demo of this module is presented in the header of this site. It is also duplicated in a footer. How this menu works with a multi-level structure can be viewed here.

Settings of the free adaptive menu module BM Cool Menu

Settings for this free and secure module to create an adaptive menu (equally well displayed both on computers and on mobile devices) Joomla 3 includes the following items:

  • Show Sub-Menu Items - Show subparagraphs or not.
  • Text Color - text color.
  • Hover Text Color - Text color when hovering the mouse cursor.
  • Menu "s background - Menu background color.
  • Background Image. - picture as background (CSS settings)
  • Show Border. - Show the frame or not.
  • Border Radius. - Radius of rounding corners in the frame.
  • Border Color - Color frame.
  • Active Background. - color of the active menu item.
  • Load jQuery. - Connect or not the jQuery library.

That's actually all settings. Quite simple and concise. Personally, I have free modules Like more than cumbersome and slow expansions with a large number of options that I will never use in my life.

Manual Donetroke Style BM Coll Menu

Now I will say a few words about the manual donoyake module to create an adaptive menu on Joomla 3 BM Cool Menu. The problem I had when I decided to completely remove the rounder of the corners (Border Radius) and the frame (Border Color). After making the appropriate changes in the module settings in the admin on the computer in the deployment mode (in the entire page), the menu perfectly reflect all these changes, but on mobile devices and in the twisted window and frame, and the rounding was preserved. In addition, the module in the compressed form was invariably rising upstairs and covered the part of another module that is higher. I wanted to configure the display of the menu so that all his items aligned in the center. The fact is that, for example, on the computer 4: 3 screen, everything hovered quite likely and decently, but at 16: 9 menu pressed left and looked somehow wrong. Well, plus to all, I went around to remove the light strip, separating between the menu items.

The solution was found in changing or commenting on some rows in the CSS file of the module, which lies along the way: /Modules/mod_bm_cool_menu/assets/css/style.css. Old file I just in case saved in untouched by name old-style.css. And in the new there is some changes.

Align the menu in the center

In class .Bm-Cool-Menu Li I replaced float: Left; on the iNLINE: BLOCK; (line 29) and did the same in the class 37 row .bm-cool-menu a. Also added to a string of 10 class .bm-cool-menu: tEXT-ALIGN: CENTER;

I clean the white separation line between the menu items

To do this, I fully comment on the line 30. For those who forgot or never knew how this is done: / * Border Right: Solid Thin #FCFCFC; * /

Additional setting of menu display on mobile

To the menus do not cover the module (or logo), which is higher in the class .bm-cool-menu-trigger (Row 167 and below) I added an indent to the top: margin-top: 10px;

In order for the menu frame and rounding the corners not displayed in mobile versionI commented on line 173, as well as from 175 to 180.

I modified by me style.css i laid out inside the archive with the module direct link. It is called myStyle.css.. In case of reluctance to mess with a change in styles manually, you can use it by simply renaming style.css..

Separately, it is emphasized that the changes made by me relate only to the one-level menu. However, to make appropriate changes are easy for a multi-level design.

I change the title menu in the mobile version

Well, there is one very small, but essential item. Change word Menu.Latin written when viewing pages in the mobile version or when folding the page in the browser into a small window. It would be possible to assume that the changes should be made to the language file - but no. It turns out you need to put your header menu in the file along the way: /Modules/mod_bm_cool_umenu/tmpl/default.php. (line 14).

That's all. The main thing seems to I told. I admit honestly, that I went to this module, I accidentally and, looking at his estimates, at first it was pretty skeptical to him. However, having tried other options and realizing that free and secure adaptive menu in the official catalog is very and very small, I returned to this and began to put it up. Now I use it on most of my sites.

Solving a problem with non-working BM Cool Menu

The problem that I mean is the following: on some sites I have BM Cool Menu did not disclose subparagraphs in any guide, nor when clicking. I thought for a long time that there was a certain conflict of scripts. When there was a time to finally deal with this, I saw that even in absolutely clean, only the installed Joomla site 3 did not open up. It happened to me and it became clear that the case was not at all in some conflicts. Experienced way and at the cost of a huge number of nerve cells, I still managed to establish that the problem with wheying and displaying the multi-level menu BM Cool Menu It is manifested only in position Position-1 standard Jumlovsky Protostar template. Rearing this module to any friend position (for example, Banner), miracles occur - and it begins to work.

If you certainly need to arrange the menu in Position-1, you will have to be slightly correcting the Protostar template index file (index.php at the root of the template - / templates / protostar / index.php). The fact is that by default, the output of this position is wrapped in the NAV container with the native class of the Joomla 3 Navigator menu. Removing this "wrapper" and replacing Style with "None" to "XHTML", we get a position 1 in which the BM Cool Menu module will start working as it should.

So, we find this fragment:

nAV Class \u003d "Navigation" Role \u003d "Navigation"\u003e

We delete 1 and 3 string, as well as replace in the second line "None" to "XHTML". That's the whole decision.

Links BT Content Slider - Module News Tape In the form of a slider

Official demo module BM Cool Menu

BM Cool Menu module page in the official Joomla extension directory

Official website of the module BM Cool Menu

Download the BM Cool Menu module for a direct link

For this CMS available a large number of Free extensions. Today I prepared for you the best extensions Joomla menu.

Some extensions may not be supported by certain versions of the platform. Therefore, before installing the extension, you need to determine which version of Joomla you use.

Maxi Menu CK.

This is a drop-down adaptive mega-menu with several columns. You can also load the modules inside it. iPhone, iPad, Android compatible. AdSManager compatible with Joomshopping, Virtuemart, Hikashop:

SJ Flat Menu.

This is a simple, but powerful module for improving usability and site navigation! It allows you to display a multi-level menu. With it, you can display drop-down, accordion menu, horizontal or vertical menu with elements dropping into the right or left side. The menu created using this menu module for Joomla 3 will help site visitors to find the desired content without spending a lot of time:

Download / Additional Information

JF Mobile Menu Module

Demo version Download / Additional Information

Responsive Menu Module for Joomla

Allows you to create stunning colorful adaptive menu. This module was tested in all major browsers and mobile devices. Therefore, your site will look professionally for everyone who visits him.

This module includes many functions, such as selecting custom colors for the background menu and links, 20 different font styles to choose from, rounded or straight angles, etc. Want to create a unique stylized menu with extreme color combinations? The Grue module is what you are looking for:

Demo version Download / Additional Information

FREE ACCORDION MENU JOOMLA

Animation in the menu module for Joomla 3 is created using the jQuery library. The module includes ready-made skins, and I decided to make them 100% customizable. Users can edit the menu colors and change the font style:

Demo version Download / Additional Information

Sticky Horizontal Bar Module Joomla

Demo version Download / Additional Information

DJ-Menu.

This is a menu with animated Mootools effects for Joomla 2.5 and 3.0. Now you can easily manage the menu regardless of whether it is animated or the CSS styles are simply asked for it, without scripts. Dj-Menu is also adaptive. The module allows you to use the drop-down menu and on small screens in adaptive templates:

Demo version Download / Additional Information

jQuery Slide-Down-Box Menu for Joomla 2.5 & 3.x

Demo version Download / Additional Information

Roknavmenu.

Provides the ability to configure the elements of the Joomla 3 drop-down menu using various parameters. From icons before displaying custom modules - users get more control over the menu:

Download / Additional Information

jQuery Fly-Out Menu for Joomla 2.5

An easy-to-use module for creating a menu that comes with seven different color styles. It uses the jQuery library for the smooth menu disclosure effect. It is easy to configure and supports multi-level menus (up to 5 levels):

Demo version Download / Additional Information

Menu Ari Ext

The module supports the vertical and horizontal menu Joomla 3, two transition effect. It applies free of charge under the GPL license.

Create a menu in Jumla 3

In this lesson, we consider the process of creating a menu on your site runningCMS Joomla 3. On the sites running Jumla, you can create a menu of any kind. We will look at 3 main menu types for your site.

- Joomla 3.

- Joomla 3.

- Drop-down menu B. Joomla 3.

Creating a regular menu inJoomla 3.

Under the usual menu, we mean the standard menu that is located in the right or left part of your site and contains several elements. For example, on our site you can see the usual menu, both in its right part and in the left.

It creates such a menu is quite simple. First you need to determine the position on which this menu item will be located. To view the positions of your site, you need to add the value to its address "?tP. \u003d 1 "and go to the specified address. For example,site. RU /? TP.\u003d 1. As a result, all positions that are available in the template installed on your site will have to be displayed.

If the positions are not displayed, then most likely you are turned off. To enable them, go to the section System - General Settings - Template Manager.

And in the section View positions modules Set the value - enabled.

The figure shows that to create a conventional vertical menu, you can use positions 7, 4 and 5. In various templates of the number and position names may differ from those shown in the figure.

For example, we want to create a menu and arrange it in position 5. Now let's figure it stands how to do it.

1) To begin with, go to the section Menu - Menu Manager

2) here we are interested in point


3) After that you will be taken to the menu parameters section.


You need to fill out the following fields:

Title - The name of your menu. You can specify " Left menu"Or ask him specific title "Articles about fishing"

Menu Type - Mandatory field that is absolutely not needed. Here you can write anything. Usually copied text from the title section.

Description - You can write a few phrases about your menu. The field is optional and you can not fill it out.

4) Now you need to specify the position where this menu will be located. We have created a menu by appropriating the name "123". Now it is located in the section Menu - Menu Manager.


5) Click on the "Add Module for this type menu"


Here you need to specify:

Menu header - Specify the name of your menu.

Show title - Install Show if you want the title to be displayed on the site.

condition - Install Published

In the Position section, you must specify the position where the created menu will be located.


For example, a template is used on the site - Lightbreeze-Blue means, choose it and indicate the position where this menu will be located!

But the menu will not be displayed on the site, as long as you create at least 1 point. To create a menu item, you must select the Menu Created Menu and select the Select section in the drop-down window.

After that, we get to the menu item creation page.


Here, specify the menu header and choose


Jumla offers its users a wide variety of modules for the menu. All these modules will be described in a separate lesson. We will try to create a menu item that will withdraw a separate material. To do this, choose the value Materials - Material.


As a result, you should have the following



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

Creating an upper menu in Jumla 3

Many novice usersCMS Joomla 3 There are problems with creating an upper or horizontal menu on your website. Although there is nothing complicated. Let's consider the process of creating such a menu. This process Not much different from creating a regular menu on Jumle.

1) go to the site section Menu - Menu Manager

2) Click Create Menu and create a new menu by calling its 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 view the available positions by entering into local line inquirysite. RU /? TP.\u003d 1 (wheresite. Ru - 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 go to the section Menu - Menu Manager and click on the button

As well as for the usual menu, we prescribe a title. And in the section section, select position 1 or 2.

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


Creating a drop-down menu onJoomla 3.

Well, I would also like to talk about creating a drop-down menu onJoomla 3. This is done quite simple. First you need to create menu itself and menu items that will fall out.

To do this, create a basic menu that call "Material group" And two subparagraphs of this menu "Subparagraph 1" and "subparagraph 2". In order to link the menu subparagraphs to the main, when creating subparagraphs in the parent field, specify the main menu item, in our case it is a "materials group". As a result, you should work out as shown in the figure below.


After that, we go to the settings of the main menu "Group of Materials" and in the section Set the value Yes.


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


Conclusion

In this lesson, we reviewed the main issues relating to menu creation on Joomla 3 . If you have any questions, you can ask them, leaving comments on this article!

We continue to get acquainted with Joomla administration 3. In this article will get acquainted in detail with the opportunity system menu Joomla. Perhaps there is no need to say what the site menu is. Enough, to say that on the Joomla website menu can be placed vertically in the right and / or place horizontally in the area of \u200b\u200bthe site cap.

Of the general information about the Joomla menu, it is worth mentioning that the materials of the category that are not attached to the site menu will not be visible on the site.

Menu and menu items Joomla 3

Joomla Site Menu creates a site administrator or site users with authorizing rights to manage the site menu. Rights to menu management are set on the Components tab → Menu Manager → Rights.

The Joomla menu itself is not an informative, but a system unit of the site. A menu is created for the subsequent creation of informative menu items.

Note: On the Joomla website you can create any number of menus and any number of menu items from any nesting depth. Menu's nesting is a tree type: menu items-subparagraphs menu items subparagraphs of menu items, etc.

How to create a joomla site menus

To create a menu of the site, open the tab: Menu → Menu Manager → Create a menu from a horizontal bar or structure → Menu Manager → Create a menu of the vertical menu of the administrative part of the site.

We give a name, be sure to fit the menu system name (menu type). A menu type can be any Latin word, clearly indicating the assignment of the menu. For example, Mainmenu, Homemenu, Topmenu, Footermenu.

How to create items (sub-clause menu)

Creating menu items, is made on the: Menu → Menu name → Create a menu item.

Types of menu items

As I mentioned, the menu items Joomla 3 are informative units of the site. Using the menu items, you can open on the site page with different information. This information may be different and depending on the type of information, are created. different types menu. Let's look at the Types of the menu item:

Type of menu item

1. Contacts (4 types);

2. News tapes (3 types);

3. Materials (7 types), namely

  • Archival materials;
  • Selected materials;
  • Material;
  • Blog Categories;
  • Create material;
  • List of all categories of the site;
  • List of material one category.

4. Approachable settings;

5. Member of users (7 types);

6.meters (3 types);

7. Wrapper;

9.System (4 types);

10.tentive search.

As you can see, a lot of menu items and with their help can be organized very good navigation on the site.

Enough the theory, let's go to practice and create a menu with two, three menu items.

Joomla site menu creation example

Create a menu called "Menu1". The system name will be "MENU-1".

Go to the tab: Menu → Create a menu.

On the menu creation page, specify its "Menu1" name and the system name "MENU-1".

Click the "Create" button.

Everything! The menu is created.

What does the system name of the menu mean

I'll show you for what you need the system name of the menu. We go to the PHPMYAdmin controlling the database of the site.

  • We are looking for a table: prefix_Menu_Types.
  • Open it (click on the title), which meets the SQL Squad:
  • Select * from `prefix_Menu_Types`
  • And we see the system name of the created menu (menu type).

Output: The menu system name is needed to create unique values \u200b\u200bin the menu_types table fields of the Joomla database.

So, we have created the Joomla menu, it's time to create menu items.

Create Joomla menu items

On the menu tab → Menu items → Create a menu, create a menu item.

class \u003d "Eliadunit"\u003e

Let the name menu item.

Select the type of menu item. Let it be a menu type: Blog Categories.

Indicate the target window: a new window with navigation elements.

On the right, specify the name of our menu and the parent element of this menu item (2,3).

On other tabs, exhibit other settings for the menu item:

Blog layout parameters (3) - Blog template. You can specify the number of columns.

Display (4) - a single-material display template;

Integration settings (5) - turn on the creation of RSS ribbons for this menu item.

Page Settings (7). Here you can ask an alternative title, which will be visible in the browser. You can also enable the "page title". It will be visible at the beginning of all pages of this menu item in tags.

What matches all the pages of the blog category.

Metadata (8). You need to fill the metadata for this blog, namely Descriptions Keywords. Description Molden to be unique and long no more than 165 characters. Keywords is not required.

After checking all the menu item settings, click "Create" or "Create Close".

Everything! The menu item is created. It remains to place the menu on the site.

How to place a menu on Joomla

Place two menus on the site. Horizontal drop-down and vertical with the display of the entire menu tree.

How to place a drop-down horizontal menu Joomla

The Joomla drop-down horizontal menu is placed in a special template module called "Menu". Additional fields can be created in the template to place a menu, such as FooterMenu, TopMenu.

To create a menu module, go to the tab: Module Manager → Create a menu. Select the type of menu module.

Settings Module Menu

On the "Bind to the menu items" tab, specify which pages site to show this module from the menu.

The menu format is important. There is a difference between the way you have a horizontal menu or vertical.

So, for mobile browsers it is better to use an adaptive vertical menu. But on computers much more naturally looks horizontal navigation menu - It looks most importantly vertical.

In this article we will analyze how to make exactly that, "most importantly", menu using the standard Joomla options, as well as with the help of a selection of better extensions.

How to make a horizontal format menu in joomla

The horizontal menu is not an animated, not multi-level, not dropping out the menu, therefore it is easier to make it simple. You only need to slightly change the current settings of the menu item in the admin. Here step-by-step instruction how to do it:

  1. Go to the administrative panel, log in.
  2. Next, go to "Extension Manager" and choose "Modules" item.
  3. To see the installed modules, open "Website Modules". Your menu element extensions will appear there.
  4. Click "Change".
  5. Go to the "Details" tab and specify the position in the template - that is, where the module will be placed.
  6. And in the "Parameters" tab, set the "Horizontal Menu" style.
  7. We save innovations.

Now your menu will appear on the site and will have a horizontal format. Do not forget to add items to the joomla admin in the administrator, otherwise it will remain empty.
https://www.youtube.com/watch?v\u003dvhmpqnwfaeu&spfreload\u003d10

The DJ-Menu module will allow you to "mix" in navigation simultaneously and drop down, and horizontal, and animated menus. This is a convenient, powerful and modern module for Joomla to create a high-quality menu. The expansion of both paid and free of charge is distributed. In the paid version there is additional features: more effects, smart level management, etc. But the possibilities free version DJ-Menu extensions:

  • you can edit CSS to change the display style;
  • animation effects can be turned on or off;
  • you can register in the CSS ID of your div template so that the module is attached to the specified style;
  • you can create both horizontal and vertical menu.

jQuery Slide-Down-Box Menu

This module is suitable for Joomla 2.5 and 3.5. The essence of the extension work in using jQuery libraries, due to which the animated effect of the module is ensured. This extension is ideal for sites where the animation is lacking critically. Note that the module has a special setting. Here is the instruction:

  1. Download the module and install in Joomla through the Extension Manager tab.
  2. Activate or deactivate the jQuery library. Note that if you already have a module or plugin that uses this library, then the function must be deactivated.
  3. Determine the width of the module. The default parameter 960 pixels is set.
  4. Specify the number of menu items for the first level. If you use the standard menu width, it is better to specify up to 7 points.
  5. Publish the created horizontal menu in an affordable position in the Joomla template.

Otherwise, you yourself can figure out. Adding items is carried out in a standard way. You can choose for icon points or integer images. Note that the module supports up to 2 levels of sub-paragraphs.

At least this module comes complete with the joomla template from RocketTheme, but it can be used as an independent expansion. The module will allow you to make a powerful, animated, smooth and adaptive horizontal menu for a very short time. The huge advantage of Roknavmenu is even a child configure. Two accounts you can create a stunning menu from icons, pictures and entire galleries. And, most importantly, Roknavmenu can be downloaded for free and use the expansion without any restrictions!

Sticky Horizontal Bar Module Joomla

According to some marketers, this plugin It is capable of increasing the conversion of your site by 30%. Under the word "conversion" implies a decrease in the number of failures, that is, people will close to your menu and do from two transitions on the site. Sticky Horizontal Bar Module Joomla will allow you to do beautiful menuwhich will be sorry for not clicking.

Installing the extension is no different from the typical, because load the module through the "Extensions Manager" in the admin. Good feature The module is the ability to completely change the design without affecting CSS. You can edit color, font, sizes, display type and a lot of domety directly in the settings. The only minus of the module is the need to create a separate position in the template, since not in all places the extension will work correctly.

Initially, the Candy module allowed to make an exclusively vertical menu. But on the short requiring users, the developer still decided to release a new horizontal version of the module. Great advantage new version Candy is an independent work even with JavaScript disabled in the browser. You can create a menu with different effects that will be normally displayed in any browser. Candy Horizontal Menu is easily installed and just adjusted, so you should not have questions during the use of the module.


On this review of the most popular modules for the horizontal menu ends. But do not complete possible methods creating menus. Continue your research and you will definitely become a Joomla expert!