custom class for the dropmenu's <LI>

[Guest]

Welcome, Guest. Please login or register.
Did you miss your activation email?

1 Hour 1 Day 1 Week 1 Month Forever
Login with username, password and session length

[grunt_lord]

Hi!

I want to use Lightbox Gone Wild to show my website content, but to do so I would need to have a custom class added to the <li> of the dropmenu.  How can I do it ??

thanks in advance,

Blaise

[rthrash]

Hmmm... describe what you want in a feature request and we'll see if it can happen for the next release (bugtracker request that is...)

[heliotrope]

Hi,

I've made a couple of changes in dropMenu to achieve this.
I've posted the tip in french Forum.

I copy and Paste the way I've realized the hack.

Hope this help.

Create a new TV called -> idCssMenu (text)

Duplicate DropMenu and made these changes

- Added after line 224:

Code:

$myTv =  $modx->getTemplateVar('IdCssMenu',$fields='*',$child['id']);

- line 262 (<p> tags are specifics to my needs)

Code:

($myTv !='' ) ? $idCss = 'id="'.$myTv['value'].'": $idCss ='';               
$output .= "    <li $idCss class=\"$hereClass". ($numChildren == 0 ? ' last' : '')."\">$itm<p>".$child['introtext']."</p></li>$ie";

- and line 297

Code:

<li $idCss $class>$itm$desc</li>$ie";

EDIT: I guess you 'll have to modidfy more lines after 262 because I didn't need to custom sublevel

[grunt_lord]

It's not a bad idea! But i was wrong... I needed a class in the link, not the <li>...  Anyway, Scotty Delicious is working on an extended version of the Drop Menu and he is supposed to include that specific feature!

[Dr. Scotty Delicious]

It's not a bad idea! But i was wrong... I needed a class in the link, not the <li>...  Anyway, Scotty Delicious is working on an extended version of the Drop Menu and he is supposed to include that specific feature!

And....
Revision 0.1 is done.  You can check it out here:

http://modxcms.com/forums/index.php/topic,3724

later

-sD-
scottyDelicious

[heliotrope]

@ grunt_lord
I thought that you wanted to set a different class to each <li> that's why I proposed this hack. :-)

[grunt_lord]

hehe... at first i thought i wanted to modify the <LI> too

[Dimmy]

Dit Ryan not give an example a while ago (I searched can not find it any more) to use the &pre and the &post tag to generate a custom style tag for eacht document depending on the id?

somthing like &pre=`<span class=[*id*]>` &post=`</span>` not sure if it was this but it would grab the id number of that menu item so if you would have page 1,2,3,4,5 tbe listed in dropmenu than the class would automaticly be 1,2,3,4,5

but I can not recall it by hart anymore and I can not find the original post.

 

[rthrash]

That would actually put in the id of the current document, but that would indeed work. You could also create a unique ID by using the counter in the for loop though.

[sottwell]

I've done that when I wanted to have a different background for each main menu item. I simply added an incrementing variable into the MakeMap loop and appended it to the LI class specified in the snippet options when the <li... tag is being generated.

<ul class="topnav">
<li class="category1">Item One
...submenu
</li>
<li class="category2">Item Two
...submenu
</li>
<li class="category3">Item Three
...submenu
</li>
<li class="last category4">Item Four
...submenu
</li>
</ul>

[Dimmy]

I've done that when I wanted to have a different background for each main menu item. I simply added an incrementing variable into the MakeMap loop and appended it to the LI class specified in the snippet options when the <li... tag is being generated.

<ul class="topnav">
<li class="category1">Item One
...submenu
</li>
<li class="category2">Item Two
...submenu
</li>
<li class="category3">Item Three
...submenu
</li>
<li class="last category4">Item Four
...submenu
</li>
</ul>

could you post the change here and the sntippet call?

[sottwell]

Depending on the version number your line numbers may vary.
Line 217:

Code:

$categoryNumber = 1; // initialize li class number - sottwell
//loop through and process subchildren
foreach ($children as $child) {
// figure out if it's a containing category folder or not

Line 277:

Code:

// it's an empty folder and using Category Folders
if ($useCategoryFolders && $itsEmpty) {
$class .= ($class ? ' ' : '').$categoryClass.$categoryNumber; // append li number - sottwell
}

and line 298:

Code:

    $class = '';
    $categoryNumber++; // increment li class number - sottwell
    }
  }
$output .= "</ul>$ie";

Snippet call:

Code:

[[DropMenu?startDoc=`49`]]

I only wanted this for empty top-level folders, so that's where I added the number variable. You can see where I used this here. Each top-level li has a different background image. The "category" class is automatically added to empty folders; you can of course change the name in the snippet call with &categoryClass.

[Dimmy]

Nice this is exacly what i need aswhell