How to make a side menu in joomla. Menu creation

A menu is a separate block that has menu items. The function of the menu is to create a list of links to various materials or sections of the site. And the formation of output parameters for these materials. Those. where you navigated to and what the article, category, or section will look like.

Category Blog: Articles with an extension are arranged on the page one after the other in a column or multiple columns, and links to other articles in this category can be located at the bottom of the page.

After creating the content structure, you need to create a menu for site users.

A menu is a set of buttons that will lead the user to specific objects: articles, a list of categories, etc. You can display information on the site both in the form of a blog and as a static page.

By opening the "Menu Manager" window (using the "Menu" button on the control panel), you can see a page with already created menu types.

To create a new menu, click on the "Create" button.

On the opened page "Menu details" you need to fill in the fields:

System name (in Latin), title - the name of the menu item when displayed on the site, menu description and module title - which will be used when choosing the method for displaying the menu on the site.

To create menu items, in the "Menu Manager" click on the "Menu Items" button in the column of the same name.

On the Menu Items page, click the Create button

and go to the "Menu Item" page.

It contains four types of items:

Section - in the form of a blog or in the form of a table of links (in this case, all articles in the section will be displayed).

Material - in the form of a static page with the material. (Other articles on the page are not displayed.). Or a template for sending material (only to authorized users with rights not lower than the author), in which, using a text editor, you can write an article on the site.

Blog template on the main page - allows you to display material on the main page only in the form of a blog. (All materials that have the item “display on homepage” checked) are displayed.

From the archive - in the form of a blog with a filter that allows you to set the parameters for selecting material. To create a category blog, click on the "Category Blog" link.

On the page that opens, fill in the fields:

Title - the text that will be displayed in the menu

Alias ​​- text that will become the base url for this item

Show in - bind the item to a specific menu

Parent element - specify the parent element of the item

Access - specify access to the item

Open in - in which window the menu item will open

In the "Settings - General" tab:

Description - hide or show description

Image - descriptions hide or show descriptions image

Full Width - Specify the amount of news to display in the full width of the content area

Intro - specify the number of news items that only show the introductory text

Columns - specify in how many columns the materials will be lined up

Note: The Change Type key allows you to change the type of menu item.

You have no rights to post comments

JED Score: overall - 28 , functionality - 50 , support - 23 , documentation - 28 .

BM Cool Menu- one of my favorites free and safe modules for CMS Joomla 3 . I like its simplicity and conciseness, adaptability (which you rarely see in free options) and the ability to easily tweak manually. In its pure form, this extension did not quite suit me, but with some adjustments to the CSS file, there were no problems left. I think that the low ratings of the module in the Joomla JED catalog are explained precisely by the need for its manual reconfiguration. It's not as difficult as it seems. Moreover, I saved my own CSS file settings for myself and you in a separate file.

This module is ideal for those who need a simple adaptive horizontal and completely free menu on their site with Joomla 3. I must say right away that it supports multi-level menus, but I personally have some problems with this on some sites. While I did not deal with them, as I found other options; but I believe that the matter is in the conflict of jQuery libraries - if desired, this is more than solvable.(I'll tell you how I solved them below. It's not jQuery at all). For single-level menus, the module is 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 the footer. You can see how this menu with a multi-level structure works here.

Settings of the free BM Cool Menu adaptive menu module

The settings of this free and secure module for creating an adaptive menu (which displays equally well on computers and mobile devices) on Joomla 3 include the following items:

• Show Sub-menu Items- show subitems 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 (settings in css format)
• Show border- show frame or not.
• Border radius- radius of rounding corners in the frame.
• border color- frame color.
• active background- color of the active menu item.
• Load jQuery Whether or not to include the jQuery library.

That's actually all the settings. Quite simple and concise. Personally, I like such free modules more than bulky and clumsy extensions with a lot of options that I will never use in my life.

Manual customization of BM Coll Menu styles

Now I will say a few words about manual customization of the module for creating an adaptive menu on Joomla 3 BM Cool Menu. The problem arose when I decided to completely remove the rounding of the corners (border radius) and the frame (border color). After making the appropriate changes in the module settings in the admin panel on a computer in expanded mode (full page), the menu perfectly reflected all these changes, however, on mobile devices and in a minimized window, both the frame and rounding were preserved. In addition, the module in a compressed form invariably rose up and covered with itself a part of another module located above. I wanted to customize the display of the menu so that all of its items are centered. The fact is that, for example, on a 4:3 computer screen, everything looked quite even and decent, but at 16:9, the menu was pressed to the left and looked somehow different. Well, plus everything, I was tired of removing the light strip that separates the menu items.

The solution was found in changing or commenting out some lines in the css file of the module, which lies along the path: /modules/mod_bm_cool_menu/assets/css/style.css. Just in case, I saved the old file intact under the name old-style.css. And the new one made some changes.

Center align menu

In class .bm-cool-menu li i replaced float:left; on inline:block;(line 29) and did the same in line 37 of the class .bm-cool-menu a. Also added to line 10 class .bm-cool-menu: text-align:center;

I remove the white dividing line between menu items

To do this, I completely comment out line 30. For those who forgot or never knew how this is done: /*border-right: solid thin #fcfcfc;*/

Additional settings for displaying the menu on mobile devices

So that the menu does not cover the module (or logo) that is higher in the class .bm-cool-menu-trigger(line 167 and below) I added an indent from the top: margin-top:10px;

In order for the menu frame and corner rounding not to be displayed in the mobile version, I commented out lines 173, as well as lines 175 to 180.

I posted the modified style.css file inside the archive with the module by direct link. It is called mystyle.css. If you don't want to mess around with changing styles manually, you can use it by simply renaming it to style.css.

Separately, I emphasize that the changes I made concern only a single-level menu. However, it is not difficult to make appropriate changes for a multi-level structure.

Changing the title of the menu in the mobile version

Well, there was one very small, but significant detail. Change word Menu, written in Latin when viewing pages in the mobile version or when minimizing the page in the browser to a small window. One would assume that changes should be made to the language file - but no. It turns out that you need to put your menu title in the file along the path: /modules/mod_bm_cool_menu/tmpl/default.php(line 14).

That's all. The main thing, I think, I said. To be honest, I came across this module by accident and, looking at its grades, at first I was rather skeptical about it. However, having tried other options and realizing that there are very, very few free and safe adaptive menus in the official catalog, I returned to this and began to fine-tune it. Now I use it on most of my sites.

Solving the problem with the non-working BM Cool Menu

The problem I have in mind is the following: on some sites I have BM Cool Menu not expanding sub-items either on hover or on click. For a long time I thought that there was some kind of script conflict. When I finally had time to figure it out, I saw that even on a completely clean, just installed Joomla 3 site, the menu did not open. It was then that it became clear to me that the matter was not at all in some kind of conflict. By experience and at the cost of a huge number of nerve cells, I still managed to establish that problem with expanding and displaying the multi-level BM Cool Menu only appears in Position-1 of the Protostar standard Joomla template. By rearranging this module to any other position (for example, banner), miracles happen - and it starts working.

If you absolutely need to place the menu in Position-1, then you will have to slightly correct the index file of the Protostar template (index.php in the root of the template - /templates/protostar/index.php). The fact is that by default the output of this position is wrapped in a nav container with a native Joomla 3 navigator menu class. By removing this "wrapper" and replacing style from "none" to "xhtml", we get position 1, in which the BM Cool Menu module will start working as it should.

So, we find this fragment:

nav class="navigation" role="navigation">

We delete lines 1 and 3, and also replace “none” with “xhtml” in the second line. That's the whole solution.

Links BT Content Slider - newsfeed module 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 BM Cool Menu module

Download BM Cool Menu module via direct link

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:

Hello comrades! In this article, we will finish what we started in the previous post, that is, we will make it possible to display materials on the site. Today we will create menu items in Joomla 3.6. It is the menu items that are the most important component of any Internet resource, as they play a significant role in the main navigation of the site.

Beginning inexperienced site builders for a long time cannot grasp the relationship that is seen between the creation of material, the creation of categories and the creation of menus. But over time, you will understand what it is for and how to work with it. As I mentioned earlier on CMS Joomla 3.6, the material you create must be linked to a category. But that's not all, in order for the article to be displayed on the pages of the site, you need to create a menu.

The developers have provided a huge variety of output menu items. Let's add items to the existing Joomla main menu.

Create a basic menu item

1. In the administrative panel of Joomla at the top we find the section - Menu / Main Manu / Create menu item.

2. On the next page, write "Menu Title". Leave the Alias ​​field blank. This is due to the fact that after the menu name is created, the system will automatically write everything you need in it. This also applies to materials and categories for which you write a title.

3. Menu item type- this is an important part responsible for the output of the material. Click to select.

In the window that opens, we find "Materials", where we need to choose one of the options presented. On my site, I use the “List of Category Materials” 99% of the time.

4. Now that you have decided and selected the above type of menu, you should make " Category selection". By default, the system will display Uncategorised. Here you need to select a category that will be linked to the menu. In the future, it is possible to change the binding. So if you mistakenly attached something that you didn’t want, you can always fix it by going to the Joomla menu.

5. In the right area of ​​the window there are settings related to the display. Status - select "Published". The main page - I think everything is clear. If selected, all category content will be displayed on the main page. You can also set the parent element. The default setting is Root Menu Item. This section plays an important role, as it allows you to create a submenu to the main menu selected in the bar. But since we have only one menu item so far, there is nothing special to bind.

6. As a result, the menu item we created must be “Save” by clicking on one of the corresponding buttons in the upper left part of the screen.

Creating a Menu Item with One Displayed Material

If you want the menu to display one article, you must return to Menu Item Type/Materials/Material. And in the column "Choice of material" select the appropriate material. Further, everything is identical to the above method.

Now you can go to the main page of the site and make sure that the fresh Joomla menu item and the content located in it exist and work.

I hope I was able to help you. If you have any questions ask them in the comments.

Thank you for your attention and see you soon on the pages of Stimylrosta.

Found a grammatical error in the text? Please inform the administrator about this: select the text and press the hotkey combination Ctrl+Enter

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. Using this component, you can quickly create 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.