Lesson make a vertical menu to Jumla. How to make a menu in joomla, three ways to create a menu in joomla

Hello, friends! In touch Zaur Magomedov. In this note I want to introduce you a pretty vertical accordion menu for the site on Joomla 2.5 - 3.0. This menu is very simple and does not require the introduction of a large code, to which I often pay attention. As they say - "better less, yes better."

We have already considered the creation of a horizontal menu and creating a horizontal multi-level menu for Joomla 2.5. Now they got to the vertical.

For a start, look at the demo, as it all looks, if you like, then download the package with the source files.

I found this menu on the Internet and decided to adapt it to the site on CMS Joomla, because I really liked this menu, both in appearance and ease of connection. Slightly by steering the script of the menu itself and the CSS styles, I received such a result as on.

Connecting the menu in Joomla 3.x.x.x

First of all, unpack the archive into a specific folder on your computer. The next thing we will do this will copy the pictures from the Images folder to the pictures of your template. Usually in many templates, this is the image folder if it is called otherwise, for example, IMG, then you must change the paths to pictures in the style file - vmenu.css. We also need to connect one of the menu scripts. I propose to create a "js" folder in the root of your template and put the scripts files in it - menu.js or menu-collapsed.js. Why two files? The fact is that if you have noticed, there are two options for displaying this menu on the demo site. You can carefully look what they differ from each other. Connect the most Menu.js or Menu-Collapsed.js script version. Option 1 is a MENU-COLLAPSED.JS script, and option 2 is MENU.JS. For this, at the very beginning of the index.php file of the template insert the following lines:

$ doc \u003d jfactory :: getdocument (); // Get the parameters
$ Doc-\u003e AddStylesheet (Juri :: Base (). '/ Templates /'.$ This-\u003e Template.' / CSS / VMENU.CSS '); // Connect the style file
$ DOC-\u003e AddScript (Juri :: Base (). '/ Templates /'.$ This-\u003e template.' / js / menu-collapsed.js'); // Connect the menu script, in this case this option 1
?>

We also need a JQuery library, but in Joomla3 it is already connected by default, because Used framework.

So, the CSS file contains the following code:

/********************************
Vertically-drop-down menu accordion
************************************************************/
ul.vmenu (

margin: 0;
Padding: 0;
List-Style: None;
}
UL.VMENU LI (
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\u003e A: HOVER, UL.VMENU LI.ACTIVE\u003e A, UL.VMENU LI\u003e
UL.VMENU LI.PARENT\u003e A: After (

Display: Block;
Content: "";
Float: Right;
margin: 8px 5px 0 0;
Height: 3px;
width: 6px;
}
/ * Drop-down points * /
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.VMENU2 LI (
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\u003e a: hover, ul.vmenu2 li.active\u003e a, ul.vmenu2 li\u003e a: focus (background-color: transparent; color: # 0088CC)
UL.VMENU2 Li.Parent\u003e 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 points * /
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)

IN this file The styles of both options are contained and you can remove the styles of the menu unnecessary to you.

Now, when we have all the items created, we can create a module with which we will output our menu in a particular modular position of the template. I chose the left column. Go to the menu manager and click on the link "Add a module for this type Menu "opposite our created menu. Also, the menu module can also be created as follows - go to the Module Manager: Extensions -\u003e Module Manager -\u003e Create -\u003e Menu (Select the module type).

Go to the "Advanced Parameters" tab. Here I enter a space and insert the suffix of the menu class - vmenu.. What is it for? On the site, it may not be one menu and that the styles do not cross them enter the alternative class of the non-measured list of the menu. If you liked the second version of the menu display, then in the quality of the souffix, we introduce - vmenu2..

Everything, after the settings made, save the module. If you have done everything right on your site, a menu appears, similar to what.

Let us remind you again! On the demo two, two options menu and probably you select one of them. In this case, there is no need to connect both script files, just one is enough.

File MENU-COLLAPED.JS. - This is our option 1 - Accordion menu - Option 1
File Menu.js - This is our option 2 - Accordion menu - Option 2
Menu Class suffix (via space) for option 1 - VMenu
Suffix menu class (via space) for option 2 - VMENU2

Based on this, connect the file you need. Also in the CSS file you can remove the styles for the option unnecessary to us so as not to ship once again extra kilobytes.

Connecting the menu in Joomla 2.5.x

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

$ doc-\u003e
?>

We will have about the following:

$ doc \u003d jfactory :: getdocument (); // Get the parameters
$ doc-\u003e addscript ('http://code.jquery.com/jquery-tentest.min.js'); // Connect the latest version of the jQuery library
$ DOC-\u003e AddScript (Juri :: Base (). '/ Templates /'.$ This-\u003e template.' / js / menu-collapsed.js'); // Connect the menu script, in this case this option 1
?>

And one more thing. In Joomla 2.5 No Type of menu item System links -\u003e Title, there is only a type of text separator - separator, but this type of item will not suit us, because The menu item header will not be framed by reference. In this case, you need to select the type of "external URL" and as an ulla insert the plug - #. Everything else is the same.

That's all I wanted to say. If something does not work (perhaps and I'm somewhere wrong in the text), then ask questions in the comments. So far, see you in the following posts!

We present a new version of the stunning and multifunctional module of the vertical menu Vertical Menu 4.0.270. This is a great and multipurpose solution for displaying the Joomla menu or display the menu and categories of other popular additional components. The module is fully SEO optimized and has a simple in setting an administrative control panel where you can make the color scheme setting and the design, typography setting, the sources of the displayed menu and much more.

ACCORDION MENU V3.4 - Accordion Menu for Joomla

We present a simple and easily customizable module of the vertical accordion of the APCORDION MENU V3.4 menu. This joomla extension allows you to create any number of menu subparagraphs and supports click or hang functions to activate the menu, add icon classes, subtitles for headers and images. You can configure an unlimited number of color combinations or use 3 prepared and built-in design. The module uses the "Layout" and "Settings" settings.

AJAX SCROLL V1.6 - Scrolling for Joomla

Quix pageBuilder Pro - Professional and one of best designers Pages for Joomla 3. This extension allows you to implement modern sites without the need to edit cSS code and coding. You just need to choose a ready-made suitable layout and start building using the Drag & Drop interface. From the functionality you can emphasize the full SEO optimization of the created pages, convenience for expansion and developers, the presence of more than 30 elements for fast creation Sites, support for google fonts, the presence of your own media model, a large collection of photos of others. Functions.

OFFLAJN VERTICAL MENU V3.1.201

OFFLAJN VERTICAL MENU V3.1.201 - one of the most functional and universal modules Joomla Designed for the rapid construction and design of any types of vertical menu. Extension can be used with any templates. You can implement an accordion menu, a pop-up menu, a tree menu and DropMenu. You can also make side panels. You can also mark the fully customizable animation of transitions, creating the overlay menu, displaying the items filter, displaying custom logo, inserting more than 220 icons, supporting other components and much more.

SWMENUPRO 10 menu component

sWMENUPRO V10.7 - a new issue of one of the most powerful extensions Joomla Designed to create almost any structure and types of menus. With this component, you can quickly make four types of pop-up or drop-down menu, three types of akkardeon type menu (you can make a combined, dynamic or multi-level menu). You can also implement a multilone or tree menu. IN new version Developers added the ability to transfer styles to other sites, connect to the pictures of the picture, edit gradients, background, shadows, corners and fonts.

Overview Modules Menu for CMS Joomla 3.x.

1. Maxi Menu CK.

CMS.Joomla 2.5 / 3.x.

Powerful, SEO optimized module for creating a horizontal or vertical drop-down menu with adaptive design and beautiful effects. In addition, it is possible to publish on one page of several copies. this module. Unfortunately, functionality free version This expansion is very limited.

After installing the module, the screen displays the links to download the documentation for it and paid options: an extended package of graphic topics, a plug-in to control the menu, patches for the "Virtuemart" components, "Hikashop", "joomshopping" and k2, and a plug-in for correct display Created Menu by mobile devices.

Next, you need to go to "Module Manager" and select "Maxi Menu CK" in it. On the Module tab of the control panel, you can select a menu to publish, enter a unique module ID, the basic menu item and its initial and final levels, and you can also turn off the sublayer option.

In addition, you can use the menu setup wizard:

Ease of use of the menu wizard is to quickly switch between the menu types and the options you need, but is relevant for the most part, only in the case of additional paid extensions installed. On the "Bind to the 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 effects on JavaScript, select their type of download and set up visual effects For points and sub-clause menu. In Styles Option, you can select the menu theme (three is available by default, the menu orientation, disable the adaptive menu design and select the CSS file of the template.

In the "Logo Options" section, you can select a logo file that will be displayed on the menu, add a link to it and determine its position, width, height and indentation. After selecting the menu position in the template and change status to "Published", the menu appears on the site.

The extension operating on the site looks like this:

This menu (after installing a paid patch) is optimally used as the main menu for the online store on "Joomshopping", "Virtuemart" or "Hikashop", since it allows you to automatically display a list of categories of goods.

2. ARI EXT MENU.

Expansion is fully compatible withCMS.Joomla 1.5-1.7 / 2.5 / 3.x.

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

To set the extension, you need to go to the "Extensions Manager", select the loaded module file by dialogue and click on the "Download and Install" button. In the module settings, you can select a menu that will be displayed by this module, the menu orientation, the initial and end level of the hierarchy, and also configure such parameters how to show only active menu subparagraphs, highlight the current menu item. Among system settings The option Loading the EXTJS library is available, selecting its loading and generation of a unique identifier. You can also configure the parameters of the styles of the items and sub-clause menu: color background, text, font size, alignment, etc.. Advanced module settings are quite standard and contain caching parameters, caching time, module HTML tag, bootstrap size, header html and CSS header class. After setting the position and publication of the module, the following type menu appears on the site:

3. Accordeon Menu CK.

Expansion is fully compatible withCMS.Joomla 2.5 / 3.x.

Another menu from Joomlack Studio. Allows you to insert beautiful effects when opening a submenu, to repeat the module on the page. The module feature 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, the screen appears on the screen on the successful installation of the module and the link to download the documentation for it, as well as the view of the link to insert any module as one of the menu items.

By turning to the module control panel, you can select a menu to display in the module, the basic menu item, starting and final levels, as well as set the suffixes and type of link alignment for images. On the Effects tab, you can select an event at which the menu item opens whether the link is shown when you hover the mouse cursor to the image, the type of transition, the need to use effects for the active submenu; You can also set the menu item ID, active by default. On the Styles tab, you can select the design topic menu, specify the folders with the images that will be displayed when the menu is turned on, as well as specify the alignment position for them. Menu Styles tab contains multiple settings external view Menu: Fields, Background, Corner Roundings Menu, Shadows and Borders. On the "First Level Link Styles" tab, Second Level Link Styles and Oter Level Link Styles, you can change the font, text color and background for links displayed in menu items. The Third Party Extensions Options tab is designed for compatibility settings with Hikashop and Virtuemart components and requires loading and installing appropriate patches. Setting up mobile options in the free extension version is also unavailable.

For successful operation, you need to bind the module to the menu items, specify its position and publish. Below is an example of the operation of the module on the site.

4. JB Dropdown Menu for Bootstrap

Expansion is fully compatible withCMS.Joomla 2.5 / 3.x.

The menu module running with Twitter "S Bootstrap and JBootstrap is based on the built-in Joomla menu module. Installing the module is standard. In the module settings, it is only required to select one of the menu of the system, starting and final level, and also has a customizable the ability to show the menu subparagraphs. After As you assign this item to this module and publish it, the next view menu will appear on the site:

5. Dj-Menu.

Expansion is fully compatible withCMS.Joomla 2.5 / 3.x.

Menu with drop-down list and animated effects based on Mootools. Installing the module is performed standard. On the Module tab of the extension settings, you must select a menu that the module will display, as well as define the last of its levels and, if required, enable the output of the menu on the small screens and set its width in this case. The CSS3 Animations and Script Features tab allows you to configure the animation effects when entering and output from 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 size of bootstrap.

Below is an example created using this menu module.

All modules reviewed in the review to create on the Site running CMS Joomla 3.x Menu allows you to create a menu with sublevels. The considered modules for the most part are distinguished by the presence of certain animation effects and the possibility of displaying on mobile devices. Therefore, for sites focused on mobile users (And there are more and more such), it is worth a preference to the "DJ-Menu" module. The ACCORDEON MENU CK module is good because it allows you to insert the contents of another module; Module "JB Dropdown Menu for Bootstrap" is the easiest and simple and "easy" extension and looks good in a pair, for example, with 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 take advantage of it, financial investments are required.

Hello comrades! In this article we will finish the started 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 are the most important component of any Internet resource, as they perform a significant role of the main navigation of the site.

Beginners of inexperienced website builders for a long time can catch a relationship that is viewed between creating material, creating categories and creating a menu. But over time you will understand what it is necessary and how to work with it. As I have previously mentioned CMS Joomla 3.6, the material being created must be tied to the category. But this is not all, so that the article is displayed on the site page you need to create a menu.

Developers have provided a huge variety of menu items. We will be adding items in the already existing Joomla main menu.

Creating a basic menu item

1. In the administrative panel of Jumla above, we find a section - Menu / Main Manu / Create a menu item.

2. On the next page we prescribe a "menu header". The field "Alias" leave empty. This is due to the fact that after the menu name is created, the system will automatically write everything you need in it. It also concerns the materials and categories for which you prescribe a title.

3. Type of menu item - this an important partresponsible for the output of the material. Click choose.

In the window that opens, we find "Materials", where we need to choose one of the presented options. At my site, I am 99% using a "list of category materials".

4. Now that you have identified and chose the above menu type, you should produce " Category selection" By default, uncategorised will be displayed in the system. Here you need to choose a category that will be tied to the menu. In the future it is possible to change binding. So if you mistakenly tied not what they wanted, it can always be fixed, going to the Joomla menu.

5. In the right window of the window are settings associated with the display. Condition - choose "Published". Main page - I think and so everything is clear. If you choose it, the entire material of the category will be displayed on the main page. You can also specify the "parent element". By default, the "root menu item" is installed. This section performs an important role, as it allows you to create a submenu to the main menu selected in the row. But since we have so far only one menu item, then there is nothing to tie.

6. As a result, the menu item created by us must "Save", clicking on one of the corresponding buttons on the left side of the screen.

Creating a menu item with one displayable material

If you want one article to be displayed in the menu, you need to return to the menu item Type / Materials / Material. And in the column "Selection of Material" to choose a suitable material. Next, everything is identically elected method.

Now you can go to main page Site and make sure the existence and performance of the fresh item of the Joomla menu and the content located in it.

I hope I managed to help you. If you have any questions, ask them in the comments.

Thank you for your attention and fast meetings on the pages of Stimylrosta.

Discovered in the text grammatical error? Please inform the administrator: Select the text and click the combination of hot keys Ctrl + Enter.

For this CMS available a large number of Free extensions. Today I prepared for you the best extensions of the 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 Joomla you're using.

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 withdraw the drop-down, accordion menu, horizontal or vertical menu With the 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