Individual ids for list items in dropmenu

[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

[anselm1109]

I've been searching for this but can't seem to find anything.

Is there any way to make DropMenu assign individual id's for each list item in its output?

so the first list item's id could simply be listitem-1 and the next listitem-2 etc.

This would make it a lot easier to create style sheets and do some fun scriptaculous effects.

[sottwell]

With a bit of creative hacking, it can be done. You have to set a variable to 0 before the loop, where the code generates the <li... tags add the id="item'.$variable.'... and then increment the variable at the bottom of the loop. Or you can simply use the $child['id'] value to make a unique ID, it depends on what you want to do with it. If there are going to be a lot of them that you want to do something with, and you want to process them in order, the first method would be better, while if you're just going to work with a few, the second would be easier to code, as well as being able to identify the menu item with the document it is pointing to. I used the second method here:

http://www.alandaniel.co.uk/builder.html

I could have used a hard-coded menu for the main four sections, with four DropMenu calls, but this way was more fun.

[anselm1109]

Thanks, I didn't think of using the $child['id'] value. That makes a lot of sense. I'm not really working on anything in specific, I'm just playing with the idea of using scriptaculous effects on a dropmenu. That's a lot easier when everything has id's.

Thanks for the tip!

[whitehat]

With a bit of creative hacking, it can be done. You have to set a variable to 0 before the loop, where the code generates the <li... tags add the id="item'.$variable.'... and then increment the variable at the bottom of the loop. Or you can simply use the $child['id'] value to make a unique ID, it depends on what you want to do with it. If there are going to be a lot of them that you want to do something with, and you want to process them in order, the first method would be better, while if you're just going to work with a few, the second would be easier to code, as well as being able to identify the menu item with the document it is pointing to. I used the second method here:

http://www.alandaniel.co.uk/builder.html

I could have used a hard-coded menu for the main four sections, with four DropMenu calls, but this way was more fun.

HI again,

I am sending you the template of my site and the css that will be used for the topmenu... I thought this would be more effective in order to explain to me what should I do  ... if there should be any javascript involved with this, can you send me a sample 2?

Thanks,
Whitehat

[whitehat]

P.S This would be the final thing I need in order to finish this site....

[kickass]

Hmm, just a thought- if you can set this up so each item has its own ID, then for accessibility can it be set up for accesskeys in a similar manner?

I don't have the talent to do this, but if someone who is capable can do it and post this, it would be a REALLY awesome addition to the modx snippet stable (and REALLY kick some Joomla butt . . . )

[sottwell]

Already done. (the Search feature is sometimes very useful...)

http://modxcms.com/forums/index.php/topic,3031.0.html

[whitehat]

Already done. (the Search feature is sometimes very useful...)

http://modxcms.com/forums/index.php/topic,3031.0.html

I think we are just wasting time with these back and forth posts.... I did get the dropmenu hacked by you before thanks to your post 2 days ago... and replaced the old DropMenu and it works fine (It's returning ID's of the Documents).

The reason that I sent you the template and the css in my previous post is that I cant figure it out how to configure the CSS accordingly on inactive hover and active and how to call this css in the div tag of the topmenu and in the menu itself (see below in the code section).
And the second reason is that in the template other than calling:

Code:

    <div id="navcontainer" style="position:absolute; width:752px; height:22px; z-index:2; left: 172px; top: 11px;" class="navcontainer">
[!DropMenu? &menuName=`top` &startDoc=`[*StartDoc*]` &levelLimit=`1` &topnavClass=`navcontainer` &here=`activeLink`!]
</div>

for the Top menu I dont know what to do.

Should there be specified something in the head section that would suggest to the dropmenu to get the pics for those id's.

And finaly CSS
(the css file would it look like this? see the attached file for the details).


Since you have already made this work it would help to actually put a post about the whole process of installation of this issue.. starting from DropMenu, DropMenu Template Calling and css sample ... this way the things would actually be more effective (but of course thats what I think).

Anyway I thank you for your continued support starting with multilingual support and all the rest... you never got tired of helping and I am greatefull for that I just Hope that you can find time to input me with the information that I mentioned in this post....

This would terminate my problems and my site would be finished and ready for publishing with a footer message on it that will say thanks to modx team and especially to Susan.

Cheers,
WhiteHat

[kickass]

Thanks Susan, though it would have been much easier to see if listed on the Repository Snippet list, which it isn't, at least not on the main list, which is the first place I look for special stuff.

[sottwell]

@kickass: I don't think they put hacks and modifications in the "repository" section, they are sort of unauthorized, use-at-your-own-risk things.

@whitehat: I don't understand your question. In the example link, the top-level menu item's dropdowns with the unique images are simply styled with a height and width and a background image.

Code:

...
#top ul.topnav li ul{
display:none;
clear:left;
position:absolute;
top:2.1em;
left:0;
width:184px;
height:120px;
border-top:1px solid white;
cursor:default;
}
...
#top ul.topnav li.category1 ul{
background:#ada86e url(menuimages/menu1.jpg) bottom left no-repeat;
}
...

[whitehat]

@kickass: I don't think they put hacks and modifications in the "repository" section, they are sort of unauthorized, use-at-your-own-risk things.

@whitehat: I don't understand your question. In the example link, the top-level menu item's dropdowns with the unique images are simply styled with a height and width and a background image.

Code:

...
#top ul.topnav li ul{
display:none;
clear:left;
position:absolute;
top:2.1em;
left:0;
width:184px;
height:120px;
border-top:1px solid white;
cursor:default;
}
...
#top ul.topnav li.category1 ul{
background:#ada86e url(menuimages/menu1.jpg) bottom left no-repeat;
}
...

Thanks nevermind I got it solved, in the next few days I will send you the complete templates and modifications made by me so you will see what I ment , Anyway the whole multilingual site is working perfectly thanks mostly to your input...
Thanks allot,
Cheers WhiteHat