Can dropMenu do this? help, please.

35 Posts

steveua Reply #1, 18 years, 1 month ago

Hi - how can I get dropMenu to only show the current level of documents and folders (siblings) and JUST the children of the current document? I’ve been unable to find documentation or forum posts about this...also, can dropMenu recognize, dynamically, that it is on a certain level of the site (from within a template) and then only show that level (siblings) and possibly children, if so desired? That is, I have dropMenu in a template - when a user navigates to any page on any level, dropMenu would only show that document’s siblings, and then just the children of that document. It seems as if I would have to configure a seperate dropMenu for each level, then also for each page that I want to display its (that page’s) children. I can’t find the clear answer to this, either, and my experimentation has been fruitless.

thanks,

Steve

1,039 Posts

MadeMyDay Reply #2, 18 years, 1 month ago

Hi,

Hi - how can I get dropMenu to only show the current level of documents and folders (siblings) and JUST the children of the current document?

[[DropMenu? &startDoc=[*parent*] &levelLimit=`2`]]

So the start doc is the actual parent (displays all docs/folders of the current level) and level limit=2 means the level where you´re in plus the one beneath.

edit: ah okay... You also want to show the "grandparents" of the actual link? Then look at scotty´s solution wink

MODx deutsch | Webdesign Karlsruhe | Ressourcen für Webdesign

1,193 Posts

ScottyDelicious Reply #3, 18 years, 1 month ago

Actually, you want to call dropmenu like this [[DropMenu]]. Do not set the startDoc or levelLimit. You can turn the levels on and off, depending on which item/parent folder is selected in the menu using the style sheet.

It is all done with CSS. DropMenu outputs the menu structure as a list. you simply style the list with CSS.
If the <div> that your menu lives in has an id of "pages" (i.e. <div id="pages">), you would have CSS that looks like this:

#pages li {
	list-style:none;
}
/* color & style for root level active folder
-----------------------------------------------*/
#pages li.here, #pages li.here a {
	color:#e8c57f;
}

/*  turn off level 2 folders (sub menu items) */
#pages ul ul {
    display: none;
}

/* show the items in the level 2 folder path when you are there*/
#pages li.here ul {
   display: block;
	margin:0 0 0 20px;
}
/* color & Style for level 2 active folder
-----------------------------------------------*/
#pages li.here ul li a {/* An item in the 2nd level list, not currently selected */
	color:#eee; /* these items are white in the 2nd level list */
}
#pages li.here li.here a { /* The ACTIVE item in the 2nd level list */
	color:#e8c57f;/* these items are orange in the 2nd level list */
}

/*  turn off level 3 folders (sub menu items of sub menus) */
#pages ul li ul li ul li {
    display: none;
}

/* show the items in the level 3 folder path when you are there*/
#pages li.here ul li.here ul li {
   display: block;
	margin:0 0 0 0px;
}
/* color & Style for level 3 active folder
-----------------------------------------------*/
#pages li.here li.here ul li a { /* An item in the 3rd level list, not currently selected */
	color:#eee; /* these items are white in the 3rd level list */
}
#pages li.here li.here li.here a { /* The ACTIVE item in the 3rd level list */
	color:#f90; /* these items are orange in the 3rd level list */
}

I hope that helps! I use this particular method on my site (see the link in my signature). I added some random folders to my "Photo" menu. Check it out there.

-sD-
scotty Delicious

Husband, Father, Brother, Son, Programmer, Atheist, Nurse, Friend, Lover, Fighter.
All of the above... in no specific order.

I send pointless little messages

104 Posts

scraf Reply #4, 18 years ago

I’m trying to use that code scotty, and thanks, but I’ve got a wierd css issue.

I can’t it to work with this syntax.. ( menu tree stays open )

.navigation ul ul {
    display: none;
    color: #f00;
}
.navigation li.here ul {
   display: block;
}

....... but can with this syntax.... ( menu tree closes like it’s supposed to )

ul ul {
    display: none;
    color: #f00;
}
.navigation li.here ul {
   display: block;
}

( Calling the snippet with)

[!DropMenu?&levelLimit=2&topnavClass=navigation!]

Anyone have any ideas?

Renderred source...

<ul class="navigation">

    <li class="here">Home
<ul>
<li class="last"><a href="index.php?id=7" title="Home2">Home2</a></li>
</ul>
</li>
<li class="last"><a href="index.php?id=1" title="">Base Install</a></li>
</ul>

☆ A M B ☆
24,524 Posts

sottwell Reply #5, 18 years ago

The .navigation is the class name for the first level UL container. So if you say .navigation ul ul, you are actually referring to third level ul containers! So your .navigation ul (second level) will not be hidden.

I find it to be easier for me to remember where I am if I specify the tagname as well as the classname: ul.navigation

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

104 Posts

scraf Reply #6, 18 years ago

Edit:

Thanks, I had a d’oh moment there, but after actually comprehending your post, I’ve sorted it out.

Thanks again, that was taking far too long.

46 Posts

Trance Reply #7, 18 years ago

This is what I do...

I loaded the snippet : ListMenu (See attached file)
(I made a small config change, to make sure it lists the subs perfectly)

Now, I call the snippet in a TV. YEAH! Cause the extra work kicks hin here, if you have directory entries without any children you REALLY want to disable the snippet and the header of submenu (looks silly in my opinion). This is done by adjusting the snippet for that page. For lower children it ain’t needed.

So, still a bit of work, but because you want the submenus to be shown in a seperate menu, I assume (like my case) you use a horzontal main menu, and a vertical submenu. I am very happy with my result, works like a charm.

Hope this helps.. (it took me a while to get this solution working for me...

[center][img]http://gamerscollective.com/forums/uploads/banner.gif[/img][/center]

3 Posts

punkt Reply #8, 18 years ago

To throw in another idea, this is my modded DropMenu (see it live on my site www.theess.com).

If you call it like this
[tt][!DropMenu? &startDoc=`0` &levelLimit=`1`!][/tt]
it will only show top-level entries, and all entries in the active path. Say we call the top-level 0, and you clicked on an item that is a folder, than its contents (level 1) will be displayed too. If you then click on a level 1 entry, its contents (level 2) and its parents contents and the top-level items will be displayed. Hard to explain. Anyways, here’s the code:

Replace this:

        // it's a document inside a folder
        else 
        {
          $itm .= ($child['alias'] > '0' && !$selfAsLink && ($child['id'] == $modx->documentIdentifier)) ? $child[$textOfLinks] : '<a href="[~'.$child['id'].'~]" title="'.$child[$titleOfLinks].'">'.$child[$textOfLinks].'</a>';
          $itm .= ($debugMode) ? ' doc' : '';
        }
        $itm .= ($debugMode)? "$useCategoryFolders $isFolder $itsEmpty" : '';

        // loop back through if the doc is a folder and has not reached the max levels
        if ($isFolder && (($maxLevels == 0) || ($maxLevels > $listLevel + 1))) {
          $itm .= MakeMap($modx, $child['id'], $listLevel +1, $description, $titleOfLinks, $maxLevels, true, $pre, $post, $selfAsLink, $ie, $activeLinkIDs, $topdiv, $topdivClass, $topnavClass, $subdiv, $subdivClass, $subnavClass, $hereClass, $useCategoryFolders, $categoryClass, $showDescription, $descriptionField, $textOfLinks, $orderBy, $orderDesc, $debugMode);
        }

With this:

        // it's a document inside a folder
        else 
        {
          $itm .= ($child['alias'] > '0' && !$selfAsLink && ($child['id'] == $modx->documentIdentifier)) ? $child[$textOfLinks] : '<a href="[~'.$child['id'].'~]" title="'.$child[$titleOfLinks].'">'.$child[$textOfLinks].'</a>';
          $itm .= ($debugMode) ? ' doc' : '';
        }
        $itm .= ($debugMode)? "$useCategoryFolders $isFolder $itsEmpty" : '';

        // check if the doc is active
        $activeItem = false;
        if (is_array($activeLinkIDs)) {
          if (in_array($child['id'], $activeLinkIDs)) {
            $activeItem = true;
          }
        }

        // loop back through if the doc is a folder and has not reached the max levels, or if the doc is active
        if ($isFolder && (($maxLevels == 0) || ($maxLevels > $listLevel + 1) 
          || ($child['id'] == $modx->documentIdentifier) || ($activeItem == true))) {
          $itm .= MakeMap($modx, $child['id'], $listLevel +1, $description, $titleOfLinks, $maxLevels, true, $pre, $post, $selfAsLink, $ie, $activeLinkIDs, $topdiv, $topdivClass, $topnavClass, $subdiv, $subdivClass, $subnavClass, $hereClass, $useCategoryFolders, $categoryClass, $showDescription, $descriptionField, $textOfLinks, $orderBy, $orderDesc, $debugMode);
        }