Adding a Horizontal Submenu in Joomla’s JA Purity Template. [this post is outdated]

[Update: 2011 Sep 5: Very few people read this blog and yet I get a lot of hits on this post. It’s outdated, and wasn’t a good solution even when I wrote it. I’m only keeping it here as a record of things that I’ve written but please don’t waste any time following these instructions.]

[Update: 2010 Jun 6: Some of the folks hitting this post may be interested in my variation of ja_purity.]

The popular Joomla template JA Purity, which is included by default in new Joomla installations, has, theoretically, an easy-to-add suckerfish dropdown menu. But if you take a look at forums, you’ll see that a lot of people have trouble making it work.

Personally, I avoid dropdowns and other client side activity because I don’t trust that something that works fine on my laptop will work on other computers. I prefer letting the server do most of the work and trying real hard to limit the amount of work that has to be done. People developing in javascript or using cutting edge CSS really should have access to enough computers to test in Linux (or BSD), Windows, and Mac.

I also don’t like glitz, and I think dropdown menus are usually tacky.

For Virginia C.U.R.E.’s website, I added a bar under the horizontal menu.

[Update: 2010 Jun 6: At the request of the client, I added a drop-down menu to the website]

If you already have the horizontal menu working in JA Purity, and you understand enough php recognize a “block” of code, you should be able to add a submenubar below the horizontal menu as follows:

Open up index.php, which is in the ja-purity folder. There are two blocks of code which contain the word “hornav”. One block is around line 47 and the other is around line 145. My line numbers may be off because I’ve done some other messing around with my file. Copy each of these blocks and paste the copy right below. In the first copied block, replace “hornav” with “subhornav” and ja-sosdmenu.css with ja-sosdsubmenu.css. In the second copied block, replace “hornav” with “subhornav”, “mainnavwrap” with “subnavwrap”, and “mainnav” with “subnav”.

In your templateDetails.xml file, make a “subhornav” position line below the existing “hornav” position line.

Now, copy the file ja-sosdmenu.css to a new file called ja-sosdsubmenu.css. In ja-sosdsubmenu.css, look for all blocks with the word “sub” in them and delete them ( I don’t know if you have to do this, but you don’t need them and it might prevent some confusion later). Then do a global search and replace on the word “main” and replace it with the word “sub”. This is the css file that will control the way your submenu looks. In the block that starts with “#ja-subnav a {“, I changed “padding 10px 20px” to “padding 1px 20px”, and did the same in the block which starts with “#ja-subnav ul.menu li a {“. This made the submenubar thinner than the main menubar.

That’s all the coding that you need to do. The rest of the work is in the Joomla control panel.

Make a submenu for each menu item in your horizontal menu, even if that submenu only has one, blank menu item. You can use   for the title of the blank item, and the link can be to your home page. If you don’t have something there then the menu bar won’t display, and it doesn’t look good for the submenubar to appear and disappear as users click around.

For example, for the menu item About Virginia C.U.R.E. in the main horizontal menu, there is another menu called About Submenu, which contains items for Organizational Information, Chapters, and Board Members. For the Announcements, there is an Announcements submenu, which only contains one choice; the blank one.

For each new submenu, make a copy of the Main Menu module and associate the copy with the submenu. Edit the new module, and set the position of the module to “subhornav”. [Update (2010 April 11): travitzki linked to this post on a joomla forum but noted that you don’t need a new module for each submenu. ]

In the Menu Assignment section, choose the option labeled “Select Menu Item(s) from the List”, and select the appropriate menu items for which you want the particular submenu to appear. That will include the parent item from the main horizontal menu, and the siblings from the submenu. You have to keep up on this when you add new menu items.

That should do it. I only tested this on Virginia C.U.R.E.’s website, and I’ve done some other changes prior to this, so there may be some inconsistency between how this works on Virginia C.U.R.E.’s website and how it works on a new installation of JA Purity. If you comment about any trouble with this, I’ll try to help.

Advertisements
Previous Post
Leave a comment

12 Comments

  1. amaseam

     /  2010 January 20th

    Hello, I found your post searching for hints about submenus in JA purity, however the menus I am interested in are those on the side rather than the horizontal ones. On your Virginia CURE website you have submenu items for the menu item “Alternatives to imprisonment” on the left, and these submenu items are displayed only for pages relating to Alternatives to imprisonment (they’re hidden for pages relating to other parts). How do you achieve that? Best, /amaseam/

    Reply
  2. Kiran

     /  2010 January 27th

    Hi,

    I found your article very useful for setting submenu in JA Purity.

    Is there any way to set one menu item as parent for submenu, so that parent can be highlighted?
    I need to display the submenu items for non selected menus as dropdown, is it right to re-create submenu items again or can you suggest som other way to achieve it please?

    Thanks for any kind of help in advance.

    Best Regards,
    Kiran

    Reply
    • bnmng

       /  2010 January 27th

      Hello,

      I don’t completely understand the question but I’ll try to answer.

      Unfortunately, I haven’t figured out how to keep the parent item to show that it’s selected while the submenu items are clicked. Eventually, I will, but I’m pretty sure it will involve doing some php coding at the module level.

      When you select the menu items for which your submenu is to be visible, you have to check the submenu’s parent and the submenu’s siblings. But this method will show the same submenu items as each of its siblings are clicked. If you’re looking to have different submenu items displayed as you click through them, then you will have to create a different version of the submenu for each item.

      I hope that helps.

      Ben

      Reply
  3. Kiran

     /  2010 January 28th

    Hi there,

    Thanks for replying. In the main time i got the answer of my query. It was just a bit tricky in managing joomla menu items. Create menu items as its required

    Menu
    |—-Link1
    |—-Link2

    Then i created submenu’s the way you described but the menu items are just aliases of above menu items. For dropdown menu’s i used superfish menu module and it worked. Parent items are highlighted even if horizontal submenu item is clicked.

    Thanks much!

    Reply
    • bnmng

       /  2010 January 29th

      Kiran,

      Thank you for your note about how your parent item stays selected. I’ll see if I can adapt that to my system.

      v/r
      Ben

      Reply
  4. Nick

     /  2010 February 21st

    Hello,
    I found this addition very interesting and it was what i was searching for. But i have a problem. In this subhornav position under the top horizontal menu i wanted to put a horizontal scroller in order to add news etc. Actually the trick was to create the subhornav position and add the scroller there, but when i click in the submenu items of the top menu they are hidden behind the scroller, actually when i mouseover some of the top submenu items are hidden behind the scroller. So the question is if there is a trick to control the visibility of the top menu items to be above all, so when i mouseover all the menus and submenus to be visible…Actually the hornav position to be above the subhornav…

    Thanks in advance

    Reply
    • bnmng

       /  2010 February 21st

      Nick,
      I think you’ll have to add another position under subhornav for your scroller.

      Reply
      • Nick

         /  2010 February 25th

        Ok, thanks for the answer, actually i moved the scroller to be above the menu, the new custom position under subhornav shouldn’t do the trick because i have a lot of submenu items vertically, and the scroller could pose a problem also. I think in order to control the visibility was to make actually the scroller a menu item and put it in the last position of the order, but anyways i managed to find the solution…

  5. Eli

     /  2010 April 16th

    After a day of searching it think you have given me a start to what i want
    one question though – is there any way to make the sub menus show up when hovering over the main menu items?

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s