How to add "first" and "last" CSS classes to mod_menu?

Everything to do with Joomla! 2.5 templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
tomkilbourn
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 238
Joined: Sat Nov 29, 2008 11:42 am

How to add "first" and "last" CSS classes to mod_menu?

Postby tomkilbourn » Fri Feb 18, 2011 9:22 pm

Hello in Joomla 1.5 there was code available to add to the mod_mainmenu default.php file to allow for css styling of the First and Last items in a menu list.

Is there a similar or equivalent method for Joomla 1.6? I need to give my horizontal nav bar different first and last styles. Has anyone else had this issue?

The code for 1.5 was this -

Code: Select all

 //NEW CODE STARTS HERE
   $children_count = count($node->children());
   $children_index = 0;
   foreach ($node->children() as $child) {
      if ($children_index == 0) {
         $child->addAttribute('class', 'first');
      }
      if ($children_index == $children_count - 1) {
         $child->addAttribute('class', 'last');
      }
      $children_index++;
   }
        //ENDS HERE

ronnyp
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Sat Jul 19, 2008 9:16 pm

Re: How to add "first" and "last" CSS classes to mod_menu?

Postby ronnyp » Thu Mar 17, 2011 2:37 pm

Hello,

Have you found a solution for this problem? I've exactly the same problem.
Is there anybody who can help us?

Thanks

dansoper
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Tue Mar 29, 2011 6:53 am

Re: How to add "first" and "last" CSS classes to mod_menu?

Postby dansoper » Tue Mar 29, 2011 7:27 am

I think I've managed to do this in Joomla 1.6 as follows:

Copy /modules/mod_menu/tmpl/default.php to /templates/MYTEMPLATE/html/mod_menu/default.php

Around line 34, find:

Code: Select all

   if ($item->deeper) {
      $class .= 'deeper ';
   }


Replace this with:

Code: Select all

   $currentitemcount ++;
   if ($item->shallower or $currentitemcount == count($list)) {
      $class .= 'last ';
   }
   
   if ($lastdeeper or $currentitemcount == 1) {
      $class .= 'first ';
   }
   
   
   if ($item->deeper) {
      $class .= 'deeper ';
      $lastdeeper = true;
   } else {
      $lastdeeper = false;   
   }

User avatar
VipArt
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 114
Joined: Thu Nov 24, 2005 1:05 pm
Location: Vilnius, Lithuania
Contact:

Re: How to add "first" and "last" CSS classes to mod_menu?

Postby VipArt » Fri Sep 23, 2011 6:14 pm

Thank you very much!

realityking
Joomla! Explorer
Joomla! Explorer
Posts: 428
Joined: Fri May 21, 2010 11:43 am
Location: Aachen, Germany
Contact:

Re: How to add "first" and "last" CSS classes to mod_menu?

Postby realityking » Sat Sep 24, 2011 9:28 pm

You don't really need a first class. Just use the :first-child CSS pseudo element which is supported in every browser since IE7.

If the effect is not very important and/or you don't have a lot of IE users you could also use :last-child.

User avatar
Deldadam
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Sun Jan 23, 2011 12:16 pm

Re: How to add "first" and "last" CSS classes to mod_menu?

Postby Deldadam » Fri Oct 21, 2011 11:52 pm

Hi,

The above code isn't correct. Consider the following menu structure:

Level1_1 --- Level1_2 --- Level1_3 --- Level1_4
***** Manual signatures are NOT allowed ***** Level2_1
***** Manual signatures are NOT allowed ***** Level2_2
***** Manual signatures are NOT allowed ***** Level2_3
***** Manual signatures are NOT allowed ***** Level2_4 -> Level3_1
***** Manual signatures are NOT allowed ***** Level3_2[/quote]

The problem is with Level2_4: it is the last item on level 2, but it has childrens on level 3. Your code will not add the 'last' class for Level2_4 menu item.

If you investigate the code of default.php from mod_menu, you'll find this in line #68:

Code: Select all

   else if ($item->shallower) {
      echo '</li>';
      echo str_repeat('</ul></li>', $item->level_diff);
   }


The trick is in str_repeat function: </ul></li> will be output twice - because when the code (foreach) reaches the item Level3_2 it will close the li element of item Level3_2, the ul element of level 3 AND the last li item on level2 + the ul item of level2. (Comprende? :D) The reason: the value of $item->level_diff = 2 when Level3_2 item is on the output.
(Just var_dump the $list object, and you'll see the value of level_diff variable will be 2 for the Level3_2 menu item.)

The above code inside the foreach cycle will reach this condition...

Code: Select all

if ($item->shallower or $currentitemcount == count($list)) {
      $class .= 'last ';
   }


... in the NEXT cycle, when it is too late to discover that we had have already got a 'last item' (on level2) 2 items before the actual menu item (Level3_2).

I hope it was clear.

Ciao.

w9914420
Joomla! Apprentice
Joomla! Apprentice
Posts: 27
Joined: Tue Oct 23, 2007 10:58 pm

Re: How to add "first" and "last" CSS classes to mod_menu?

Postby w9914420 » Sat Oct 22, 2011 1:51 pm

Thanks for this ;)

Out of curiosity would it be also possible to add "level" classes for each level of lists generated for example:

Code: Select all

<ul id="sitemap">
<li class="level 1">Weblog</li>
<li class="level 1">Articles
   <ul>
   <li class="level 2">How to Beat the Red Sox</li>
   <li class="level 2">Pitching Past the 7th Inning
      <ul>
      <li class="level 3">Part I</li>
      <li class="level 3">Part II</li>
      </ul>
   </li>
   <li class="level 2">Eighty-Five Years Isn't All That Long, Really</li>
   </ul>
</li>
<li class="level 1">About</li>
</ul>


adding a level class would help to style differently these elements.

regards

w9914420

realityking
Joomla! Explorer
Joomla! Explorer
Posts: 428
Joined: Fri May 21, 2010 11:43 am
Location: Aachen, Germany
Contact:

Re: How to add "first" and "last" CSS classes to mod_menu?

Postby realityking » Sat Oct 22, 2011 3:21 pm

w9914420 wrote:Out of curiosity would it be also possible to add "level" classes for each level of lists generated for example:


Why? This can be easily done via CSS 2.1 (IE7 and up).

Code: Select all

/* Level 1 */
.menu > li {

}

/* Level 2 */
.menu > ul > li {

}

/* Level 3 */
.menu > ul > ul > li {

}


The advantage is that you don't need to add more classes.

w9914420
Joomla! Apprentice
Joomla! Apprentice
Posts: 27
Joined: Tue Oct 23, 2007 10:58 pm

Re: How to add "first" and "last" CSS classes to mod_menu?

Postby w9914420 » Sat Oct 22, 2011 9:56 pm

Hi King,
Thanks for the input, In this instance I am more interested on learning how to manipulate the code in mod_menu since i am trying to get my head around the framework and I would like like to know how to generate such output in PHP,

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 21434
Joined: Mon Oct 27, 2008 9:27 pm
Location: Akershus, Norway

Re: How to add "first" and "last" CSS classes to mod_menu?

Postby Per Yngve Berg » Sun Oct 23, 2011 9:56 am


w9914420
Joomla! Apprentice
Joomla! Apprentice
Posts: 27
Joined: Tue Oct 23, 2007 10:58 pm

Re: How to add "first" and "last" CSS classes to mod_menu?

Postby w9914420 » Sun Oct 23, 2011 7:45 pm

Hello Per Yngve,

No need to give the link to overriding joomla core, you will notice that this whole thread is just that. What i was asking for was at least a step or a possible solution to what I was looking for. the whole point of the 'level' class was to reduce inheritance issues in my css. In my situation the added class would give me a lot more stying possibilities. In fact if you have a look at some of the popular template providers for joomla and take a look at the html generated in their main navigation you may understand better to why it can be better.

My whole point is to understand php and framework syntax I hope I am a bit more clear.

thanks

w9914420

p.s spread the word!

User avatar
Deldadam
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Sun Jan 23, 2011 12:16 pm

Re: How to add "first" and "last" CSS classes to mod_menu?

Postby Deldadam » Mon Oct 24, 2011 7:03 am

Hi w99,

Copy the <joomla:_install>\modules\mod_menu\tmpl\default.php file to <your_template>\html\mod_menu\default.php

Open the copied file with your lovely text editor, and search for this (line nr. 44):

Code: Select all

   if (!empty($class)) {
      $class = ' class="'.trim($class) .'"';
   }

Add the following code BEFORE the previous code snippet:

Code: Select all

  if ($item->level) {
      $class .= ' level-' . $item->level;
   }

You'll get the level nr. in the class name of each li item in your menu.

Bye,

w9914420
Joomla! Apprentice
Joomla! Apprentice
Posts: 27
Joined: Tue Oct 23, 2007 10:58 pm

Re: How to add "first" and "last" CSS classes to mod_menu?

Postby w9914420 » Mon Oct 31, 2011 12:43 pm

Hi Deldadam,

Thank you very much for your input, i see that you use the item-level var and called it in the class.

8)

ty_typhoon
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Thu Oct 07, 2010 3:22 am

Re: How to add "first" and "last" CSS classes to mod_menu?

Postby ty_typhoon » Thu Nov 24, 2011 2:34 am

Hey,
Here is what I do.

in helper.php
before the loop add

Code: Select all

$lastparent = array();


Inside the loop, before "$item->parent = (boolean) $menu->getItems('parent_id', (int) $item->id, true);" add

Code: Select all

if(isset($items[$lastitem])){
   if($items[$lastitem]->deeper){
      $lastparent[] = $lastitem;   
   }
   if(isset($lastparent[count($lastparent)-1])){
      if($items[$lastparent[count($lastparent)-1]]->level == $item->level){
              unset($lastparent[count($lastparent)-1]);
              $lastparent=array_merge(array(),$lastparent);
           }
           elseif($items[$lastparent[count($lastparent)-1]]->level > $item->level){
               $items[$lastparent[count($lastparent)-1]]->lastparent = 1;
           }
           if($i==count($items)-1){
              foreach($lastparent as $lastparentitem){
                      $items[$lastparentitem]-> lastparent = 1;
                   }
           }
   }
}


This can fix the "Last parent lose class 'last' " issue.
don't forget to use $items[$lastparentitem]-> lastparent attribute in default.php

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 21434
Joined: Mon Oct 27, 2008 9:27 pm
Location: Akershus, Norway

Re: How to add "first" and "last" CSS classes to mod_menu?

Postby Per Yngve Berg » Thu Nov 24, 2011 4:01 pm

With css3 you can also pick the first and last menu item with:

li:first-of-type, li:last-of-type {... }

huntkey
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Tue Jul 14, 2009 7:35 am
Location: HCM, VietNam
Contact:

Re: How to add "first" and "last" CSS classes to mod_menu?

Postby huntkey » Sat Jan 14, 2012 9:24 am

We can use css3 to control the style of the first and last menu item.

But if you really want to add the 'first' & 'last' classes into the menu items, try the below code.

At the top of default.php file

Code: Select all

// No direct access.
defined('_JEXEC') or die;
//get the last item of the level 1 menu
$last_level_one_id = 0;
for($j=count($list)-1; $j>0; $j--){
   if($list[$j]->level == 1){
      $last_level_one_id = $list[$j]->id;
      break;
   }
}

$first_start = true;//using for the first of the level 1 menu and the submenu
?>


In the foreach loop:

Code: Select all

   ..............
   if ($item->parent) {
      $class .= ' parent';
   }
   ///start hack
   if($first_start){
      $class .= ' first';
      $first_start = false;
   }else if ($item->shallower || $item->id == $last_level_one_id ) {
      $class .= ' last';
   }

   if ($item->deeper) {
      $class .= ' deeper';
      $first_start = true;
   }
   ///end hack
   if (!empty($class)) {
      $class = ' class="'.trim($class) .'"';
   }
   ..............


It works fine even the last level 1 menu item has a submenu.
Please read forum rules regarding signatures: viewtopic.php?t=65

w9914420
Joomla! Apprentice
Joomla! Apprentice
Posts: 27
Joined: Tue Oct 23, 2007 10:58 pm

Re: How to add "first" and "last" CSS classes to mod_menu?

Postby w9914420 » Sun Jan 29, 2012 12:36 pm

Hi huntkey,

Your example for me does not seem to work as good as the other examples. I do not see any class last on the submenus using your example.

huntkey
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Tue Jul 14, 2009 7:35 am
Location: HCM, VietNam
Contact:

Re: How to add "first" and "last" CSS classes to mod_menu?

Postby huntkey » Sun Jan 29, 2012 1:09 pm

Hi w9914420,
If you see any other codes are good for you, just use it.

And, could you show me the /templates/your-template/html/mod_menu/default.php file?
Please read forum rules regarding signatures: viewtopic.php?t=65

w9914420
Joomla! Apprentice
Joomla! Apprentice
Posts: 27
Joined: Tue Oct 23, 2007 10:58 pm

Re: How to add "first" and "last" CSS classes to mod_menu?

Postby w9914420 » Sun Jan 29, 2012 1:21 pm

Hi Huntkey,

Sorry about that I should of posted my code.

Code: Select all

<?php
/**
 * @version      $Id: default.php 20983 2011-03-17 16:19:45Z chdemko $
 * @package      Joomla.Site
 * @subpackage   mod_menu
 * @copyright   Copyright (C) 2005 - 2011 Open Source Matters, Inc. All rights reserved.
 * @license      GNU General Public License version 2 or later; see LICENSE.txt
 */

// No direct access.
defined('_JEXEC') or die;

// Note. It is important to remove spaces between elements.
?>

<ul class="menu<?php echo $class_sfx;?>"<?php
   $tag = '';
   if ($params->get('tag_id')!=NULL) {
      $tag = $params->get('tag_id').'';
      echo ' id="'.$tag.'"';
   
   }
   
?>>
<?php
foreach ($list as $i => &$item) :
   $id = '';
   if ($item->id == $active_id) {
      $id = ' id="current"';
   }

   if (   $item->type == 'alias' &&
         in_array($item->params->get('aliasoptions'),$path)
      ||   in_array($item->id, $path)) {
     $class .= 'selected ';
    
   }
$currentitemcount ++;
   if ($item->shallower or $currentitemcount == count($list)) {
      $class .= 'last ';
   }
 
   
   if ($lastdeeper or $currentitemcount == 1) {
      $class .= 'first ';
   }
   
   
   if ($item->deeper) {
      $class .= 'deeper ';
      $lastdeeper = true;
   } else {
      $lastdeeper = false;   
   }
   if ($item->parent) {
      $class .= 'parent ';
   }
    if ($item->level) {
      $class .= ' level-' . $item->level;
   }
   if (!empty($class)) {
         $class = ' class="item-'.$item->id.' '.$class.'"';

   }

   

   echo '<li'.$id.$class.'>';

   // Render the menu item.
   switch ($item->type) :
      case 'separator':
      case 'url':
      case 'component':
         require JModuleHelper::getLayoutPath('mod_menu', 'default_'.$item->type);
         break;

      default:
         require JModuleHelper::getLayoutPath('mod_menu', 'default_url');
         break;
   endswitch;

   // The next item is deeper.
   if ($item->deeper) {
      echo '<ul class="deeper level-'. ++$item->level.'">';
   }
   // The next item is shallower.
   else if ($item->shallower) {
      echo '</li>';
      echo str_repeat('</ul></li>', $item->level_diff);
   }
   else if ($item->shallower or $currentitemcount == count($list)) {
      $class .= 'last ';
   }
   // The next item is on the same level.
   else {
      echo '</li>';
   }
endforeach;
?></ul>


This code seems to work ok apart from two things.

1. I can not put a 'last' class on parent li items.
2. current ID seems to work on only sub menus an not on the main menu

w9914420
Joomla! Apprentice
Joomla! Apprentice
Posts: 27
Joined: Tue Oct 23, 2007 10:58 pm

Re: How to add "first" and "last" CSS classes to mod_menu?

Postby w9914420 » Sun Jan 29, 2012 1:27 pm

I think Deldadam does explain the problem of the first question but I am not sure how I can modify the code to put the last class on parent list items.

Just need to sort these two minor issues and it's sorted, would be gratefull for any ideas, tips or suggestions. 8)

regards w9914420 ;)

huntkey
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Tue Jul 14, 2009 7:35 am
Location: HCM, VietNam
Contact:

Re: How to add "first" and "last" CSS classes to mod_menu?

Postby huntkey » Sun Jan 29, 2012 1:39 pm

@w9914420
I mention the code I posted and want to know how did you use it. Try to apply my code and check again :). If it still goes wrong, show me the default.php file you have just modified.

The current code you are using doesn't work for me in case the menu has submenus, because the count($list) condition just works fine if there is no any submenus.
Please read forum rules regarding signatures: viewtopic.php?t=65

w9914420
Joomla! Apprentice
Joomla! Apprentice
Posts: 27
Joined: Tue Oct 23, 2007 10:58 pm

Re: How to add "first" and "last" CSS classes to mod_menu?

Postby w9914420 » Sun Jan 29, 2012 2:07 pm

Hi huntkey,

I have applied your code as in the following:

Code: Select all

<?php
/**
 * @version      $Id: default.php 20983 2011-03-17 16:19:45Z chdemko $
 * @package      Joomla.Site
 * @subpackage   mod_menu
 * @copyright   Copyright (C) 2005 - 2011 Open Source Matters, Inc. All rights reserved.
 * @license      GNU General Public License version 2 or later; see LICENSE.txt
 */

// No direct access.
// No direct access.
defined('_JEXEC') or die;
//get the last item of the level 1 menu
$last_level_one_id = 0;
for($j=count($list)-1; $j>0; $j--){
   if($list[$j]->level == 1){
      $last_level_one_id = $list[$j]->id;
      break;
   }
}

$first_start = true;//using for the first of the level 1 menu and the submenu
?>

<ul class="menu<?php echo $class_sfx;?>"<?php
   $tag = '';
   if ($params->get('tag_id')!=NULL) {
      $tag = $params->get('tag_id').'';
      echo ' id="'.$tag.'"';
   
   }
   
?>>
<?php
foreach ($list as $i => &$item) :
   $id = '';
   if ($item->id == $active_id) {
      $id = ' id="current"';
   }

   if (   $item->type == 'alias' &&
         in_array($item->params->get('aliasoptions'),$path)
      ||   in_array($item->id, $path)) {
     $class .= 'selected ';
    
   }
$currentitemcount ++;
   if ($item->shallower or $currentitemcount == count($list)) {
      $class .= 'last ';
   }
 
   
   if ($lastdeeper or $currentitemcount == 1) {
      $class .= 'first ';
   }
   
   
   if ($item->deeper) {
      $class .= 'deeper ';
      $lastdeeper = true;
   } else {
      $lastdeeper = false;   
   }
   if ($item->parent) {
      $class .= 'parent ';
   }
   ///start hack
   if($first_start){
      $class .= ' first';
      $first_start = false;
   }else if ($item->shallower || $item->id == $last_level_one_id ) {
      $class .= ' last';
   }

   if ($item->deeper) {
      $class .= ' deeper';
      $first_start = true;
   }
   ///end hack
    if ($item->level) {
      $class .= ' level-' . $item->level;
   }
   if (!empty($class)) {
         $class = ' class="item-'.$item->id.' '.$class.'"';

   }

   

   echo '<li'.$id.$class.'>';

   // Render the menu item.
   switch ($item->type) :
      case 'separator':
      case 'url':
      case 'component':
         require JModuleHelper::getLayoutPath('mod_menu', 'default_'.$item->type);
         break;

      default:
         require JModuleHelper::getLayoutPath('mod_menu', 'default_url');
         break;
   endswitch;

   // The next item is deeper.
   if ($item->deeper) {
      echo '<ul class="deeper level-'. ++$item->level.'">';
   }
   // The next item is shallower.
   else if ($item->shallower) {
      echo '</li>';
      echo str_repeat('</ul></li>', $item->level_diff);
   }
   else if ($item->shallower or $currentitemcount == count($list)) {
      $class .= 'last ';
   }
   // The next item is on the same level.
   else {
      echo '</li>';
   }
endforeach;
?></ul>


Again this is not working for me and seems to be duplicating the 'last' and 'first' classes. again on parent list items that have un-order lists you code does not seem to had a 'last' class to these specific elements.

do you see any errors in the code.

regards

w9914420

w9914420
Joomla! Apprentice
Joomla! Apprentice
Posts: 27
Joined: Tue Oct 23, 2007 10:58 pm

Re: How to add "first" and "last" CSS classes to mod_menu?

Postby w9914420 » Sun Jan 29, 2012 2:09 pm

I know that i have duplicated some of the conditions but the effect is still the same when they are removed.

huntkey
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Tue Jul 14, 2009 7:35 am
Location: HCM, VietNam
Contact:

Re: How to add "first" and "last" CSS classes to mod_menu?

Postby huntkey » Sun Jan 29, 2012 2:15 pm

You should copy the original file
/modules/mod_menu/tmpl/default.php
to
/templates/your-template/html/mod_menu/

and then modify it.
Please read forum rules regarding signatures: viewtopic.php?t=65

w9914420
Joomla! Apprentice
Joomla! Apprentice
Posts: 27
Joined: Tue Oct 23, 2007 10:58 pm

Re: How to add "first" and "last" CSS classes to mod_menu?

Postby w9914420 » Sun Jan 29, 2012 2:40 pm

Hi huntkey,

I have done exactly what you have asked, but I think its best to show you the output of the effect so that you know what I mean. In joomla 1.7 I have created a menu with two submenus, the output is below.

now within the first list element is an unordered list with two list elements

Code: Select all

<ul id="test" class="menu">
<li class="item-464 active deeper parent first deeper">
<a title="a really good time" href="/joomla/index.php?option=com_content&view=featured&Itemid=435">Home</a>
<ul>
<li class="item-469 current active deeper parent first deeper">
<li class="item-468 deeper parent deeper">
</ul>
</li>
</ul>



You will see that the first li element has the first class, but the second one should have the last class but fails to do so.

Code: Select all

<ul>
<li class="item-469 current active deeper parent first deeper">
<li class="item-468 deeper parent deeper">
</ul>


But your works fine if the element is just the list items and the parent of an unordered list ( as with the expansion of the deeper parent shows.

Code: Select all

<li class="item-468 deeper parent deeper">
<a href="/joomla/index.php?option=com_content&view=article&id=8&Itemid=468">
<ul>
<li class="item-473 first">
<li class="item-474 last">
</ul>
</li>


So in simply terms you code does work, but does not add a last class to parent li with ul's.

regards

w9914420 :geek:

huntkey
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Tue Jul 14, 2009 7:35 am
Location: HCM, VietNam
Contact:

Re: How to add "first" and "last" CSS classes to mod_menu?

Postby huntkey » Sun Jan 29, 2012 5:19 pm

Well, you are right! The bug occurs at the last items of level-N that has a submenu (N > 1).

Try to test the following code and use it if it works better :pop


Code: Select all

<?php
/**
 * @version      $Id: default.php 22355 2011-11-07 05:11:58Z github_bot $
 * @package      Joomla.Site
 * @subpackage   mod_menu
 * @copyright   Copyright (C) 2005 - 2011 Open Source Matters, Inc. All rights reserved.
 * @license      GNU General Public License version 2 or later; see LICENSE.txt
 */

// No direct access.
defined('_JEXEC') or die;

// Note. It is important to remove spaces between elements.
$last_items = array();//all last item IDs
for($j=count($list); $j>0; $j--){
   if(!isset($last_items[$list[$j]->parent_id])){
      $last_items[$list[$j]->parent_id] = $list[$j]->id;
   }
}

$first_start = true;//using for first item of level 1 menu and submenu
?>

<ul class="menu<?php echo $class_sfx;?>"<?php
   $tag = '';
   if ($params->get('tag_id')!=NULL) {
      $tag = $params->get('tag_id').'';
      echo ' id="'.$tag.'"';
   }
?>>
<?php
foreach ($list as $i => &$item) :
   $class = 'item-'.$item->id;
   if ($item->id == $active_id) {
      $class .= ' current';
   }

   if ( $item->type == 'alias' && in_array($item->params->get('aliasoptions'),$path) ||   in_array($item->id, $path)) {
      $class .= ' active';
   }

   if($first_start){
      $class .= ' first';
      $first_start = false;
   }else if(in_array($item->id, $last_items)){
      $class .= ' last';
   }

   if ($item->deeper) {
      $class .= ' deeper';
      $first_start = true;
   }

   if ($item->parent) {
      $class .= ' parent';
   }
   
   if (!empty($class)) {
      $class = ' class="'.trim($class) .'"';
   }

   echo '<li'.$class.'>';

   // Render the menu item.
   ..................................
Please read forum rules regarding signatures: viewtopic.php?t=65

w9914420
Joomla! Apprentice
Joomla! Apprentice
Posts: 27
Joined: Tue Oct 23, 2007 10:58 pm

Re: How to add "first" and "last" CSS classes to mod_menu?

Postby w9914420 » Tue Jan 31, 2012 6:49 pm

Hi Huntkey,

Thanks very much for this code, Im just testing it at the moment but ill back to you on this.

regards


w9914420

w9914420
Joomla! Apprentice
Joomla! Apprentice
Posts: 27
Joined: Tue Oct 23, 2007 10:58 pm

Re: How to add "first" and "last" CSS classes to mod_menu?

Postby w9914420 » Sun Feb 05, 2012 4:13 pm

Hi Hunt-Key,

I have been testing your code, works very well and addresses the above issues.

Thanks again for your time, much appreciated.

w9914420 ;)

yeomos
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Thu Apr 12, 2012 4:26 pm

Re: How to add "first" and "last" CSS classes to mod_menu?

Postby yeomos » Thu Apr 12, 2012 4:32 pm

Thank you all for this.

I'm really new to Joomla and this actually helped me understand a lot more than it shows with the first look.

A special thanks to Huntkey for his code. Only one suggestion.

You might want to remove the "else" as an item can be both first and last...

Code: Select all

...
   if($first_start){
      $class .= ' first';
      $first_start = false;
   }
   
   if(in_array($item->id, $last_items)){
      $class .= ' last';
   }
...

w9914420
Joomla! Apprentice
Joomla! Apprentice
Posts: 27
Joined: Tue Oct 23, 2007 10:58 pm

Re: How to add "first" and "last" CSS classes to mod_menu?

Postby w9914420 » Sat Apr 14, 2012 9:32 am

Hi Yeomos,

Thats a true point it would be correct to add both the first and last class to a list item.

I did edit the php has stated but could not get the code to work. could you post your php file so that we can have a look.

regards

w9914420


Return to “Templates for Joomla! 2.5”

Who is online

Users browsing this forum: No registered users and 7 guests