1. Menus with Sublevel links can be displayed in various ways. In these examples, there is a parent menu item called "Joomla! Overview", which has 3 sublevel items:

-- What's New in 1.5
-- FAQ
-- More about Joomla!

2. Dropdown menu: A popular display of sublevel menu items is the dropdown. When the user moves their mouse over (or clicks on) the menu item, a list of sublevel items appears in a list below it:

3. Vertical menu: Another way of displaying sublevel items is to indent them below the parent item:

4. The Split Menu System does not show the sublevel items on the same menu as the parent item, it displays a second menu when the user clicks on and goes to the parent item's page:

5. To configure a Split Menu System:

a. Go to the Module Manager (Extensions -> Module Manager).

b. Open the module for the menu.

c. In the Parameters section on the right side of the screen, keep the Start Level at 0, but change the End Level to 1. Now the menu will display only the first level of menu items. The sublevel items (level 2) will not show on the menu. Save the changes and go back to the Module Manager.

d. Create a new menu module for the split menu:

i. Click on the New icon.

ii. Select Menu as the module type.

iii. On the right side of the screen, under Menu Name, select the same menu as in step 3 above.

iv. Set the Start Level at 1, and the End Level at 1 or more.

e. Go to the front page of the website. Notice that when you mouseover the "Joomla! Overview" link, it no longer shows the dropdown of the sublevel items.

f. Click on the "Joomla! Overview" link. The "Joomla! Overview" link shows the sublevel menu items in the split menu module:

Watch the Video:

Permalink
Embed Code
Rating: 2.5 (125 Votes)
View Video
Category: Administration
Demonstration and configuration of Joomla's split menu system

iPhone Video:

iphone

4 Comments Feed

  1. Thanks for this good tutorial.
    Is it possible that the title of the sublevel items menu shows the name of the link which was klicked on the main menu? Referring to your last picture, the title of the submenu should be "Joomla! Overview", and not "Menu Module".
    This would be really cool!
  2. Thank you for your comments and question.

    The name of the link which was click on the main menu is shown as an active link on the main menu. On the example, "Joomla Overview" has a white background which shows that it is the parent link and this link will remain in the active state upon clicking any of its submenus.

    The "Menu Module" above the submenu is the module title -- you make a good point in saying this should be named with the parent link! :-)
  3. Thank you so much for a great tutorial.

    I'm a Joomla beginner. I like your tutorials because they are very easy to understand.

    I tried to do and followed step by step but sublevel items didn't show in the split menu module on the left of the website and the sublevel still show in every parent menu items.

    I'm not sure that it depand on the template (I use free joomla template) or I did some mistakes??

    Thanks again for sharing good Joomla lessons.
  4. (1) Check that the template you are using has a position called "left". Each template can have different names of module positions. (2) Check that the menu module for the splitmenu's position is set to "left", that "Enabled" is set to "Yes" and "Menu Assignment -> Menus" is set to "All". (3) Check that you have the Start Levels and End Levels set correctly for both the main menu module and the split menu module. (4) If all of the above look correct, please contact us: http://iteachme.com/contact

Add Comment


    • >:o
    • :-[
    • :'(
    • :-(
    • :-D
    • :-*
    • :-)
    • :P
    • :\
    • 8-)
    • ;-)

     

    Rate This:

    3235 Votes

    Share This:

    Save This:

    Sign in to save this to your Favorites.

    WEB HOST: Hostgator

    Hostgator: Unlimited Space and Bandwidth

    Use our coupon to
    Get a $9.94 discount on packages!
    COUPON CODE: learnjoomla

    WEB HOST: ImageLeet

    VideoHosting (FFmpeg) From $5.95

    iTeachMe uses ImageLeet! 100% compatible with Joomla and video component hwdMediaShare

    TEMPLATE CLUBS

    Professional  Joomla Templates Club