0
Welcome Guest! Login
0 items Join Now

Gantry 5 Mega Menu techniques in Joomla

Last Post
Search Topic
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Gantry 5 Mega Menu techniques in Joomla

    Posted 5 years 6 months ago
    • One thing that comes up fairly frequently in the Gantry 5 forums is the desire to have a mega menu that just doesn't seem possible using the Gantry 5 menu editor. I will show you some techniques below that can be very useful when building a Mega Menu.

      I am going to use the Salient template here for the purposes of demonstration but you can use any of the Gantry 5 templates. In addition to the menu provided in the Salient template I have added one more menu called "Test Menu" - here are screenshot of the two menus:

      This image is hidden for guests.
      Please log in or register to see it.


      This image is hidden for guests.
      Please log in or register to see it.



      The basic techniques

      There are three basic techniques that you need to know how to use:

      1. Using Joomla's "loadposition" command - see docs here
      2. Using Gantry 5 responsive grids - see docs here

      3. Using Bootstrap tabs - see docs here

      I am not going to teach those techniques here - read the documentation above to make sure you know how to use them.


      The Menu

      The simplest way of maintaining menus is in Joomla's Menu manager. So that's where you can set up all the menus that you require. Then, the simplest way of displaying a menu (in a single column) is to use a Joomla "menu" module. The output from such a menu module looks like this:

      This image is hidden for guests.
      Please log in or register to see it.


      So you can see that the Joomla Menu module has already done a pretty nice job of formatting the menu.

      The menu modules that show them are assigned to tab-1-col-1 and tab-2-col-2.


      Using the Menus to create a basic "Mega Menu"

      As we want to use the menu module and add other things to it (like other menus) we need to embed that menu module inside a customhtml module using Joomla's loadposition. Also, we want to make sure that those two menu work responsively so that's where we use the second technique of Gantry 5 responsive grids - so I can get my two menu's to show like this in one module.

      This image is hidden for guests.
      Please log in or register to see it.


      The code to implement the above is really straightforward
      <div class="g-grid">
    <div class="g-block size-50">{loadposition tab-1-col-1}</div>
    <div class="g-block size-50">{loadposition tab-1-col-2}</div>
</div>

      You can easily add other elements such as image, text, big headings, etc to that structure.


      A "Mega Mega Menu"

      You may want to have even more complicated multi "page" "mega menus", for that we can use bootstrap tabs that will look like this:

      This image is hidden for guests.
      Please log in or register to see it.


      The code for that would look like this:
      <!-- Nav pills -->
<ul class="nav nav-pills">
    <li class="active">
        <a href="#ttab-1" data-toggle="tab">Tab 1</a>
    </li>
    <li>
        <a href="#ttab-2" data-toggle="tab">Tab 2</a>
    </li>
    <li>
        <a href="#ttab-3" data-toggle="tab">Tab 3</a>
    </li>
</ul>
<!-- Tab panes -->
<div class="tab-content well">
    <div class="tab-pane active" id="ttab-1">
        <div class="g-grid">
            <div class="g-block size-50">{loadposition tab-1-col-1}</div>
            <div class="g-block size-50">{loadposition tab-1-col-2}</div>
        </div>
    </div>
    <div class="tab-pane" id="ttab-2">Content 2</div>
    <div class="tab-pane" id="ttab-3">Content 3</div>
</div>

      Or use a sidetab instead and the code for that would be:
      <div class="g-grid">
    <div class="g-block size-10">
        <!-- Nav pills -->
        <ul class="nav nav-pills nav-stacked">
            <li class="active">
                <a href="#tab-1" data-toggle="tab">Tab 1</a>
            </li>
            <li>
                <a href="#tab-2" data-toggle="tab">Tab 2</a>
            </li>
            <li>
                <a href="#tab-3" data-toggle="tab">Tab 3</a>
            </li>
        </ul>
    </div>
    <div class="g-block size-90">
        <!-- Tab panes -->
        <div class="tab-content well">
            <div class="tab-pane active" id="tab-1">
                <div class="g-grid">
                    <div class="g-block size-50">{loadposition tab-1-col-1}</div>
                    <div class="g-block size-50">{loadposition tab-1-col-2}</div>
                </div>
            </div>
            <div class="tab-pane" id="tab-2">Content 2</div>
            <div class="tab-pane" id="tab-3">Content 3</div>
        </div>
    </div>
</div>

      So hopefully from the above you will see that you can make some pretty complicated mega menus uysing those techniques.


      But I want that to appear in my main menu - you can :)

      Ok the final step... Many of you will want to put that mega menu you have created as part of the main menu... well you can. Use the Gantry 5 menu editor and you can insert the customhtml module containing your mega menu at any point in your main menu.


      Things to be aware of...

      1. You might need to break your menu up into smaller bite-sized menus if you need to insert other things between the parts (like images).
      2. There is a bug in Gantry 5 menu editor that stops you adding a module as child of a main level menu item if that menu item itself has no other children - see https://github.com/gantry/gantry5/issues/2384
      3. Although the menu's work responsively there is not "mobile" equivalents to your menu (modules do not appear in the mobile version of the Gantry 5 menu) - so for this reason I would not put your mega menu's in the menu itself but rather in a section on your layout (which can be the "offcanvas" section).


      Good luck with your mega menu's.


      Regards, Mark.
    • Last Edit: 5 years 6 months ago by MrT.

    • The following users have thanked you: David Goode, Paula Livingstone

    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #1394514

  • Re: Gantry 5 Mega Menu techniques in Joomla

    Posted 5 years 5 months ago
    • Very useful. Thanks Mark
    • Do'er of stuff
    #1396141

Time to create page: 0.055 seconds