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 instances of this module. Unfortunately, the functionality of the free version of 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 on 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 download type and set up visual effects for items and menu subparagraphs. 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. The system settings are available Option Loading the EXTJS library, 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. The Menu Styles tab contains a plurality of the appearance of the appearance of the menu: fields, rear plan, ringing of menu items, shadows and boundaries. 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 mobile users-oriented sites (and there are more and more), 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.
For the site of any level is of great importance how well the style is arranged, how everything is "glued" together. But the next minute, the design is moving to another plan, because it becomes much more important how convenient the resource interface is organized, how the materials are distributed how much the likelihood is that using the menu can be reached to any section. And then the owner of the project should already think about whether the template developer suggests that the developer of the template is so comfortable, is it and comfortable to work with the search for materials, is there a division of the same articles in categories? If this aspect does not bring initially before the ideal, you can lose those visitors who could really bring you a profit, but they simply did not want to deal with a non-professional resource, because otherwise, the organization's navigation organization would be a completely different level. But do not need to think that only provided in Joomla menu template Tools, become the limit for which you have to work. To improve the structure and navigate your project, you can easily use extensions, for example Joomla Module Menucapable of making very significant changes to this segment.
Specific Defendments to Model Menu
What can extend the extensions that are in this category? First of all, this is a variety of menus. The most interesting thing is that developers take care not only about convenient customization and work of these solutions, and also about how they look. For this purpose, animation is applied, colors of colors, different kinds of fonts for the menu are provided, as well as for them, sets of icons are prepared. What is even better, here you will find options with the support of a different number of levels, and this already opens the way to create serious navigation systems, thanks to which you can Joomla Menu item, get into any section of the site, or even some category. More interesting, options are watching using images that symbolize each menu item, such additions already have in the list of we have. Choose Joomla drop-down menu, Special mega-menu, with huge features, as well as accordion - Joomla 3 menu, imitating the collapse of the usual accordion to accommodate content. But in addition to such proposals, this category has many more interesting developments.
Creating categories and other
Of course, that using various thematic directions, it is necessary to provide visitors direct access to the necessary materials, desired it is desirable to make each category of its corresponding filling. If the format in which your standard interface displays categories, you do not like, you can use the appropriate extensions. To do this, you will find solutions that output categories in a form similar to the drop-down menu, those that are specifically established for cooperation with K2, or simply organize convenient access to the selection of content corresponding to a specific topic. As a result, even you will be more comfortable to work with your project, initially distributing new arrivals on the "shelves", because the search, and the adjustment of such materials becomes more convenient.
Make travel on site is really comfortable.
When the project is equipped with a convenient menu, when the category is clearly distributed on the page, and even without using the search you can find an entertaining material for yourself - you want to work with this resource. In addition, as mentioned above, all the current developments are also aimed at bringing attention to their style of execution, because without this it is also impossible. So if you are not satisfied with the standard navigation elements on the site, use extensions from this category to make the joomla menu Ideal for you.
Today we will talk about how to work with the menu in Joomla 1.7-2.5. Namely, how to display the menu module to the Joomla template position, how to assign the menu item text material or the desired page of one of the Joomla components. Along the way, consider how to determine which positions exist in your Joomla template and in which specifically the place of the template they are crack. Those who work with Joomla 1.5 The article will also be useful because in the new branches of Jumla Admins differs from his junior fellow, Jumla 1.5.
Before that, we looked at the local hosting, disassembled how to do.
After you tend to display various modules as a rule, consider it in more detail. We go to the joomla admin ( _http: // Your_Sight / Administrator). In the main menu, choose menu-\u003e Menu Manager-\u003e Create Menu
In the window that opens, specify the menu type (Menu System Name, Latin Symbols) Joomla, Menu Title (Displayed in the Control Panel), Description of the Joomla menu (optional). Click the "Save" button. The menu header and the menu type may be any, but it is better to set the name suitable in meaning. In the example, I specified the "Menu on the left, leftMenu", because I am going to display the menu in the left Sidebar of the Joomla template (in the example I use the standard Joomla Beez_20 template). 
The Joomla menu is created, it remains to add a pair of three items to it and display your template into the desired position.
Add menu items in Joomla
Let's create an item for just created menu (menu on the left), the menu item will have the type "Material", i.e. For this menu item, the Joomla material will be displayed.
To create a menu item, you need to choose " menu-\u003e Menu name-\u003e Create menu item".
In the window that opens, you need:
- select "Type of menu item"
- specify the "menu title".
From optional to fill the fields:
- Alias \u200b\u200b- in Jumle 1.7-2.5 can be created automatically, in Joomla 1.5, a third-party plug-in was used for this. If you need to specify Alias, if it is unnecessary, it will be created automatically by transliterating the menu item header. The Alias \u200b\u200bof the menu item is used as part of the CNC (human-understandable urlas) addresses. Wirefall, if you have a menu item called "news" and the SEF is turned on in the jumlow and suffixes are used in the address, then when you select this menu item, the page opens with the address _Http: //vash_Syt/news.html.
- Note - You can enter any text. This text is needed for the prompt to unforgett why create a menu item).
- Link - Fill automatically when you select a menu type (for example, for the "Material" menu may be index.php? option \u003d com_content & view \u003d article & id \u003d 1). If the menu type is an external link, then in this field you need to specify an external link.
- Condition - has 3 states: Published, not published, in the basket. If you create the menu item, then leave as it is ("Published").
- Access - has 3 states: for all, for administration, for registered. Leave to all if you want everyone to see this menu item.
- Menu - specify the menu for which you create the item by default, the menu is selected for which this item is created.
- Parental element - You can specify the parent menu of the Elsie menu you need to create an attached item.
- Order - You can specify for what point item will follow the item created. The order of the following is better to configure in the menu manager (Menu -\u003e Menu name).
- The target window - how to open the link - in a new window (separate pages, pop-up window) or in the current one.
- Main page - Select this option If you need to bind this menu item to the main page, i.e. By default, the contents attached to this Joomla menu item will be displayed on the main page.
- Language - Leave as it is ("all").
- Template style - You can choose which template will be used as the page design called at this item.
By clicking on the Select button, a pop-up window appears. Since we are gathered to create a menu item that refers to the Joomla article, then chop out the "Material" element "Material"
the previous window will open in which the "Link" field will be filled and the field in which the field can be selected. Select the desired material (it must be pre-created).
After the menu is created and filled with the required number of items, it can be displayed in the Joomla template using a standard module, but before that you need to decide how much and what positions are in your template.
We define the positions available in your template and their location.
Modules in Jumla are displayed in the so-called position in the template. If you open the index.php file (Joomla templates are located in the folder: Templates, at the root of your site) almost from any template, you can detect the following lines in itcountModules ("Position-12")):?\u003eHow it is not difficult to guess, "POSITION-12" is the name of the position in the Joomla template.
Note: One of the differences Joomla 1.6 and older from version 1.5 are position names. In Joomla 1.5 Positions were called: User1, User2, ..., Left, Right, Banners, Top ... The default positions are defined positions: Position-1, Position-2, ... that, in my opinion, not Convenient, although not fundamentally. However, you can change the names of the position manually to more familiar to you, change their number, all this is done by editing the file "templateetails.xml" from your Joomla template.
As for the code of the output module to the position of the template. In the first line in the conditional statement, it is checked if there is at least one module in this position, if there is, then the next line output all the modules into the specified template place, in the order that is defined in the module manager available in the admin.
To verify which positions are available in your Joomla template, contact _http: // Your_Sight /? TP \u003d 1. As a result, the page of your site on Joomla will be shown in the browser, in which all available positions will be marked by the contour and signed the inscription that corresponds to the title of the position.
By default, Joomla 1.6-2.5 reaches the ability to demonstrate which positions are available in the template ( tP \u003d 1. Does not result). This is not a bad innovation, because it does not always need extraneous to know that you have a site on Joomla or knew any new buty about your site. Therefore, at the site development stage, this feature is turned on through the Joomla admin admin, and when you do not need to turn off the position of the positions available in the template.
To enable the ability to display positions available in your Joomla template, you need to do the following: contact the menu item " Extensions-\u003e Template Manager"
on the "Templates" tab, switch the "View module position" switch to "Enabled".
Now you can by adding to the end of the site address ( ? TP \u003d 1) See which positions exist in the template and in what place they are derived.
Display the Joomla menu module in the desired position of the template
In order for the menu you created on the pages of your site it needs to be displayed using the module (mod_MENU). We go to the module manager (expansion-\u003e Module Manager).
In the window that opens, click the "Create" button.
In the pop-up window, select the type of module - "Menu".
Next, specify: The module header (I filed the same as to the menu itself), show the title - usually disconnected, click on the Position Select button and select the desired position from the pop-up window (I chose POSITION-7, because this position is in Left Sidebar of my template), the condition - we leave published.
In the settings group located slightly below, you can specify the module binding to the items of the various menus that are on the site. It can be done to make a certain module output on the main one, and on other pages it will not be or for example, on the news page withdraw a module that shows brief news.
High-quality video course on the creation of sites on Joomla
Well, lastly. For better assimilation of the material I offer to watch the video on creating a menu in Joomla 1.5
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:
addStylesheet (Juri :: Base (). "/ Templates /".$ this-\u003e template." / css / vmenu.css "); // Connect the $ DOC-\u003e Addscript style file (Juri :: Base (). "/ templates /".$ this-\u003e template." / js / menu-collapsed.js "); // Connect the menu script, in this case, is this option 1?\u003e
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 (Font: Bold 12px Arial, Helvetica, Sans-Serif; List-Style: None Outside None; margin: 0; padding: 0; List-style: none;) ul.vmenu li (margin: 0 0 2px;) ul.vmenu 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.vmenu li\u003e a: hover, ul.vmenu li.active\u003e a, ul.vmenu li\u003e a: focus (background-color: transparent; color: # 0088cc) ul.vmenu 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.vmenu Li UL (Font-Weight: Normal; Margin: 10px 0 10px 15p x; List-Style: None; ) ul.vmenu li ul li (background: none; margin: 0 5px) ul.vmenu 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.vmenu Li UL Li A: Hover (Color: # 29719E; text-decoration: underline) ul.vmenu li ul li.active a (Color: # 29719E; font-weight: bold) / ********************* Vertically-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;) / * Finding 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 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 -Decorage: Underline) UL.VMENU2 Li UL Li.Active A (Color: # 29719E; Font-Weight: Bold)This file contains styles of both options and you can remove the styles of the menu option unnecessary to you.
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:
addscript ("http://code.jquery.com/jquery-tentest.min.js"); // Connect the latest version of the jQuery library?\u003e
We will have about the following:
addscript ("http://code.jquery.com/jquery-tentest.min.js"); // Connect the latest version of the JQuery $ Doc-\u003e Addscript library (Juri :: Base (). "/ templates /".$ this-\u003e template." / js / menu-collapsed.js "); // Connect the menu script, in this case, is this option 1?\u003e
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!
C SwMenuFree 8 You can quickly create a drop-down or pop-up menu for Joomla all versions, including Joomla 3 and 2.5 using MyGosu, Trans, or Superfish system menu.
Features:
- The interface allows an infinite design of the module without knowing CSS
- True Type font to integrate the highest and submenu items using easy to get Cufon font files
- Independent Angle Styles for each angle Full top menu and submenu.
- Extended menu of the menu function The menu is possible to automatically create all the menu of structures from the content (Content only menus), or too automatically add content items as the menu items of the existing categories (Hybrid Menu). This unique menu and Content Integration system allows you to independently make a menu that automatically updates the addition of content. Virtuemart Integation is also supported.
- Creating and exporting an external style sheet and edit it manually for unlimited laying capabilities.
- The active menu feature will automatically keep in the top menu designated part of the site is not considered.
- Live Preview to see changes, as they are manufactured, as well as a complete view to view all Module menus.
- Integrated updates / fixes of the object makes it easily improved future versions of SWMenuFree without losing settings.
- Currently has 12 transfers to the administration component.
Development of applications for mobile platforms. Creating applications for iPhone, iPad, as well as for mobile phones (and tablets) running Android and WP7 DeV-IQ
swMenuFree8.0 works on all versions of Joomla Joomla 2.5 and 3.
- Added new lush corners JS and better compatibility angles and borders
- Built-in editor and module for Joomla Media Manager in the interface
- Added background repeat and position options for all background images.
- Updating the database in the kernel code for better performance and scalability in the future
- Added tablet / Mobile Friendly Parameter to make a menu of work on mobile devices.
- a more submenu indicator parameters plus many more fixes, CSS and JavaScript.
If your current SwMenuFree works well, then there is no need to upgrade.
This update works better, as the new installation. However, it will update the existing SwMenuFree if you are uploaded to "SWMENUFREE updates", page However, you need to update the browser window, while on this page several times to ensure that the settings are copied to the new database structure. You will also have, most likely, edit the menu after the update.
