We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 4273
    • 356 Posts
    I thought I’d start a post here that could perhaps inspire some [dropmenu] examples for Newbies to review

    Perhaps there could a post for chunky examples as well much easier to see examples then reading the documentation

    what I mean by examples is not just what is refered to in documenation but the way you are using it in your site

    ie this is how i put a top navigation
    ie this is how i put a side navigation
    ie this is how i make two, three, four different navigation systems
    ie this is how the tag is written

    The Modx documenation is great and all if you are an expert developer but for the novice, we need to see abc examples he he
    step 1. do this
    step 2. do this
    step 3. do this

    I thought this would be a great idea for newbies to get started, it will help in learning the Modx process as well.
      SMF Bookmark Mod - check it out
      http://mods.simplemachines.org/index.php?mod=350
      • 25497
      • 22 Posts
      I think this is a great idea...code is great, but seeing some examples and the code would be very helpful to newbies like me
        • 7648
        • 2 Posts
        I could’nt agree more@!!!!.. I’v been searching for about 2days now trought all the modx documentation trying to figure out how to style my drop menu.. no luck yet undecided
          • 7923
          • 4,213 Posts
          Quote from: dmasterx at Jun 05, 2006, 07:22 AM

          I could’nt agree more@!!!!.. I’v been searching for about 2days now trought all the modx documentation trying to figure out how to style my drop menu.. no luck yet undecided
          What you are trying to do? Have you looked [Tutorial] How to style DropMenu with CSS?

          The menu html code what DropMenu produces is just normal unordered html list. You can look at any tutorials on how to style lists if you don’t know how to do it. Check Listamatic for example.


            "He can have a lollipop any time he wants to. That's what it means to be a programmer."
            • 6850
            • 12 Posts
            I disagree. The examples at Listmatic, etc. are static navigation systems. You are able to modify each HTML element to reflect what the examples are trying to communicate. If you need a class or ID added to a particular UL or LI tag, you just add it. If you need another DIV tag, you create it.

            MODx’s DropMenu is dynamically created HTML. It is very difficult to apply the examples at Listmatic to them because you can’t manipulate the base HTML other than to create a class name or a wrapper. And then there are differences when things such as what ’selfAsLink’ is activated, which has nothing to do with whether or not a list element should be considered in the ’here’ class or not, but DropMenu throws it away.

            I would like to see a live example with a step-by-step tutorial for creating a horizontal navigation menu with CSS drop downs for the secondary/tertiary navigation. I can follow directions as well as the next person, but I have seen nothing that explains how to do this with MODx. Otherwise, I will be dumping MODx tomorrow and installing Joomla or similar CMS system with a menu system that can accomplish this.

            Can ANYONE point me to a live site using DropMenu with a horizontal menu that has functional CSS drop downs for the secondary navigation?
              • 7923
              • 4,213 Posts
              Quote from: ddmobley at Jun 14, 2006, 03:06 AM

              I disagree. The examples at Listmatic, etc. are static navigation systems. You are able to modify each HTML element to reflect what the examples are trying to communicate. If you need a class or ID added to a particular UL or LI tag, you just add it. If you need another DIV tag, you create it.

              MODx’s DropMenu is dynamically created HTML. It is very difficult to apply the examples at Listmatic to them because you can’t manipulate the base HTML other than to create a class name or a wrapper. And then there are differences when things such as what ’selfAsLink’ is activated, which has nothing to do with whether or not a list element should be considered in the ’here’ class or not, but DropMenu throws it away.
              You don’t usually need ID’s or classes on a specific items when doing css list menus. Just right classes here and there and other items can be referenced in the css by walking down the tree.

              You can do most (if not all) of the Listamatic menus with the original unmodified DropMenu just fine. For example take a look at this dropdown menu. It’s not a problem at all that it uses the id’s an sorts.. I’m not going to do this in a step by step way, but here’s how this could be achieved with DropMenu:

              Call it using:
              [[DropMenu? &startDoc=`0` &levelLimit=`2` &here=`activeLink` &topdiv=`1` &topdivClass=`navlist` &subdiv=`1` &subdivClass=`subnavlist`]]


              And use this css:
              div.navlist ul { font-family: sans-serif; }
              
              div.navlist ul a
              {
              font-weight: bold;
              text-decoration: none;
              }
              
              div.navlist ul, div.navlist ul ul, div.navlist ul li
              {
              margin: 0px;
              padding: 0px;
              list-style-type: none;
              }
              
              div.navlist ul li { float: left; }
              
              div.navlist ul li a
              {
              color: #ffffff;
              background-color: #003366;
              padding: 3px;
              border: 1px #ffffff outset;
              }
              
              div.navlist ul li a:hover
              {
              color: #ffff00;
              background-color: #003366;
              }
              
              div.navlist ul li a:active
              {
              color: #cccccc;
              background-color: #003366;
              border: 1px #ffffff inset;
              }
              
              div.subnavlist ul { display: none; }
              div.subnavlist ul li { float: none; }
              
              div.subnavlist ul li a
              {
              padding: 0px;
              margin: 0px;
              }
              
              div.navlist ul li:hover div.subnavlist ul
              {
              display: block;
              position: absolute;
              font-size: 8pt;
              padding-top: 5px;
              }
              
              div.navlist ul li:hover div.subnavlist ul li a
              {
              display: block;
              width: 10em;
              border: none;
              padding: 2px;
              }
              
              div.navlist ul li:hover div.subnavlist ul li a:before { content: " >> "; }

              What I basicly did is that I used the topdiv and subdiv parameters in the snippet call to have the topmenus and submenus wrapped around divs. Then instead of using ID names in then CSS, I used the div class names to refer to the same elemets, ie. replaced all occures of ul#navlist with div.navlist ul and ul#subnavlist with div.subnavlist ul.

              Usually all css listmenu tutorials that don’t require the use of specific styles on each menu item can be used with dropmenu. The ones that does use specific css per menu item are usually not suitable for a dynamic menus anyways or badly designed. But don’t get me wrong, I’m not saying that all tutorials/menustyles in the world are valid for the original DropMenu or can be achieved with it, some may require tweaking the snippet code to get something special. But pretty much anything is possible if you want it badly enough.

              EDIT:

              Sorry about this, I forgot that this menu needs also the following javascript to be included in the template:
              /*
              son of suckerfish menu script from:
              http://www.htmldog.com/articles/suckerfish/dropdowns/
               */
               
               sfHover = function() {
              	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
              	for (var i=0; i<sfEls.length; i++) {
              		sfEls[i].onmouseover=function() {
              			this.className+=" sfhover";
              			this.style.zIndex=200; //this line added to force flyout to be above relatively positioned stuff in IE
              		}
              		sfEls[i].onmouseout=function() {
              			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
              		}
              	}
              }
              if (window.attachEvent) window.attachEvent("onload", sfHover);


                "He can have a lollipop any time he wants to. That's what it means to be a programmer."
                • 34162
                • 1 Posts
                Usually all css listmenu tutorials that don’t require the use of specific styles on each menu item can be used with dropmenu.

                This may be true - in principle. But "in principle" does not mean in practice:

                1. There’s a conceptual mismatch between how CSS and how the dynamic DropMenu works: You can have indefinite levels of ul, li, ul, li .... sequences created by DropMenu, but in practice this would mean to define a definite CSS definition cascade of ul, li, ul, li covering this virtually indefinite structure. DropMenu will drill down easily - CSS will not.

                2. with the class "here" DropMenu intermixes the hierachical ul/li structure with the position of a page within that structure. DropMenu does not apply an ID to the current page - I had to tweak the source to get the current page styled with "id="currPage" but here my point comes out again: this id spans over all sub-uls and sub-ul-li elements, so it’s still a challenge to create the most common behaviour of navigation systems: hilighting the current page - without all subsequent segments (chapters, pages, whatever you name it).

                You’ll easily end up - as described in the well written tutorial - with a quite complex structure of ul li ul, li.here ul li ... declarations that are really difficult to handle and to maintain. And this is not a matter of theory - it’s a matter of practice. And practice counts.

                (Maybe a DropMenu which created a decimal-classification of levels (class "1", class "1_1", class "2_1_3") would be far easier to handle. Within all that sequences of "ul li ul li.here ul li" it’s nearly impossible NOT to get lost.)
                • Sounds like a great idea ppaul and something that would be appreciated by many people. You should definitely make a version that does just that and release it ... heck it might even make for a good default snippet to install as well. smiley
                    Ryan Thrash, MODX Co-Founder
                    Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me
                    • 27910
                    • 48 Posts
                    Can we start a new thread, maybe a sticky one, with some actuall samples - especially for the newbies? And maybe keep it just to samples, not discussions about which CSS method to use or not to use?
                      cPanel :: Fantastico :: RVSkin :: WHM :: ModernBill :: Reseller Hosting :: SSL Certificates :: Domain Registrations :: Affiliate Program :: Blog Hosting :: CMS Hosting :: Forum Hosting :: E-Commerce Hosting
                      SoftDux- The Leaders in Software
                      Use the coupon: modx to get 20% off our packages
                      • 4273
                      • 356 Posts
                      Is it possible to configure dropmenu to use a defined folder as the root ?

                      ie

                      folder 1
                      folder 2 < make this root
                      doc a
                      doc b
                      doc c
                        SMF Bookmark Mod - check it out
                        http://mods.simplemachines.org/index.php?mod=350