It would seem to me that Stu Nicholl’s new drop menu method is dang near custom built for this treatment. And LOOK MA! NO JAVASCRIPT! Works in IE too.
And I gotta say, this was the EASIEST drop menu system to install ever. Drop it in. Change a bit of spacing and a few colors. Done.
The only thing I have to figure out is how exactly to script it so that IF the flyout happens under the far right toplevel it puts the class of "left" on the list item that contains the nested list. No big deal if it’s my site, but this one is a client site and you KNOW that means that is the first thing that the client does is put a nested list there . . . also, though it’s not NECESSARY for the menu to work, it would be cool to have the "drop" class on the anchor tag of the list item that has the nested list inside it so the little arrow or whatever image or different background or whatever you choose will appear and tip people off that this is a list item that has more links associated with it. Anybody who has better php coding skills than me (which is almost everybody) please let me know if you have an idea.
It would seem to me that Stu Nicholl’s new drop menu method is dang near custom built for this treatment. And LOOK MA! NO JAVASCRIPT! Works in IE too.
And I gotta say, this was the EASIEST drop menu system to install ever. Drop it in. Change a bit of spacing and a few colors. Done.
The only thing I have to figure out is how exactly to script it so that IF the flyout happens under the far right toplevel it puts the class of "left" on the list item that contains the nested list. No big deal if it’s my site, but this one is a client site and you KNOW that means that is the first thing that the client does is put a nested list there . . . also, though it’s not NECESSARY for the menu to work, it would be cool to have the "drop" class on the anchor tag of the list item that has the nested list inside it so the little arrow or whatever image or different background or whatever you choose will appear and tip people off that this is a list item that has more links associated with it. Anybody who has better php coding skills than me (which is almost everybody) please let me know if you have an idea.
Just a side note; many of the cssplay menus will be included as a examples to the DropMenu’s successor what will be soon available for public beta testing. It took about 5 to 10 minutes to do the css play menus with the new menu builder.
Quote from: kickass at May 04, 2006, 03:22 AMI am trying to implement this method too, but I dont get it working.
It would seem to me that Stu Nicholl’s new drop menu method is dang near custom built for this treatment. And LOOK MA! NO JAVASCRIPT! Works in IE too.....
Could you please share your css-file, and your snippet call?? This would be a great help for me.
When I put the dropmenu in, it is indenting on the left hand side for the parent items. I can’t seem to figure out how to make it so it doesn’t indent the first level. Any ideas?
ul {
list-style: none;
margin-left: 0;
padding-left: 0;
text-indent: 0;
}
It would seem to me that Stu Nicholl’s new drop menu method is dang near custom built for this treatment. And LOOK MA! NO JAVASCRIPT! Works in IE too.
☆ A M B ☆
MODX Staff
Quote from: kickass at May 04, 2006, 03:22 AM
It would seem to me that Stu Nicholl’s new drop menu method is dang near custom built for this treatment. And LOOK MA! NO JAVASCRIPT! Works in IE too.
I was also wondering if anyone figured out how to get this menu to work with DropMenu? I looked over the directions on StuNicholls site and the example HTML they are using has so many if statements in it, I’m not sure how it can be compatible with DropMenu. Can drop Menu generate that stuff?
If anyone has gotten this method to work I’d like to know how before I spend a day or two trying to force it.
Thanks! for all the help.
/***************************
Drop Menu Style - from ScottyDeleicious & ModX - http://www.scottydelicious.com - http://www.modxcms.com
****************************/
/* general settings
-----------------------------------------------*/
#menu ul, #menu p {padding: 5px 15px 1em; margin-left: -5px; }
#menu li { list-style:none; width:100%; }
#menu li a { color:#f90; background: url(images/folder_blue.jpg) no-repeat 0 3px; padding: 0px 20px; margin-left: -5px; }/* this sets the color of the active menu parent. */
#menu li a:hover, #menu li a:active { color: #006; background: url(images/folder_red.jpg) no-repeat 0 3px;}
/* color & style for root level active folder
-----------------------------------------------*/
#menu li.here { color:#f90; background: url(images/folder_open.jpg) no-repeat 0 5px; padding: 0px 20px; margin-left: -5px;}/* this sets the color of the active menu parent. */
#menu li.here a { background: none !important; padding: 0px 5px;} /* removes extra icon. IE Win needs !imporatant */
#menu ul ul { display: none; } /* turn off level 2 folders (sub menu items) */
#menu li.here ul { display: block; padding:0; margin:0;} /* show the items in the level 2 folder path when you are there*/
/* color & Style for level 2 active folder
-----------------------------------------------*/
#menu li.here ul li, #menu li.here ul li a {color:#000; background: transparent url(images/document.jpg) no-repeat 0 3px; padding: 0px 10px; margin-left: -5px; !important}/* An item in the 2nd level list, not currently selected */
#menu li.here li.here { color:#f90; background: transparent url(images/urhere.jpg) no-repeat 0 3px; !important}/* The ACTIVE item in the 2nd level list */
#menu ul li ul li ul li { display: none; } /* turn off level 3 folders (sub menu items of sub menus) */
#menu li.here ul li.here ul li { display: block; padding:0; margin:0; } /* show the items in the level 3 folder path when you are there*/
/* color & Style for level 3 active folder
-----------------------------------------------*/
#menu li.here li.here ul li a { color:#000; background: transparent url(images/document.jpg) no-repeat 0 3px; }/* An item in the 3rd level list, not currently selected */
#menu li.here li.here li.here a { color:#f90; background: transparent url(images/urhere.jpg) no-repeat 0 3px; }/* The ACTIVE item in the 3rd level list */