[REQUEST] Template with Drop menu

If anyone has a simple template using the DropMenu snippet, can you post? I am having a super hard time wrapping my brain around the styling. The easiest way for me to learn is to look at working models. I am looking at the "demo site" now, but still find myself confused. All the indents are bugging the hell out of me, and I also am curious if anyone has done a "display:inline;" that looks ok. Mine does not.

Kind regards

-sD-
scotty Delicious

Scotty,

All you need to do is style the output as if it were a list.

For a tutorial see this link:

http://css.maxdesign.com.au/listamatic/vertical08.htm

Then set up the snippet via the snippet call to use your css classes. (look at the snippet comments if you need help with this)

Thats it!

I still don’t see how you can style links (A elements) using backgrounds and borders, and have the "here" LI element using the same style. If you style the element li.here with, say, a border, you get the border around it and all of its submenu items. Or, if you want to indent it to match the other items in the menu, all of its submenu items are pushed over with it. That could be controlled by giving the submenu items negative margins, but I see no way around the border and background enclosing the entire submenu. What am I missing?

That is the EXACT problem I can’t get my head around.  Eventually, what can be done with 4 classes in MenuBuilder takes no less than 23 classes and id’s in DropMenu.  I am a huge fan of having sytacticly correct code that degrades well, but If I can’t style it to fit my site, why style a site at all.  It might just be easier to upload a folder full of static pages and recommend that people use the Lynx viewer to navigate your website.

My intention is not to be offensive to those who put hundreds and hundreds of hours into this snippet.  I am frustrated because the only instructions I can find on how to use it are: "See the comments in the snippet" (I did, I am more confused now), "Just style it like any other list" (When I have a document set as a Folder, it either shows all the contents or none of them.  I just want it to show when the Folder is selected.  Plus, when the folder IS selected, there is a big goofy li.here box around it.  I think the Folder should just have the li.here style, not a new box around it with the li.here style).  It’s just my $0.02 USD, but for now I will stick with MenuBuilder and ListGlobal.  They may not have as many of the "Advanced Functions" of Drop, but they are easy as hell to configure and style.  I am not a "Webmaser" or an IT technician.  I love to do webdesign and websites for friends on my spare time.  I love MODx, but I am frightend that with this latest release it has become YAPS, by geeks and for geeks, and therefore isolating the users that came to Etomite and then to MODx for what separated it from "the rest of them".  It’s ease of use.  I have been using Phase/Eto/MOD since 2003, and this is the first time I have had a "Standard install" snippet that I find to be completely useless as is for my needs.  I love you guys, but the release of DropMenu as anything more than alpha seems premature.

Again, it’s just my $0.02USD, and I know I don’t have to use it, but I LOVE MODx, and I want to be standards compliant.  I just wish I could do that AND have my site look the way I want it to.

-sD-

Scotty,

First off, how is MODx YAPS? We are not adding any major portal functionality that I know of--- only frontend editing and posting as far as I know.

Second, as to the see the snippet comments, I have only had access to dropmenu for a short while and so therefore have not used it extensively. But it was a drop in replacement for another list based menu snippet.

But thats just my two cents USD.

Actually, all of the other list-based menus have a class for the active A tag (or at least the ones that deal with the active issue at all).

And if you look at all of the tutorials, they use the A tag classes for most of the link styling. The dropdown part is done with the LI and UL tags, but the actual styling of the links is done with the A tag classes.

It’s really a simple matter of adjusting the code to provide classes for the A tags, including the active link. There’s no getting around that, as far as I can see. As I did in my hack, you can make it a dummy link if you like, which may not be "syntactically" pure, but it works, and it validates.

Actually, I would be inclined to have all of the possible classes "on" by default; you don’t need to use them if you don’t want to, but it sure makes it easier for working with it if you don’t have to figure out which UL classes you need and how to set them!

<appology / clarification>

Quote from: Mark at Oct 30, 2005, 07:59 PM

Scotty,

First off, how is MODx YAPS? We are not adding any major portal functionality that I know of--- only frontend editing and posting as far as I know.

The YAPS comment was in regard to added functionality at the cost of usablity to the average user like the majority of MODx users and me.
Quote from: Mark at Oct 30, 2005, 07:59 PM

Second, as to the see the snippet comments, I have only had access to dropmenu for a short while and so therefore have not used it extensively. But it was a drop in replacement for another list based menu snippet.

But thats just my two cents USD.

I am not blaming you... I am not blaming anyone.  I just don’t see why at it’s current status it is included in the default install or why so many of the mods are touting it’s use as a replacement (in it’s current state) for the more tried and tested snippets for menuing.  I understand that this snippet has a lot of potential to be the greatest addition since MODx itself, but it’s buggy, there is almost no "average user" documentation, and it is has no label instructing MODxers that it is a work in progress, and may not be the most appropriate solution for them at this time.  

Again, it is not my intention to play "the blame game".  I am not a politician.  I do want to do whatever I can to help ensure that MODx is able to continue to be  the CMS of choice for "the rest of us"

-sD-

The other thing I don’t want to imply is that there is some reason to believe the confusion is not a knowlege deficit on my part.

I am, in fact, assuming that IT IS MY problem that I can’t understand how this works.  The reason I put up this original post was so I could look at someones project that, unlike mine, actually works.  I just want to learn.  We all learn in different ways, and Mark, perhaps commented lines in the code are all you need for success, but I will not assume what works for me will also work for you.  I already know through AIMing with you that you also would not make the assumtion that what worked for you will satisfy my learning needs.  I appreciate all of your advice, which has been quite sage advice, but, I posted this in the [Templates] forum, looking for working templates because I know my learning limitations.  So that’s what works best for me, not commented lines in code (although they are VERY usefull once I understand them).  For some reason, I need that "Tactile" contact with the entire code so I can examine how it works, and how I can get it to work for me.

-sD-

Quote from: ScottyDelicious at Oct 30, 2005, 04:33 PM

If anyone has a simple template using the DropMenu snippet, can you post?  I am having a super hard time wrapping my brain around the styling.  The easiest way for me to learn is to look at working models.  I am looking at the "demo site" now, but still find myself confused.  All the indents are bugging the hell out of me, and I also am curious if anyone has done a "display:inline;" that looks ok.  Mine does not.

and later in reference to the DropMenu snippet

I understand that this snippet has a lot of potential to be the greatest addition since MODx itself, but it’s buggy

Now you’re getting into the finer points of CSS-based styling. Simply because you’re trying to do things that might not at first be apparent how to accomplish does not make it "buggy". Unfortunately, CSS techniques are not somehting that can be learned quickly because of differences in CSS rendering between the browsers.

To skip a whole lot of stuff that comes after this paragraph: If a table + JavaScript menu system works best for you, then by all means, use that! CSS layouts are a challenge that take time to master. There really are no shortcuts.

Now down to the examples you ask about... There are a ton of great tutorials on styling unordered lists into usable navigation systems (and other CSS stuff in general), including all the fun "gotchas" to look out for with the various browsers (mostly IE and Opera, but "mostly IE" means the majority of the internet ... mostly).

Since MODx is more about the tool than it is about the techniques, we like to not to reinvent tutorials that are already well written and available. Review, study, learn and gain 100% comprehension of what’s going on with the following tutorials and you’ll be well on your way to a good start:

http://css.maxdesign.com.au/selectutorial/
http://css.maxdesign.com.au/listutorial/
http://www.maxdesign.com.au/presentation/wentworth/index.cfm
http://positioniseverything.net/css-flyout.html
http://positioniseverything.net/css-dropdowns.html
http://www.maxdesign.com.au/presentation/tame/
http://css.maxdesign.com.au/listamatic/
http://css.maxdesign.com.au/listamatic2/
http://positioniseverything.net/articles/onetruelayout/

Figuring out how to make really clean, semantic, efficient layouts is tough and frustrating as all get out. It’s one of those things you beat your head against for weeks or months... then things all of the sudden start to click. You’ll go back and look at all this mess of code you did on older stuff and realize you can replace it much more simply in about half the code (or less!).

You start needing fewer and fewer non-semantic elements. You learn to become one with the dark side (IE Win), to ignore the cruel joke that is IE Mac and ancient Navigator versions, and what works easily and what’s going to take some "serious doin’ to do" in CSS. Getting CSS layouts right is an art form that takes time (lots of it, too), patience (lots of that, too), failure (even more of that) and practice (an infinite amount at first, then only a ton when you know what’s going on).

To paraphrase Mark Twain (I think) when writing a letter to a friend, "Forgive the length of this letter for I have not the time to write a short one." Same thing applies with MODx. For now, we’re putting the advanced stuff in there and making it so power-users can really make it sing. We will one day be as bullet-proof a solution as any out there, but for now, we cannot be all thigns to all people.

So for now, some things might be a bit complex, or advanced or not totally intuitive. That’s a choice. We can’t provide a truly robust and powerful solution that serves the dev teams’ needs (remember, we’re not getting paid to produce a consumer-grade commercial application), while simultaneously paring it down to a super-simple solution chock full of set up wizards. We have to build it up before we can scuplt it into an even more svelt machine. Given time, we’ll get there though. We’re working hard at it now.

Ryan...
That is it exacty.  I think I mentioned my knowledge deficit earlier, I just had no Idea of the extent of my deficit.  Just when I thought I was getting comfortable with CSS, I realize everything I know is... not much.  I have a lot of reading to do over the next couple weeks, and I really like the List tutorials from MaxDesign [ http://css.maxdesign.com.au/listamatic/ ], (Mark actually posted tha earlier).  I assumed I already knew what I needed to know about CSS.  I don’t.  I appologise for calling your menu buggy.  I see that it is true what they say.  You can never truley know what it is you don’t know yet.

-sD-