A variation of joomlart’s ja_purity template with resizable header and horizontal submenu

Update 2010 July 6: I’m still getting a few hits on this and I apologize to everyone who may have gotten headaches trying to make this work. This procedure provided a good solution for me at the time but there are much easier ways to achieve the dropdown menu, which can be found in the joomla documentation.

All below is from the original post.

I made a template which is basically a copy of ja_purity with a modified header and support for the submenu which I described in earlier posts. I’m still new at this so I’m sure there will be some problems and I want to hear about them so, please tell me.

Download bnmng_ja_purity_1_0.zip

In addition to standard ja_purity features:
Header images can be of a different size than the original images.
Entire header can be resized to match taller or shorter header images.
Mask can turned on or off on left and right side independently.
Logo text can be displayed with logo image.
Horizontal Submenu’s can be added by creating the menus. You don’t have to alter the index or css.

Notes:
I removed some of the choices for the template width.
You should know the height and width of your header and logo images

To install, put the bnmng_ja_purity folder in your templates directory, than put the language files (not the folders that they are in) in the appropriate folder. The name of the folder that the zipped language files are in tells you where they should go.

To create horizontal submenus, create a new Joomla menu to represent each submenu. Using module manager, set the position of each horizontal submenu to “subhornav” and set the menu assignment for each to display when the appropriate menu item from the parent horizontal menu is selected. Remember that the horizontal submenus are actually individual menus.

The ja_purity template on which I based my version was made by joomlart.

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.