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

Answer 1

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