Defining a class within a menu item?

Discuss the development and implementation of Joomla! 1.0.x templates here.
Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
vavroom

Defining a class within a menu item?

Postby vavroom » Fri Sep 02, 2005 5:47 am

Ok, guys and gals, put your thinking caps on...  :)

I want to play a bit of a "fancy" CSS trick with my menu items.  I can achieve it through straight html/css, but am not sure how to implement it through Joomla!  Any thoughts would be greatly appreciated.  I want part of my link to show always, and part of the link to show only on mouse hover. 
Part of the html would be:

Code: Select all

<ul><li><a href="">Contact<span class="exp">Send us a note</span></a></li></ul>


Then part of the css would be:

Code: Select all

a .desc {
  display: none;
}

a:hover .desc {
  display: block;
}


Obviously putting the css in isn't a problem. 

The issue is when I add the bit in the menu item.  Joomla! parses the <> and replaces them with < and > ...

So the question to you is, do y'all have any idea how to either make it not parse, or make it happen?

Ta

User avatar
TomT
Joomla! Ace
Joomla! Ace
Posts: 1208
Joined: Thu Aug 18, 2005 5:50 am
Location: Amsterdam
Contact:

Re: Defining a class within a menu item?

Postby TomT » Sun Sep 04, 2005 5:59 pm

Do you use a wysiwig editor? I think if you switch if off there is no problem. Or is this to simple  :)?
When you do use an editor the editor writes the span. So actually, I don't see a problem, which makes me guess I don't understand you question correct?

vavroom

Re: Defining a class within a menu item?

Postby vavroom » Sun Sep 04, 2005 10:16 pm

The thing is, I'm not talking about *content*.  I can put any span/div/whatever I want through the content editor (I rarely use the wysiwyg for that matter, haven't found one that produces the kind of html I want to see).

No, I'm talking when creating menu items.

User avatar
TomT
Joomla! Ace
Joomla! Ace
Posts: 1208
Joined: Thu Aug 18, 2005 5:50 am
Location: Amsterdam
Contact:

Re: Defining a class within a menu item?

Postby TomT » Mon Sep 05, 2005 5:04 am

Oh sorry: I didn't read well  :-[. And i'm afraid that after reading again I still don't understand your question. Where do you want to add the ? In the mainmenu module or in the menu titles themselves? I tried the last and it worked fine.
Last edited by TomT on Mon Sep 05, 2005 5:12 am, edited 1 time in total.

vavroom

Re: Defining a class within a menu item?

Postby vavroom » Mon Sep 05, 2005 5:08 am

Hehehe Tom, I'm not about to throw the first stone... Something about glass houses ;)

User avatar
rcarver
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 204
Joined: Thu Aug 18, 2005 10:24 pm
Contact:

Re: Defining a class within a menu item?

Postby rcarver » Tue Sep 06, 2005 8:47 pm

Joomla will "escape" the menu item text all the time.  :)

I think the only way you can do this is to mod the menu module...  I'll try and dig through the menu code later and see if thats the case...
Randy Carver - carver-family.com

There are 10 types of people in this world.  Those that understand binary and those that don't.

vavroom

Re: Defining a class within a menu item?

Postby vavroom » Wed Sep 07, 2005 12:11 am

rcarver wrote:Joomla will "escape" the menu item text all the time.  :)


That was my impression, but somehow Tom got it to work without a problem...  No worries, I'll ask straight at the horse's mouth when I really need to implement this ;)

User avatar
rcarver
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 204
Joined: Thu Aug 18, 2005 10:24 pm
Contact:

Re: Defining a class within a menu item?

Postby rcarver » Wed Sep 07, 2005 2:46 am

Open Mouth... Insert Foot...

Just tested this.

Here's the output from my main menu:

Code: Select all

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr align="left"><td><a href="index.php?option=com_frontpage&Itemid=1" class="mainlevel" id="active_menu">Home</a></td></tr>

<tr align="left"><td><a href="index.php?option=com_content&task=view&id=5&Itemid=6" class="mainlevel" >Mambo License</a></td></tr>
<tr align="left"><td><a href="index.php?option=com_content&task=section&id=1&Itemid=2" class="mainlevel" >News</a></td></tr>
<tr align="left"><td><a href="index.php?option=com_content&task=blogsection&id=0&Itemid=9" class="mainlevel" >Blog</a></td></tr>
<tr align="left"><td><a href="index.php?option=com_weblinks&Itemid=23" class="mainlevel" >Links</a></td></tr>
<tr align="left"><td><a href="index.php?option=com_contact&Itemid=3" class="mainlevel" >Contact Us</a></td></tr>
<tr align="left"><td><a href="index.php?option=com_search&Itemid=5" class="mainlevel" >Search</a></td></tr>
<tr align="left"><td><a href="index.php?option=com_newsfeeds&Itemid=7" class="mainlevel" >News Feeds</a></td></tr>
<tr align="left"><td><a href="index.php?option=com_content&task=category&sectionid=3&id=7&Itemid=25" class="mainlevel" >FAQ's</a></td></tr>
<tr align="left"><td><a href="index.php?option=com_wrapper&Itemid=8" class="mainlevel" >Wrapper</a></td></tr>

<tr align="left"><td><a href="index.php?option=com_frontpage&Itemid=31" class="mainlevel" >the <span class='test'>Front Page</span></a></td></tr>
</table>


Huh... learn something new every day...


I just put in the title of the menu item as

Code: Select all

the <span class='test'>Front Page</span>
Randy Carver - carver-family.com

There are 10 types of people in this world.  Those that understand binary and those that don't.

User avatar
rcarver
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 204
Joined: Thu Aug 18, 2005 10:24 pm
Contact:

Re: Defining a class within a menu item?

Postby rcarver » Wed Sep 07, 2005 2:48 am

BTW, version 4.5.2....  no hacks.
Randy Carver - carver-family.com

There are 10 types of people in this world.  Those that understand binary and those that don't.

User avatar
sf_gabe
Joomla! Apprentice
Joomla! Apprentice
Posts: 11
Joined: Tue May 12, 2009 9:13 pm
Location: San Francisco, CA
Contact:

Re: Defining a class within a menu item?

Postby sf_gabe » Fri Jul 03, 2009 1:02 am

nice, thanks. I assumed something like this didn't work also until I read this post.

This is a kind of ugly little hack but it works for adding a popup modal box to a menu item as well -

In the "Link:" filed you can add this:
<code>
linkaddress.html" class="modal" rel="{handler: 'iframe', size: {x: 720, y: 630}}
</code>

It kind of tricks Joomla into thinking it's a full url when you leave off that last quote.

It works as long as you have the <?php JHTML::_('behavior.modal'); ?>
behavior added into the default template.
Zap! Squeak! Design!
print.web.identity.illustration
(...and a whole lot of Joomla too)

http://www.zapsqueak.com

User avatar
fatica
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 129
Joined: Fri Jan 19, 2007 10:32 pm
Contact:

Re: Defining a class within a menu item?

Postby fatica » Fri Sep 11, 2009 10:37 pm

I just tried this and it did not work for me (Joomla is stripping out my code)

Instead, I added this to modules/mod_mainmenu.xml

Code: Select all

<param name="link_sfx" type="text" default="" label="Link Suffix" description="PARAMMODULELINKSUFFIX" />
   


I set my module class suffix to "modal"

and added this to my new link suffix parameter

Code: Select all

class="modal" rel="{handler: 'iframe', size: {x: 720, y: 630}}"


Then, I alter the output to include the link by using a mod_mainmenu output override in templates/templatename/mod_mainmenu/default.php as follows:

Code: Select all

<?php // no direct access
defined('_JEXEC') or die('Restricted access');
 
if ( ! defined('roundedCornerPatch') )
 
  {
     
     
function roundedCornerPatch($result,$params){

   
   $result = str_replace("<a href=","<a " . $params->get('link_sfx') . " href=",$result);

   return $result;
 
  }
 
 define('roundedCornerPatch', true);
 
}//This is copied from mod_mainmenu and renamed to 'modMyMainMenuXMLCallbackDefined'
 
if ( ! defined('modMyMainMenuXMLCallbackDefined') )
 
  {
 
  function modMyMainMenuXMLCallback(&$node, $args)
 
  {
 
  $user  = &JFactory::getUser();
 
  $menu  = &JSite::getMenu();
 
  $active  = $menu->getActive();
 
  $path  = isset($active) ? array_reverse($active->tree) : null; if (($args['end']) && ($node->attributes('level') >= $args['end']))
  {
 
  $children = $node->children();
 
  foreach ($node->children() as $child)
 
  {
 
  if ($child->name() == 'ul') {
 
  $node->removeChild($child);
 
  }
 
  }
 
  }
 
 if ($node->name() == 'ul') {
 
  foreach ($node->children() as $child)
 
  {
 
  if ($child->attributes('access') > $user->get('aid', 0)) {
 
  $node->removeChild($child);
 
  }
 
  }
 
  }
 
 if (($node->name() == 'li') && isset($node->ul)) {
 
  $node->addAttribute('class', 'parent');
 
  }
 
 if (isset($path) && in_array($node->attributes('id'), $path))
 
  {
 
  if ($node->attributes('class')) {
 
  $node->addAttribute('class', $node->attributes('class').' active');
 
  } else {
 
  $node->addAttribute('class', 'active');
 
  }
 
  }
 
  else
 
  {
 
  if (isset($args['children']) && !$args['children'])
 
  {
 
  $children = $node->children();
 
  foreach ($node->children() as $child)
 
  {
 
  if ($child->name() == 'ul') {
 
  $node->removeChild($child);
 
  }
 
  }
 
  }
 
  }
 
 if (($node->name() == 'li') && ($id = $node->attributes('id'))) {
 
  if ($node->attributes('class')) {
 
  $node->addAttribute('class', $node->attributes('class').' item'.$id);
 
  } else {
 
  $node->addAttribute('class', 'item'.$id);
 
  }
 
  }
 
 if (isset($path) && $node->attributes('id') == $path[0]) {
 
  $node->addAttribute('id', 'current');
 
  } else {
 
  $node->removeAttribute('id');
 
  }
 
  $node->removeAttribute('level');
 
  $node->removeAttribute('access');
 
 
 
  }
 
  define('modMyMainMenuXMLCallbackDefined', true);
 
}


ob_start();//render the menu, and capture the output using output buffering
 
modMainMenuHelper::render($params, 'modMyMainMenuXMLCallback');
$menu_html = ob_get_contents();


ob_clean();

//You can use the "tag" parameter to apply this to only specific menus (not used in this example)


  $tag = $params->get('moduleclass_sfx');
 
  if(strtolower(trim($tag)) == "modal"){
     
     echo roundedCornerPatch($menu_html,$params);
     
  }else{
     echo $menu_html;
  }
 
ob_end_flush();

//output the menu!

?>



Now I have a menu where all items open in a modal dialog.

-Mike Fatica

susantoj
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Tue Jun 21, 2011 6:29 pm

Re: Defining a class within a menu item?

Postby susantoj » Tue Jun 21, 2011 6:35 pm

Here's what I did on the mod_mainmenu/helper.php

line 270 under _getLevelXML():

Code: Select all

$this->_buffer .= '<li class="'.$this->_current->class.'" access="'.$this->_current->access.'" level="'.$depth.'" id="'.$this->_current->id.'"'.$rel.'>';


Notice the extra "class" there right after <li>

Then on addNode() right before the $node = new JMenuNode around line 210:

Code: Select all

//grab the menu item class if any
$itemparams= explode("\n", $item->params);
$itemclass = '';
foreach($itemparams as $par){
   $keyval = explode('=',$par);
   if($keyval[0] == 'pageclass_sfx'){
      $itemclass = $keyval[1] ;
      break;
   }
}

$node = new JMenuNode($item->id, $item->name, $item->access, $data, $itemclass);


What I did is looking at the Menu Item's Page Class Suffix and inject it into the list item.

Hopefully this will be useful.

notdan
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Sun Feb 25, 2007 3:40 pm

Re: Defining a class within a menu item?

Postby notdan » Fri Nov 11, 2011 4:41 pm

hi fatica,

modal menu works like a charm!

great stuff, thanks!


Return to “Templates & CSS - 1.0.x”

Who is online

Users browsing this forum: No registered users and 5 guests