Introducing a new version of the stunning and multifunctional vertical menu module Vertical menu 4.0.270. This is an excellent and multi-purpose solution for displaying the Joomla menu itself or displaying menus and categories of other popular additional components. The module is fully SEO optimized and has an easy to set up administrative control panel where you can customize the color scheme and themes, customize typography, display menu sources and much more.

AP Accordion Menu v3.4 - accordion menu for Joomla

Introducing a simple and easily customizable vertical accordion menu module AP Accordion Menu v3.4. This Joomla extension allows you to create any number of menu sub-items and supports click or hover functions to activate menus, add icon classes, subtitles for titles and images. You can customize an unlimited number of color combinations or use 3 prepared and built-in themes. The module uses the "layout" and "settings" customization option.

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 websites without the need to edit 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, we can highlight the complete SEO optimization of the created pages, ease of expansion and developers, the presence of more than 30 elements for quickly creating sites, support for Google fonts, the presence of its 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 for quickly building and designing any type of vertical menu. The extension can be used with any templates. You can implement accordion menu, popup menu, tree menu and DropMenu. You can also make side panels. Other features include fully customizable transition animations, overlay menu creation, item filter display, custom logo display, insertion of over 220 icons, support for other components, and much more.

Menu component swMenuPro 10

swMenuPro v10.7 is a new release of one of the most powerful Joomla extensions designed to create almost any menu structure and type. Using this component, you can quickly create four types of pop-up or drop-down menus, three types of accordion-type menus (you can create a combined, dynamic or multi-level menu). You can also implement a multi-column or tree 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.

We continue to get acquainted with the administration of Joomla 3. In this article we will get acquainted in detail with the possibility of the Joomla system menu. There is probably no need to say what a site menu is. Suffice it to say that on a Joomla website the menu can be placed vertically in the right and/or placed horizontally in the area of ​​the site header.

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

Joomla 3 Menus and Menu Items

Joomla site menus are created by the site administrator or site users with permissions to manage the site menu. Menu management rights are set on the Components→Menu Manager→Permissions tab.

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

Note: On the Joomla website you can create any number of menus and any number of menu items with any depth of nesting. The nesting of the menu is a tree of the following type: menu items - sub-items of menu items - sub-items of sub-items of menu items, etc.

How to create a Joomla website menu

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

We give the menu a name, be sure to enter the system name of the menu (menu type). The menu type can be any Latin word that clearly indicates the purpose of the menu. For example, mainmenu, homemenu, topmenu, footermenu.

How to create menu items (menu sub-items)

Creation of menu items is done on the tab: Menu→Menu name→Create menu item.

Menu Item Types

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

Menu item type

1. Contacts (4 types);

2. News feeds (3 types);

3. Materials (7 types), namely

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

4.Settings manager;

5.User manager (7 types);

6. Tags (3 types);

7.Wrapper;

9. System (4 types);

10.Smart search.

As you can see, there are many types of menu items and with their help you can organize very good site navigation.

Enough theory, let's move on to practice and create a menu with two or three menu items.

An example of creating a Joomla website menu

Let's create a menu called "Menu1". The system name will be "menu-1".

Go to the tab: Menu→Create menu.

On the menu creation page, specify its name “Menu1” and the system name “menu-1”.

Click the “Create” button.

All! The menu has been created.

What does the system menu name mean?

I'll show you what the system menu name is for. Go to phpmyadmin, the site database manager.

• We are looking for the table: prefix_menu_types.
• Open it (click on the name), which corresponds to the SQL query:
• SELECT * FROM `prefix_menu_types`
• And we see the system name of the created menus (menu type).

Conclusion: The menu system name is needed to create unique values ​​in the fields of the menu_types table in the Joomla database.

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

Creating Joomla Menu Items

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

class="eliadunit">

Give the menu item a name.

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

Specify the target window: A new window with navigation elements.

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

On other tabs we set other menu item settings:

Blog Layout Options (3) – blog template. You can specify the number of columns.

Display (4) – template for displaying individual material;

Integration settings (5) – enable the creation of RSS feeds for this menu item.

Page Options (7). Here you can set an alternative title that 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

, which matches all blog category pages.

Metadata (8). You need to fill in the metadata for this blog, namely description and keywords. Description must be unique and no more than 165 characters long. Keywords are optional.

After checking all the settings of the menu item, click “Create” or “Create close”.

All! The menu item has been created. All that remains is to place the menu on the website.

How to place a menu on a Joomla website

We will place two menus on the website. Horizontal drop-down and vertical with display of the entire menu tree.

How to Place a Joomla Horizontal Dropdown Menu

The Joomla drop-down horizontal menu is placed in a special template module called “menu”. Additional fields for placing menus can be created in the template, for example footermenu, topmenu.

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

Menu module settings

On the “Binding to menu items” tab, we indicate on which pages of the site to show this module with the menu.

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 parameters for the output of these materials. Those. where the transition was made and what this article, category or section will look like.

Category blog: articles with the extension are located on the page one after another in the form of a column or several columns, and at the bottom of the page there can be links to other articles in this category.

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 either in the form of a blog or in the form of 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 “Menu Details” page that opens, you must fill in the following 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 a method for displaying the menu on the site.

To create menu items, in the “Menu Manager” you need to click on the “Menu Items” button in the column of the same name.

On the “Menu Items” page, click on the “Create” button

and go to the “Menu Item” page.

It presents four types of items:

Section – in the form of a blog or in the form of a table of links (all articles in the section will be displayed).

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

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 “display on main” option checked are displayed).

From the archive - in the form of a blog with a filter that allows you to set 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 - text that will be displayed in the menu

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

Show in - bind an item to a specific menu

Parent element - specify the parent element of the item

Access - indicate access to the item

Open in - in which window the menu item will open

In the “Parameters - Basic” tab:

Description - hide or show description

Picture - descriptions hide or show description picture

Full width - specify the number of news items to be displayed in the full width of the content area

Introduction - specify the number of news items for which only the introductory text is shown

Columns - indicate how many columns the materials will be arranged in

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

You have no rights to post comments

For a site of any level, it is of great importance how well its style is composed, 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 menu template 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 menu module, 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 that use 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 you don't like the format in which your standard interface displays categories, 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.

Hello, friends! Zaur Magomedov is in touch. In this note I would like to introduce you to a nice vertical accordion menu for a site on Joomla 2.5 - 3.0. This menu is very simple and does not require the implementation of a lot of code, which is something I often pay attention to. As they say - “Less is better.”

We have already covered in previous posts creating a horizontal menu and creating a horizontal multi-level menu for joomla 2.5. Now we’ve reached the vertical.

First, look at the demo to see how it all looks, if you like it, then download the package with the source files.

I found this menu on the Internet and decided to adapt it for a site using cms Joomla, because... I myself really liked this menu, both in appearance and ease of connection. Having slightly adjusted the script of the menu itself and the CSS styles, I got the same result as in .

Connecting menus in joomla 3.x.x

First of all, unpack the archive into a specific folder on your computer. The next thing we will do is copy the images from the images folder into the images folder of your template. Usually in many templates this is the images folder, if you have it called differently, for example, img, then you must change the paths to the images in the style file - vmenu.css. We also need to connect one of the menu scripts. I suggest creating a “js” folder in the root of your template and putting script files in it - menu.js or menu-collapsed.js. Why two files? The fact is that, if you noticed, on the demo site there are two options for displaying this menu. You can carefully look at how they differ from each other. Connect your favorite version of the menu.js or menu-collapsed.js script. Option 1 is the menu-collapsed.js script and option 2 is menu.js. To do this, at the very beginning of the template index.php file, insert the following lines:

$doc = JFactory::getDocument(); // get parameters
$doc->addStyleSheet(JUri::base().’/templates/’.$this->template.’/css/vmenu.css’); // include the styles file
$doc->addScript(JUri::base().’/templates/’.$this->template.’/js/menu-collapsed.js’); // connect the menu script, in this case it is option 1
?>

We also need the jQuery library, but in joomla3 it is already included by default, because framework is used.

So, the css file contains the following code:

/********************************
Vertical dropdown menu accordion
************************************************************/
ul.vmenu (


margin: 0;
padding: 0;
list-style:none;
}
ul.vmenuli (
margin: 0 0 2px;
}
ul.vmenu li a (

border: 1px solid #D5D5D5;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-webkit-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
color: #515151;
display: block;
padding: 5px 8px;
text-decoration: none;
}
ul.vmenu li > a:hover, ul.vmenu li.active > a, ul.vmenu li >
ul.vmenu li.parent > a:after (

display:block;
content:"";
float:right;
margin:8px 5px 0 0;
height:3px;
width:6px;
}
/* Drop-down items */
ul.vmenu li ul (
font-weight: normal;
margin: 10px 0 10px 15px;
list-style:none;
}
ul.vmenu li ul li (
background:none;
margin:0 0 5px
}
ul.vmenu li ul li a (

border: medium none;
padding: 0 0 0 15px;
}
ul.vmenu li ul li a:hover (color:#29719E;text-decoration:underline)
ul.vmenu li ul li.active a (color:#29719E;font-weight:bold)

/*********************
Vertical drop-down menu accordion - option 2
************************************************************************/
ul.vmenu2 (
font: bold 12px Arial,Helvetica,sans-serif;
list-style: none outside none;
margin: 0;
padding: 0;
list-style:none;
}
ul.vmenu2li (
margin: 0 0 2px;
}
ul.vmenu2 li a (
background: url("../images/vmenu-li-bg.jpg") left bottom repeat-x;
border: 1px solid #D5D5D5;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-webkit-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
color: #515151;
display: block;
padding: 5px 8px;
text-decoration: none;
}
ul.vmenu2 li > a:hover, ul.vmenu2 li.active > a, ul.vmenu2 li > a:focus (background-color:transparent; color:#0088CC)
ul.vmenu2 li.parent > a:after (
background:url("../images/arrow-dropdown.png") no-repeat;
display:block;
content:"";
float:right;
margin:8px 5px 0 0;
height:3px;
width:6px;
}
/* Drop-down items */
ul.vmenu2 li ul (
font-weight: normal;
margin: 10px 0 10px 15px;
list-style:none;
}
ul.vmenu2 li ul li (
background:none;
margin:0 0 5px
}
ul.vmenu2 li ul li a (
background: url("../images/vmenu-arrow.png") no-repeat scroll 5px center transparent !important;
border: medium none;
padding: 0 0 0 15px;
}
ul.vmenu2 li ul li a:hover (color:#29719E;text-decoration:underline)
ul.vmenu2 li ul li.active a (color:#29719E;font-weight:bold)

This file contains the styles of both options and you can remove the styles of the menu option you do not need.

Now that we have all the items created, we can create a module with which we will display our menu in one or another modular position of the template. I chose the left column. Go to the menu manager and click on the “Add a module for this menu type” link opposite our created menu. You can also create a menu module in the following way - go to the module manager: Extensions -> Module Manager -> Create -> Menu (select the module type).

Go to the “Advanced Settings” tab. Here we ENTER A SPACE and insert the menu class suffix - vmenu. What is it for? There may be more than one menu on the site, and so that their styles do not overlap, we introduce an alternative class to the unnumbered list of menus. If you liked the second option for displaying the menu, then enter as a suffix separated by a space - vmenu2.

That’s it, after the settings have been made, save the module. If you did everything correctly, a menu similar to the one on the website will appear on your website.

Let me remind you again! There are two menu options on the demo site and you will probably choose one of them. In this case, there is no need to include both script files, only one is enough.

• File menu-collapsed.js. - this is our option 1 - Accordion menu - option 1
• The menu.js file is our option 2 - Accordion menu - option 2
• Menu class suffix (separated by a space) for option 1 - vmenu
• Menu class suffix (separated by a space) for option 2 - vmenu2

Based on this, connect the file you need. You can also remove styles in the css file for an option that we don’t need, so as not to load extra kilobytes once again.

Connecting menus in joomla 2.5.x

Connecting a menu in joomla 2.5 is no different from connecting in joomla 3, except that we need to additionally connect the jQuery library. To do this, add the following line to the above code:

$doc->
?>

We'll get something like this:

$doc = JFactory::getDocument(); //get parameters
$doc->addScript(‘http://code.jquery.com/jquery-latest.min.js’); //include the latest version of the jQuery library
$doc->addScript(JUri::base().’/templates/’.$this->template.’/js/menu-collapsed.js’); //connect the menu script, in this case it is option 1
?>

And one more thing. In joomla 2.5 there is no menu item type System links -> Header, there is only a text separator type - Separator, but this type of item will not suit us, because The menu item title will not be surrounded by a link. In this case, you need to select the “External URl” type and insert the placeholder - # as the URL. Everything else is the same.

That's all I wanted to say. If something doesn’t work out (perhaps I made a mistake somewhere in the text), then ask questions in the comments. Bye everyone, see you in the next posts!