We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 25595
    • 9 Posts
    Hi

    I have something like this on my websites main dropdown menu
    1. A category called "Products"
    2. Subcategories of products "Foo", "Bar" and "Baz"

    I want the main category "Products" to show up in the dropdown menu, and when the user hovers over it, I want it to dropdown with the subcategories. So far so good nothing new or unusual.

    But at the same time, I want the "Products" to be un-click-able, i.e. the user not being able to click that menu-item (but ofcourse still be able to click the subitems)

    Is this possible with version 0.9.6.3 ? Maybe Wayfinder can do this ? but how ?

    Thanks
      • 26931
      • 2,314 Posts
      Hi,

      yes, thats possible. use &categoryFoldersTpl

      -> http://modxcms.com/forums/index.php?action=dlattach;topic=34176.0;attach=9315 (pages 47 - 50)
      -> http://www.muddydogpaws.com/development/wayfinder/parameters.html
      -> http://wiki.modxcms.com/index.php/Wayfinder

      &categoryFoldersTpl
      the template chunk for category folders, category folders are determined by setting the template to blank or by setting the link attributes field to rel="category"
      Placeholders
      same as rowTpl
      Example
      <li[+wf.classes+]><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>

      hope that helps smiley

      j
        • 25595
        • 9 Posts
        Hi sharkbait

        Thanks a million man. Very helpful links.
        It nearly killed med, cause I had to change all my CSS, but everything is working now grin

        This is by far the best opensource forum I ever have sseked for support. Keep up the good work guys. I am very glad I chose ModX as my CMS grin


          • 19613
          • 70 Posts
          Hi
          I am trying to achieve the same result (main menu item not clickable but sub menu usuable)

          I set the link attributes to rel="category" and the template to ’blank’ but the page Still clicks through to a now ’blank’ document (becuase of the lack of template)

          I have used:
          <div id="menu">[[Wayfinder? &startId=`161` &categoryFoldersTpl=`categoryFoldersTpl`]]</div>


          As a call for chunk called categoryFoldersTpl that is coded:

          <li[+wf.classes+]><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>


          My main menu link is called Company and contains 3 pages = about us/contact/testimonials i don’t want Company to be clickable

          The menu is styled and works as dropdowns with the following CSS:
          /*/// menu ///*/
          #menucont {
          	position: absolute;
          	top: 40px;
          	width: 940px;
          	line-height:normal;
          	clear: both;
          	z-index: 100;
          }
          #menu {
          	font-family: Arial, Helvetica, sans-serif;
          	position:relative;
          	font-size:11px;
          	z-index:100;
          	margin-top: 0px;
          	margin-right: 0;
          	margin-bottom: 0;
          	margin-left: 0px;
          	float: left;
          	text-transform: uppercase;
          }
          #menu ul {
          	padding:0; 
          	list-style-type: none;
          	margin:0px 0 0 0; 
          }
          #menu ul li {
          	float:left;
          	position:relative;
          	margin:0;
          	padding-left: 2px;
          }
          #menu ul li a, #menu ul li a:visited {
          	display:inline-block;;
          	text-decoration:none;
          	color:#333;
          	height:2.5em;
          	color:#FFF;
          	padding-left: 9px;
          	line-height:2.5em;
          	padding-right: 9px;
          }
          /** html #menu ul li a, #menu ul li a:visited {
          width:72px;
          w\idth:71px;
          }*/
          #menu ul li ul {
          	display: none;
          }
          table {
          	margin:-1px; 
          	border-collapse:collapse;
          	font-size:1em;
          }
          /* specific to non IE browsers */
          #menu ul li:hover a,
          #menu ul li a:hover {
          	color:#666666;
          	background:#000000;
          }
          
          /*added*/
          #menu ul li a.here, #menu a .active  {
          	color:#FFA500; 
          	background:#FFF;
          	border-top: 1px solid #676767;
          }
          .here {
          	color:#ACCA57; 
          	background:#EBEBEB;
          	border-top: 1px solid #333;
          }
          #menu ul li:hover ul,
          #menu ul li a:hover ul {
          	display:block;
          	position:absolute;
          	top:2em;
          	left:0;
          	width:150px;
          	margin-top: 5px;
          }
          * html #menu ul li a:hover ul {
          	margin-top:0;
          	marg\in-top:1px;
          }
          #menu ul li:hover ul li ul,
          #menu ul li a:hover ul li a ul {
          	visibility:hidden; 
          	position:absolute; 
          	height:0; 
          	width:0;
          }
          #menu ul li:hover ul li a,
          #menu ul li a:hover ul li a {
          	display:block;
          	color:#FFFFFF;
          	height:auto;
          	line-height:1.2em;
          	padding:5px 10px;
          	width:129px;
          	background-color: #000000;
          }
          * html #menu ul li a:hover ul li a {
          	width:150px;
          	w\idth:129px;
          }
          #menu ul li:hover ul li a.drop,
          #menu ul li a:hover ul li a.drop {
          	background-color: #F5F5F5;
          	background-image: url(drop.gif);
          	background-repeat: no-repeat;
          	background-position: right bottom;
          }
          #menu ul li:hover ul li a:hover,
          #menu ul li a:hover ul li a:hover {
          	background:#333; 
          	color:#FFFFFF;
          }
          #menu ul li:hover ul li:hover ul,
          #menu ul li a:hover ul li a:hover ul {
          	visibility:visible; 
          	position:absolute; 
          	left:148px; 
          top:0;
          width:150px;
          }
          #menu ul li:hover ul li:hover ul.left,
          #menu ul li a:hover ul li a:hover ul.left {
          left:-150px;
          }


          I have not used created any other WF chunks but the menus work fine (other than this issue)... is that a problem? Any ideas where I have gone wrong...?  huh
          (the page is set to not be cacheable if that makes a difference)

          Thanks  smiley
            • 16183
            • 1,390 Posts
            MT,

            WF will not automatically make the links not-clickable just by applying the categoryFoldersTpl. You need to remove the <a> tags yourself in your tpl

            so change this:

            <li[+wf.classes+]><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>
            


            to:
            <li[+wf.classes+]>[+wf.linktext+][+wf.wrapper+]</li>
            


            Btw, change &amp; to just &. It could be the Rich Text Editor doing this..just keep an eye out for that...

            cheers/k

            ps: Have you had a chance to read the WF e-book? This is clearly stated there wink
              • 19613
              • 70 Posts
              You again? Are you following me? grin

              (Hi K)

              The current problem I have is a bit ’chicken and egg’ as I have to get this site working by the end of the week! ...Reading your PDF front to back is my next mission as I realy want to get my tiny brain around WF.

              This method worked but it appears to have lifted the non-clickables out of alignment... which I am sure is probably a CSS issue so I should be able to fix it.
              Thanks again for the help.

              mt
                • 16183
                • 1,390 Posts
                Yes, that’s most likely a CSS issue....Remember relevant items were links but now they are just li, not links.

                cheers/k
                  • 18825
                  • 6 Posts
                  I have gone through the document "Complete guide ...." ...but I still have a problem .,..
                  i have made the parent menu unclikable too ...
                  my wayfinder call is as follows .,..
                  <div id="menu">

                  [[Wayfinder? &startId=`0` &outerTpl=`menuContainer` &rowTpl=`menuRows` &hideSubMenus=`TRUE` &innerTpl=`innerContainer` &innerRowTpl=`submenuRows` &parentRowTpl=`menuParents` &hereTpl=`menuheretpl` &activeParentRowTpl=`activeparenttpl` &hereClass=`` &categoryFoldersTpl=`catHeadings`]]
                  </div>

                  i have used the same css as provided by MindTattoos....and the contents of the wayfinder parameters are the same as given in the documentation(Complete guide ....) ...

                  I m still not able to get my submenus ..on hover to the parent link ..

                  Plz tell me what changes i need to make in my wayfinder call or its parameter contents ...I m a rookie in MODX ...

                  Thanx in advance .....
                    • 16183
                    • 1,390 Posts
                    Quote from: Mayur at Jun 19, 2009, 07:48 AM


                    I m still not able to get my submenus ..on hover to the parent link ..

                    Mayur,

                    Welcome to MODx!

                    Sorry, I don’t understand your question. Do you mean your sub-menus are not being output at all?

                    cheers/k
                      • 19613
                      • 70 Posts
                      Hi,
                      The CSS I provided is fine... but make sure you are using Internet explorer 7 onwards or Firefox or you will need to use a seperate ’css hover’ command for IE 5/6

                      see:
                      http://www.xs4all.nl/~peterned/csshover.html

                      If you are using recent browsers it must be something to do with your ’wayfinder’ call... kongondo will know more about that than me or your menu structure.

                      Hope that helps.

                      MT