Changing the class name of joomla top menu

Question

I am trying to create a joomla 2.5 template. I am using the following code in my index.php to display the top menu items.

 <?php if ($this->countModules('topmenu')): ?>    
  <hr>
  <div class="container">
     <jdoc:include type="modules" name="topmenu"/>
  </div>
<?php endif; ?>

The above code generates the following html

<ul class="menunav">
   <li class="item-464 active"><a href="/joomla2/" >Home</a></li>
   <li class="item-444"><a href="/joomla2/index.php/sample-sites" >Sample Sites</a>
   </li><li class="item-207"><a href="http://joomla.org" >Joomla.org</a></li>
</ul>

The problem is the class name that I have used for designing the top menu items is nav and the menu should work perfectly if I have the html like following

  <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Sample Sites</a></li>
      <li><a href="#">Joomla ORG</a></li>
  </ul>

I have heard about class suffix, but I am trying not to get it done from the the admin panel. Because every time a new user uses my template will have to add the class suffix from the admin panel.

I have tried the following code, but it is not changing anything:

<script type="text/javascript">
    $(document).ready(function() {
       $('.menunav').removeClass('menunav').addClass('nav');
    });
</script>

Could you please tell me how to change the top menu class name in joomla 2.5

Try this,It may work. jQuery(".menunav").addClass('nav'); jQuery(".nav").removeClass('menunav'); Both are same but try this too. — Jobin, Mar 01 '13 at 06:18
@JobinJose Thanks for your reply. I have tried your code. I also tried `var $j = jQuery.noConflict();` still not working :( — black_belt, Mar 01 '13 at 06:31
what do you mean by "every time a new user uses my template will have to add the class suffix from the admin panel." — Toretto, Mar 01 '13 at 06:45
@Toretto. I mean if you use my template , in order to make it work perfectly you have to add the class suffix from the admin panel. And every body has to do the same.. :) — black_belt, Mar 01 '13 at 06:52
I don't think so that every user need to enter the class suffix from the back end. — Toretto, Mar 01 '13 at 06:55
@black_belt when you try your code in firebug console what will be the out put means any js error ? — Jobin, Mar 01 '13 at 07:29
@Jobin Jose , I tried firebug and google chrome console, but I didn't find any js error. — black_belt, Mar 01 '13 at 07:35
@Jobin Jose and Torretto I have managed to make it work using the jquery but surprisingly when I am checking the html code using (Ctrl+U).. it is showing the old html.. But I don't have any problem as long as it is working for me :) — black_belt, Mar 01 '13 at 08:04

Marko D · Accepted Answer · 2013-03-01T08:40:34.723

First I made a wrong answer, you can check it bellow, it might be useful.

Now the real answer. You need to override default style of menu output. In your templates folder, create folder html, and inside create folder mod_menu. Now copy there default.php file from modules\mod_menu\tmpl.

Open the file and change line

<ul class="menu<?php echo $class_sfx;?>"

to

<ul class="nav".

Joomla will now use your override to render menu. This way you can override any Joomla output without changing the core files.

And now previous answer for creating custom module outputs, might be useful to someone:

You need to create new module chrome. In your template html folder, create file called modules.php.

Inside, make a function like this

defined('_JEXEC') or die;

function modChrome_nosfx($module, &$params, &$attribs)
{
    if (!empty ($module->content)) : ?>
        <div class="moduletable">
        <?php if ($module->showtitle != 0) : ?>
            <h3><?php echo $module->title; ?></h3>
        <?php endif; ?>
            <?php echo $module->content; ?>
        </div>
    <?php endif;
}

This way you can create custom module outputs.

Then, in your template file, include the module like this:

 <?php if ($this->countModules('topmenu')): ?>    
  <hr>
  <div class="container">
     <jdoc:include type="modules" name="topmenu" style="nosfx" />
  </div>
<?php endif; ?>

After adding style="nosfx" your new function will be used to render the module. The default style is xhtml, and you can find it's code in the templates/system/html folder in modules.php file

Thanks a lot for your answer. I am going to check it and give you a feedback. Thanks a lot again :) — black_belt, Mar 02 '13 at 10:12
@MarkoD I've tried this it worked but that extra classes adding to the all menus. How can I apply that only to the top navigation ? — Miuranga, Dec 19 '13 at 12:17

Changing the class name of joomla top menu

1 Answers1