Dec 04, 2008, 12:39 AM *
Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length
Search via SMF or Google: modx forums all of modxcms.com web
  MODxCMS.com   Forums   Help Login Register  
Pages: [1]   Go Down
  Print  
Author Topic: CSS and DropMenu  (Read 2070 times)
0 Members and 1 Guest are viewing this topic.
cino
Jr. Member
*
Posts: 35


« on: Jun 07, 2006, 06:20 PM »

Hi to all, I have a css problem. How can I have this result with a DropMenu:

grand father
  uncle
  father
    current item
      child one
        nephew
      child two

where current item, of course changes, so that just current item is bold?

Since there is a DropMenu bug, all items must be anchor, so SelfAsLink option is true.

Thanks in advance.
Logged
ppaulousek
Guest
« Reply #1 on: Jun 26, 2006, 04:45 PM »

I fear there is no CSS-solution for that. Since the class-identifiers are always applied to a li-element, which may have children, you cannot style a specific li element without its descendants: you have to exclude them explicitly from the desired style ("bold" for example) using CSS-statements which mirror the given sub-structure - which, of course, may vary. Awkward.
So you have to change the source of the snippet:

look for this line in the code:
Code:
if ($itm && !$selfAsLink && ($child['id'] == $modx->documentIdentifier)) {

and insert this one after the line above:
Code:
$itm = ($child['alias'] > '0' && !$selfAsLink && ($child['id'] == $modx->documentIdentifier)) ? $child[$textOfLinks] : '<a class="currPage" href="[~'.$child['id'].'~]" title="'.$child[$titleOfLinks].'">'.$pre.$child[$textOfLinks].$post .'</a>';

This will result in the link for the current page (and ONLY the current page, i.e. the a element), being styled with the class "currPage".
Hope this helps. At least it works for me...
« Last Edit: Jun 26, 2006, 04:52 PM by ppaul » Logged
ppaulousek
Guest
« Reply #2 on: Jun 28, 2006, 02:20 PM »

Just in case someone has notified my last post here:  Lips sealed
The hack I suggested works only on pages, not on folders.
Since the DropMenu-source is a bit strange I have to provide a complete new version, including a new parameter named "&currPage", the value given for this parameter will be used to CSS the "<A>" (not the "<LI>"!) for the current page with an ID of that value ("currPage" by default, if no value is passed), works only with selfAsLink=true:
Code:
// ###########################################
// DropMenu                                  #
// ###########################################
// Configurable menu / navigation builder using UL tags
// Offers optional DIV wrappers for top level and nested menus (useful for hover zones)
// as well as configurable classes for the DIV, UL, and LI elements.  It even
// marks ancestors of and the current element with a Class (indicating you are here
// and in this area of the site).  Also applies .last CSS class to final LI in each UL.
//
// Developed by Vertexworks.com and Opengeek.com
// Feel free to use if you keep this header and credits in place
//
// Inspired by List Site Map by Jaredc, SimpleList by Bravado,
// and ListMenuX by OpenGeek
//
// Configuration parameters:
//
// &menuName        - name of a placeholder for placing the output in the layout
// &topnavClass     - CSS class for styling the class assigned to the outermost UL
//
// TO DO: configuration parameters above, more usage examples, CSS examples, output indenting

// ###########################################
// Usage Examples                            #
// ###########################################
// Creates menu with wrapping DIV with id=myMenu, starting at the site root, two levels deep,
// with descriptions next to the links, and nested UL elements with class=nestedLinks; output
// of menu can be placed in layout using placeholder named myMenu ( e.g. [ +myMenu+ ] )
// [[DropMenu? &menuName=`myMenu` &startDoc=`0` &levelLimit=`2` &topdiv=`true` &showDescription=`true` &subnavClass=`nestedLinks`]]
//
// Creates topMenu from site root, including only 1 level, with class=topMenubar applied to the top level UL
// and class=activeLink applied to current page LI
// [[DropMenu? &menuName=`topMenu` &startDoc=`0` &levelLimit=`1` &topnavClass=`topMenubar` &here=`activeLink`]]
//
// Creates dropmenu 3 levels deep, with DIV wrappers around all nested lists styled with class=hoverZone
// and currentPage LI styled with class=currentPage
// [[DropMenu? &levelLimit=3 &subdiv=true &subdivClass=hoverZone &subnavClass=menuZone &here=currentPage]]
//
// Creates dropmenu of infinite levels, ordered by menutitle in descending order
// [[DropMenu?orderBy=menutitle&orderDesc=true]]

// ###########################################
// Configuration parameters                  #
// ###########################################

// $phMode [ true | false ]
// Whether you want it to output a [+placeholder+] or simply return the output.
// Defaults to false.
$phMode = false;

// $menuName [ string ]
// Sets the name of the menu, placeholder, and top level DIV id (if topdiv
// option is true). Set to "dropmenu" by default.
$phName = (!isset($phName)) ? 'dropmenu' : "$phName";

// $siteMapRoot [int]
// The parent ID of your root. Default 0. Can be set in
// snippet call with startDoc (to doc id 10 for example):
// [[DropMenu?startDoc=10]]
$siteMapRoot = 0;

// $removeNewLines [ true | false ]
// If you want new lines removed from code, set to true. This is generally
// better for IE when lists are styled vertically.
$removeNewLines = (!isset($removeNewLines)) ? false : ($removeNewLines==true);

// $maxLevels [ int ]
// Maximum number of levels to include. The default 0 will allow all
// levels. Also settable with snippet variable levelLimit:
// [[DropMenu?levelLimit=2]]
$maxLevels = 0;


// $textOfLinks [ string ]
// What database field do you want the actual link text to be?
// The default is pagetitle because it is always a valid (not empty)
// value, but if you prefer it can be any of the following:
// menutitle, id, pagetitle, description, parent, alias, longtitle, introtext
// TO DO: set text to be first non-empty of an array of options
$textOfLinks = (!isset($textOfLinks)) ? 'menutitle' : "$textOfLinks";

// $titleOfLinks [ string ]
// What database field do you want the title of your links to be?
// The default is pagetitle because it is always a valid (not empty)
// value, but if you prefer it can be any of the following:
// menutitle, id, pagetitle, description, parent, alias, longtitle, introtext
$titleOfLinks = (!isset($titleOfLinks)) ? 'description' : "$titleOfLinks";

// $pre [ string ]
// Text to append before links inside of LIs
$pre = (!isset($pre)) ? '' : "$pre";

// $post [ string ]
// Text to append before links inside of LIs
$post = (!isset($post)) ? '' : "$post";

// $selfAsLink [ true | false ]
// Define if the current page should be a link (true) or not (false)
$selfAsLink = (!isset($selfAsLink)) ? false : ($selfAsLink==true);

// $hereClass [ string ]
// CSS Class for LI and A when they are the currently selected page, as well
// as any ancestors of the current page (YOU ARE HERE)
$hereClass = (!isset($hereClass)) ? 'here' : $hereClass;

// $showDescription [true | false]
// Specify if you would like to include the description
// with the page title link.
$showDescription = (!isset($showDescription)) ? false : ($showDescription==true);

// $descriptionField [ string ]
// What database field do you want the description to be?
// The default is description. If you specify a field, it will attempt to use it
// first then fall back until it finds a non-empty field in description, introtext,
// then longtitle so it really tries not be empty. It can be any of the following:
// menutitle, id, pagetitle, description, parent, alias, longtitle, introtext
// TO DO: set description to the first non-empty of an array of options
$descriptionField = (!isset($descriptionField)) ? 'description' : "$descriptionField";


// $topdiv [ true | false ]
// Indicates if the top level UL is wrapped by a containing DIV block
$topdiv = (!isset($topdiv)) ? false : ($topdiv==true);

// $topdivClass [ string ]
// CSS Class for DIV wrapping top level UL
$topdivClass = (!isset($topdivClass)) ? 'topdiv' : "$topdivClass";

// $topnavClass [ string ]
// CSS Class for the top-level (root) UL
$topnavClass = (!isset($topnavClass)) ? 'topnav' : "$topnavClass";



// $useCategoryFolders [ true | false ]
// If you want folders without any content to render without a link to be used
// as "category" pages (defaults to true). In order to use Category Folders,
// the template must be set to (blank) or it won't work properly.
$useCategoryFolders = (!isset($useCategoryFolders)) ? true : "$useCategoryFolders";

// $categoryClass [ string ]
// CSS Class for folders with no content (e.g., category folders)
$categoryClass = (!isset($categoryClass)) ? 'category' : "$categoryClass";



// $subdiv [ true | false ]
// Indicates if nested UL's should be wrapped by containing DIV blocks
// This is useful for creating "hover zones"
// (see http://positioniseverything.net/css-dropdowns.html for a demo)
// TO CONSIDER: Setting a subdiv class at all turns on hover DIVs?
$subdiv = (!isset($subdiv)) ? false : ($subdiv==true);

// $subdivClass [ string ]
// CSS Class for DIV blocks wrapping nested UL elements
$subdivClass = (!isset($subdivClass)) ? 'subdiv' : "$subdivClass";



// $orderBy [ string ]
// Document field to sort menu by
$orderBy = (!isset($orderBy)) ? 'menuindex' : "$orderBy";

// $orderDesc [true | false]
// Order results in descending order?  default is false
$orderDesc = (!isset($orderDesc)) ? false : ($orderDesc==true);


// HACK: activeTreeOnly
// $activeTreeOnly [ true | false ]
// Define if the menutree should show all menuitems or only those in active menutree branch
$activeTreeOnly = (!isset($activeTreeOnly)) ? false : ($activeTreeOnly==true);

// mark the current page (PP)
$currPage = (!isset($currPage)) ? 'currPage' : $currPage;


// ###########################################
// End config, the rest takes care of itself #
// ###########################################

$debugMode = false;

// Initialize
$MakeMap = "";
$siteMapRoot = (isset($startDoc)) ? $startDoc : $siteMapRoot;
$maxLevels = (isset($levelLimit)) ? $levelLimit : $maxLevels;
$ie = ($removeNewLines) ? '' : "\n";
//Added by Remon: (undefined variables php notice)
$activeLinkIDs = array();
$subnavClass = '';

// Overcome single use limitation on functions
global $MakeMap_Defined;

if (!isset ($MakeMap_Defined)) {
  function filterHidden($var) {
    return (!$var['hidemenu']==1);
  }
  function filterEmpty($var) {
      return (!empty($var));
  }
  function MakeMap($modx, $listParent, $listLevel, $description, $titleOfLinks, $maxLevels, $inside, $pre, $post, $selfAsLink, $ie, $activeLinkIDs, $topdiv, $topdivClass, $topnavClass, $subdiv, $subdivClass, $subnavClass, $hereClass, $useCategoryFolders, $categoryClass, $showDescription, $descriptionField, $textOfLinks, $orderBy, $orderDesc, $activeTreeOnly, $currPage, $debugMode) {
    // Added by Remon. Define this variable _here_ ;-)
    $output = '';

    $children = $modx->getActiveChildren($listParent, $orderBy, (!$orderDesc) ? 'ASC' : 'DESC', 'id, pagetitle, description, isfolder, parent, alias, longtitle, menutitle, hidemenu, introtext, content_dispo, contentType, type, template');
    // filter out the content that is set to be hidden from menu snippets
    $children = array_filter($children, "filterHidden");
    $numChildren = count($children);

    if (is_array($children) && !empty($children)) {

      // determine if it's a top category or not
      $toplevel = !$inside;

      // build the output
      $topdivcls = (!empty($topdivClass)) ? ' class="'.$topdivClass.'"' : '';
      $topdivblk = ($topdiv) ? "<div$topdivcls>" : '';
      $topnavcls = (!empty($topnavClass)) ? ' class="'.$topnavClass.'"' : '';
      $subdivcls = (!empty($subdivClass)) ? ' class="'.$subdivClass.'"' : '';
      $subdivblk = ($subdiv) ? "<div$subdivcls>$ie" : '';
      $subnavcls = (!empty($subnavClass)) ? ' class="'.$subnavClass.'"' : '';
      $output = ($toplevel) ? "$topdivblk<ul$topnavcls>$ie" : "$ie$subdivblk<ul$subnavcls>$ie";

      //loop through and process subchildren
      foreach ($children as $child) {
        // figure out if it's a containing category folder or not
        $numChildren --;
        $isFolder = $child['isfolder'];
          $itsEmpty = ($isFolder && ($child['template'] == '0'));
        $itm = "";
        // mark current page with currPage
$cPage = ($child['id'] == $modx->documentIdentifier ? ' id="'.$currPage.'"' : '');

                // if menutitle is blank fall back to pagetitle for menu link
                $textOfLinks = (empty($child['menutitle'])) ? 'pagetitle' : "$textOfLinks";

          // If at the top level
        if (!$inside)
        {
          $itm .= ((!$selfAsLink && ($child['id'] == $modx->documentIdentifier)) || ($itsEmpty && $useCategoryFolders)) ?
                  $pre.$child[$textOfLinks].$post . (($debugMode) ? ' self|cat' : '') :
                  '<a '.$cPage.' href="[~'.$child['id'].'~]" title="'.$child[$titleOfLinks].'">'.$pre.$child[$textOfLinks].$post.'</a>';
          $itm .= ($debugMode) ? ' top' : '';
        }

        // it's a folder and it's below the top level
        elseif ($isFolder && $inside)
        {

          $itm .= ($itsEmpty && $useCategoryFolders) ?
                  $pre.$child[$textOfLinks].$post . (($debugMode) ? 'subfolder T': '') :
                  '<a '.$cPage.' href="[~'.$child['id'].'~]" title="'.$child[$titleOfLinks].'">'.$pre.$child[$textOfLinks].$post.'</a>'. (($debugMode) ? ' subfolder F' :'');
        }

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

        // BEGIN HACK: activeTreeOnly
        // loop back through if the doc is a folder and has not reached the max levels
        if ($isFolder && (($maxLevels == 0) || ($maxLevels > $listLevel +1))) {
          // activeTreeOnly TRUE
          if ($activeTreeOnly)
          {
          $makeMapYes = FALSE;
            if (is_array($activeLinkIDs))
            {
              if ($child['id'] == $modx->documentIdentifier || in_array($child['id'], $activeLinkIDs))
              {
              $makeMapYes = TRUE;
              }
            }
          }
          // activeTreeOnly FALSE or child is in active tree
          if (!$activeTreeOnly || $makeMapYes)
          {
            $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, $activeTreeOnly, $currPage, $debugMode);
          }
        }
        // END HACK: activeTreeOnly

        if ($itm && !$selfAsLink && ($child['id'] == $modx->documentIdentifier)) {
//
          $output .= "    <li class=\"$hereClass". ($numChildren == 0 ? ' last' : '')."\">$itm</li>$ie";
        }
        elseif ($itm) {
          // Added by Remon
          // define it here:
          $class = '';
          if ($numChildren == 0) {
            $class = 'last';
          }
          if (is_array($activeLinkIDs)) {
            if (in_array($child['id'], $activeLinkIDs)) {
              $class .= ($class ? ' ' : '').$hereClass;
            }
          }
          // it's an empty folder and using Category Folders
          if ($useCategoryFolders && $itsEmpty) {
            $class .= ($class ? ' ' : '').$categoryClass;
          }
          if ($class) {
            $class = ' class="'.$class.'"';
          }

          // TO DO: set description to the first non-empty of an array of options
          if ($showDescription && (!empty($child['$descriptionField']))) {
              $desc = " &ndash; ".$child['$descriptionField'];
          } elseif ($showDescription && (!empty($child['description']))) {
              $desc = ' &ndash; ' . $child['description'];
          } elseif ($showDescription && (!empty($child['introtext']))) {
              $desc = ' &ndash; ' . $child['introtext'];
          } elseif ($showDescription && (!empty($child['longtitle']))) {
              $desc = ' &ndash; ' . $child['longtitle'];
          } else {
              $desc = '';
          }

          $output .= "<li$class>$itm$desc</li>$ie";
          $class = '';
        }
      }
      $output .= "</ul>$ie";
      $output .= ($toplevel) ? (($topdiv) ? "</div>$ie" : "") : (($subdiv) ? "</div>$ie" : "");
    }
    return $output;
  }
  $MakeMap_Defined = true;
}

$currentID = $modx->documentIdentifier;
$parentID = $currentID;

// find the parent docs of the current "you-are-here" doc
// used in the logic to mark parents as such also
while ($parentID != $siteMapRoot && $parentID != 0) {
  $parent = $modx->getParent($parentID, 0);
  if ($parent) {
    $parentID = $parent['id'];
    $activeLinkIDs[] = $parentID;
  } else {
    $parentID = 0;
  }
}

if ($phMode) {
    // output to a [+placeholder+]
    $modx->setPlaceholder($phName, MakeMap($modx, $siteMapRoot, 0, $showDescription, $titleOfLinks, $maxLevels, false, $pre, $post, $selfAsLink, $ie, $activeLinkIDs, $topdiv, $topdivClass, $topnavClass, $subdiv, $subdivClass, $subnavClass, $hereClass, $useCategoryFolders, $categoryClass, $showDescription, $descriptionField, $textOfLinks, $orderBy, $orderDesc, $activeTreeOnly, $currPage, $debugMode));

} else {
    // return the output a "usual"
    return MakeMap($modx, $siteMapRoot, 0, $showDescription, $titleOfLinks, $maxLevels, false, rawurldecode($pre), rawurldecode($post), $selfAsLink, $ie, $activeLinkIDs, $topdiv, $topdivClass, $topnavClass, $subdiv, $subdivClass, $subnavClass, $hereClass, $useCategoryFolders, $categoryClass, $showDescription, $descriptionField, $textOfLinks, $orderBy, $orderDesc, $activeTreeOnly, $currPage, $debugMode);

}
Just create a new snippet and paste this code in.
So you can provide a CSS-style for #currPage (or whatever name you gave it) for the current page in the Dropmenu navigation.
« Last Edit: Jun 28, 2006, 02:34 PM by ppaul » Logged
davidm
Marketing & Design Team
*
Posts: 6,777


The best way to predict the future is to invent it


WWW
« Reply #3 on: Jun 28, 2006, 04:32 PM »

I'll give this a look as soon I have a few minutes.
Thanks for sharing this, will really be helpful !
Logged

.: nodeo.net : Pour un web libre, moderne et ouvert ! :: david-molliere.net : Suivez en "live" mes expérimentations et billets sur les CMS et autres applications web :.

*** Forums modxcms.fr Participez à l'élaboration du site MODx francophone ! ***

! Nouveau !  En live, ne manquez pas les news de modxcms.fr sur Twitter   ! Nouveau !

MODx est l'outil idéal pour les developpeurs et webdesigners qui cherchent un framework de gestion de contenu hautement flexible et performant, tout en étant simple d'accès pour les utilisateurs finaux.

Config : Apache 2.2.8 - MySQL 5.0.45 - PHP 5.2.6 | Debian 4.0 (Etch)

Réalisations sous MODx : | pargade-notaires.fr | soleil.info | gican.asso.fr | michelez-notaires.com | amadom.gerondicap.com | jocelyne-violet.net
ppaulousek
Guest
« Reply #4 on: Jun 28, 2006, 04:49 PM »

DropMenu seems to cause as many problems as it solves  Wink
To make looking at it a bit easier: I added my new parameter to the 3 lines which create a "<a href..."
It's not a very clever solution, but, anyway, the DropMenu itself is not a clever solution...  Roll Eyes
« Last Edit: Jun 28, 2006, 05:07 PM by ppaul » Logged
rthrash
Foundation
*
Posts: 9,575



WWW
« Reply #5 on: Jun 28, 2006, 05:49 PM »

ppaul,

I'm really looking forward to seeing the replacement you create  for building list menus. Thanks!
Logged

MODx is a framework that allows web professionals to turn over sites to end-users for daily maintenance without worrying. Community participation and questions are encouraged, especially when you help us help you, read the wiki, and review snippet parameters – even if you have to look at the source. Searching the forums helps, too.
Ryan Thrash
MODx Co-Founder
Principal @ Collabpad
work productively.
work intelligently.
work together.
ChuckTrukk
Committed to MODx
*****
Posts: 638



WWW
« Reply #6 on: Jun 29, 2006, 12:34 AM »

ppaul,

Thanks for the extension. This will solve a lot of problems.

PS - cant wait to see your menu building snippet.

Chuck
Logged

Chuck the Trukk
ProWebscape.com :: Nashville-WebDesign.com
- - - - - - - -
What are TV's? Here's some info below.
http://modxcms.com/forums/index.php/topic,21081.msg159009.html#msg1590091
http://modxcms.com/forums/index.php/topic,14957.msg97008.html#msg97008
ppaulousek
Guest
« Reply #7 on: Jun 29, 2006, 12:28 PM »

Quote
PS - cant wait to see your menu building snippet.
Hey!  Grin The "decimal-classification" was just an idea. The more I think about it, the more questions come up. The main limitation is, that with CSS you only have two attributes: ID and class.
(if CSS provided subclassing or inheritance which does *not* rely on the DOM - it would be way easy!)
My first approach is to define anything which is unique as an ID, and anything which is not as a class.
Taking this approach, every page can get its ID, which is reflecting its position in the structure and a class reflecting its "chapter"  (ID="3_2_1" class="3_2"). But if you need to CSS all items belonging to "3" - how to do it?
And how about that famous "here" attribute, provided by the actual DropMenu?
My main concern was, that CSS should not rely on nesting, that's what makes using DropMenu so painful.
Got to leave home now I'll continue later. If you have any remarks, suggestions, thoughts: Would be highly appreciated!! Smiley

Logged
doze
Coding Team
*
Posts: 3,237


....Boom!


« Reply #8 on: Jun 29, 2006, 12:46 PM »

But if you need to CSS all items belonging to "3" - how to do it?
Use multiple classes so that the item has all levels in its class? for exampe if ID="3_2_1" then class="3 3_2"
Logged

MODxWiki || Please, list wiki worthy material here!
Pages: [1]   Go Up
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP

Copyright © 2005-2008 MODxCMS, All rights reserved. Contact Us
Styles by ziworks.com

Powered by SMF 1.1.4 | SMF © 2005, Simple Machines LLC

Valid XHTML 1.0! Valid CSS!