Zum Inhalt springen

ypMenu Anleitung !?

Erstellt am 8. Februar 2006 · 22 Antworten · letzte Antwort am 13. Februar 2006 · Seite 1 von 2

Tags: Frage

woida ·

Dann wirf doch mal einen kritischen Blick in deinen Quellcode: Du weißt deinen Links die Klasse "mmlink" zu. Die ist aber nirgends definiert.
Dafür gibts aber mmContentb über das du verschiedene Listen formatierst. Nur gibt es in deinem Quellcode keine einzige Liste...

So wies aussieht, hast du da einfach was aus meheren Threads zusammengewürfelt.

michlbeck ·

noch ne frage...

hab die dateien von www.sci-worx.com genommen. alles wird super angezeigt, nur wenn das menü auf ebene 2 rechts ausfahren soll, soll doch die menu_sub mit den ">>" angezeigt werden. das tuts aber bei mir nicht.

terranet ·

Könnte mir jemand nochmals eine Sammlung der funktionierenden Dateien + dazugehörige Templates,Vorlage,CSS schicken, oder hier posten ? Danke Harry

terranet ·

@woida:

Vertikales-Menü:
Kopiert-geändert-gestartet-funktioniert

Horizontales-Menü:
Vielleicht kann wer wie woida kurz soetwas posten ???? Dann verstehen es auch wir Dummen #angry#

terranet ·

Hm,

1) Datei ausgetauscht ...
2) <br/> im Template weggelassen
3) Positionen für das Menü stimmen noch nicht - welche gehören da geändert ??

terranet ·

@Punkt3)

var $offsetY = 24; // inital offset values for the first level elements

var $offsetX = 0;

damit ist es fertig !

ypmenu.php für Horizontal lautet :

<?php
/***************************************************************
*  Copyright notice
* 
*  (c) 2003 Andreas Tschirpke (tschirpke@at-mediendesign.de)
*  All rights reserved
*
*  This script is part of the Typo3 project. The Typo3 project is
*  free software; you can redistribute it and/or modify
*  it under the terms of the GNU General Public License as published by
*  the Free Software Foundation; either version 2 of the License, or
*  (at your option) any later version.
*
*  The GNU General Public License can be found at
*  http://www.gnu.org/copyleft/gpl.html.
*
*  This script is distributed in the hope that it will be useful,
*  but WITHOUT ANY WARRANTY; without even the implied warranty of
*  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
*  GNU General Public License for more details.
*
*  This copyright notice MUST APPEAR in all copies of the script!
***************************************************************/
/**
* User class to build Javascript Menu (www.sci-worx.com)
*
* @author Andreas Tschirpke <tschirpke@at-mediendesign.de>
*
* Modified by Alex.Elsner <alex.elsner@cms-medien-design.de>
*/

#$GLOBALS['TSFE']->set_no_cache();  // wird nicht mehr gebraucht :)

class user_menu {
   var $offsetY = 24; // inital offset values for the first level elements
   var $offsetX = 0;
   var $sublevelWidth = 177; // width and height values for sublevel items
   var $sublevelHeight = 22;
   
   var $padding = 5;
   var $fontSize = 10;
   var $breakpoint = 28; // recalculate width of text after x characters
   var $secPadding = 12; // 16 padding inc. border
   
   var $fontFile = 'fileadmin/template2/verdana.ttf'; // font file needed to calculate linebreaks
   var $transBg = 'fileadmin/menu_bg.png'; // transparent PNG file - needed to fix a transparency bug in Mac IE 5  //braucht man nicht mehr
   
   /**
    *   Dummy function to pass values to buildIndex
    *
    *  @param   array   Menu array including all needed menu items (created by TMENU)
    *   @param   array   Configuration array
    *   @return   array   returns modified $I array
    *   @access   private
    */
    function firstLevel($I,$conf) {
        return $this->buildIndex($I, $conf, 1);
    }
   /**
    *   Dummy function to pass values to buildIndex
    *
    *  @param   array   Menu array including all needed menu items (created by TMENU)
    *   @param   array   Configuration array
    *   @return   array   returns modified $I array
    *   @access   private
    */
   function secondLevel($I,$conf) {
      return $this->buildIndex($I, $conf, 2);
   }
   /**
    *   Dummy function to pass values to buildIndex
    *
    *  @param   array   Menu array including all needed menu items (created by TMENU)
    *   @param   array   Configuration array
    *   @return   array   returns modified $I array
    *   @access   private
    */
   function thirdLevel($I,$conf) {
        return $this->buildIndex($I, $conf, 3);
    }
   /**
    *   Dummy function to pass values to buildIndex
    *
    *  @param   array   Menu array including all needed menu items (created by TMENU)
    *   @param   array   Configuration array
    *   @return   array   returns modified $I array
    *   @access   private
    */
   function fourthLevel($I, $conf) {
           return $this->buildIndex($I, $conf, 4);
    }

      
   /**
    * Returns true if there is a submenu with items for the page id, $uid
    * Used by the item states "IFSUB" and "ACTIFSUB" to check if there is a submenu
    *
    * @param   integer      Page uid for which to search for a submenu
    * @return   boolean      Returns true if there was a submenu with items found
    * @access private
    */
      // copy from tslib_menu   
   function isSubMenu($uid)   {
         // Looking for a mount-pid for this UID since if that exists we should look for a subpages THERE and not in the input $uid;
      $mount_info = $GLOBALS['TSFE']->sys_page->getMountPointInfo($uid);
      if (is_array($mount_info))   {
         $uid = $mount_info['mount_pid'];
      }

      $recs = $GLOBALS['TSFE']->sys_page->getMenu($uid,'uid,pid,doktype,mount_pid,mount_pid_ol');
      foreach($recs as $theRec)   {
         if (!t3lib_div::inList('5,6',$theRec['doktype']) && !$theRec['nav_hide'])   {   // If a menu item seems to be another type than 'Not in menu', then return true (there were items!)
            return TRUE;
         }
      }
   }

   /**
    * Breaks textarea text into lines of specified width in order to feed Gifbuilder (see function makeTextImage)
    *
    * @param    string        $text: input text
    * @param    integer        $size: specified font size
    * @param    string        $font: absolute path to specified font file
    * @param    integer        $width: specified width of the image box
    * @return    array        array of lines of text
    */
       // copy from sr_sendcard
      // thanks and credits go to Peter Bowyer <peter@sendcard.org>
   function text_to_lines($text, $size, $font, $width) {
      $words = t3lib_div::trimExplode(' ', str_replace("\r", ' <br /> ', str_replace("\n\r", ' <br /> ', str_replace("|", ' <br /> ', $text))), 0);

      $p = 0;
      $lines = array();
      $lines[0] = '';

      for($i = 0; $i < count($words); $i++) {
         ($lines[$p] ) ? $test = $lines[$p].' '.$words[$i] : $test = $words[$i];

         $bbox = imagettfbbox($size, 0, $font, $test);

         if ($words[$i] == '<br />') {
            $p++;
            $lines[$p] = '';
         } elseif (($bbox[4] - $bbox[6]) > $width ) {
            $p++;
            $lines[$p] = $words[$i];
         } else {
            $lines[$p] = $test;
         }
      }
      return count($lines);
   }

   /**
    * Collects all needed information (width, height, x, y, level etc.) and structural information for the ypMenu.
    * Information are stored in $GLOBALS['TSFE']->applicationData['ypMenus']
    *
    * @param    array        $I: Array created by TMENU including all menu elements for the current level
    * @param    integer      $conf: Configuration array
    * @param    integer      $level: hierarchical depth
    * @return   array        $I: modified $I array
    */   
   function buildIndex($I, $conf, $level) {
         // fix IE 5.0 on windows
		 // no longer necessarily
      $clientAdjust = 0;
#      $clientinfo = t3lib_div::clientInfo();
#      if($clientinfo['SYSTEM'] == 'win' AND $clientinfo['BROWSER'] == 'msie' AND $clientinfo['VERSION'] < 5.5) {
#         $clientAdjust = 2;
#      }
      
         
      switch($level) {
      case "1":
            // only wrap in ypSlide Action if submenu is present
         if($this->isSubMenu($I['uid'])) {
               // JS actions
            $onmouseover = "ypSlideOutMenu.showMenu('menu" .$I['uid']. "'); over('" .$I['theName']. "');";
            $onmouseout = "ypSlideOutMenu.hideMenu('menu" .$I['uid']. "'); out('" .$I['theName']. "');";
            
               // collect data for correct positions
            $GLOBALS['TSFE']->applicationData['ypMenus'][$I['uid']]['level'] = $level;
            $GLOBALS['TSFE']->applicationData['ypMenus'][$I['uid']]['uid'] = $I['uid'];
            $GLOBALS['TSFE']->applicationData['ypMenus'][$I['uid']]['imgwidth'] = $I['val']['output_w'];
            $GLOBALS['TSFE']->applicationData['ypMenus'][$I['uid']]['imgheight'] = $I['val']['output_h'];
            $GLOBALS['TSFE']->applicationData['ypMenus'][$I['uid']]['width'] = $this->sublevelWidth;
            $GLOBALS['TSFE']->applicationData['ypMenus'][$I['uid']]['height'] = $this->sublevelHeight;
            $GLOBALS['TSFE']->applicationData['ypMenus'][$I['uid']]['dir'] = 'down';
            $GLOBALS['TSFE']->applicationData['ypMenus'][$I['uid']]['top'] = $this->offsetY;
            $GLOBALS['TSFE']->applicationData['ypMenus'][$I['uid']]['left'] = $GLOBALS['TSFE']->applicationData['ypTemp']['x'] + $this->offsetX;         
            
               // build ypMenu JS
            $GLOBALS['TSFE']->applicationData['ypTemp']['js'] .= "
menu". $I['uid'] .".onactivate = new Function(\"document.images['" .$I['theName']. "'].src = " .$I['theName']. "_h.src\");
menu". $I['uid'] .".ondeactivate = new Function(\"document.images['" .$I['theName']. "'].src = " .$I['theName']. "_n.src\");

";
         } else { // no ypMenu needed
            $onmouseover = "over('" .$I['theName']. "');";
            $onmouseout = "out('" .$I['theName']. "'); ";
         }
            // move right
         $GLOBALS['TSFE']->applicationData['ypTemp']['x'] += $I['val']['output_w'];
         
         $I['parts']['ATag_begin'] = '<a href="' .$I['linkHREF']['HREF']. '" onfocus="' . $I['linkHREF']['onFocus']. '" onmouseover="'. $onmouseover .'" onmouseout="'. $onmouseout .'" id="act'. $I['uid'] .'">';
         $I['parts']['ATag_end'] = '</a>';
		 // Mod for XHTML strict
#		 $I['parts']['image'] = str_replace("name", "id", $I['parts']['image']);
#		 $I['parts']['image'] = str_replace("border=\"0\"", "", $I['parts']['image']); 
      break;
      default: // every other level (TMENU)
         $title = $I['title'];
         
            // count lines if more than $this->breakpoint chars
         if(strlen($title) > $this->breakpoint) {
            $lines = $this->text_to_lines($I['title'], t3lib_div::freetypeDpiComp($this->fontSize), $this->fontFile, ($this->sublevelWidth - 2*$this->padding));
         } else {
            $lines = 1;
         }
            
            // if another submenu is present wrap link with JS actions an collect data
         if($this->isSubMenu($I['uid'])) {
            $href = $I['linkHREF']['HREF'];
            $onmouseover = "ypSlideOutMenu.showMenu('menu" .$I['uid']. "');";
            $onmouseout = "ypSlideOutMenu.hideMenu('menu" .$I['uid']. "');";
            $link = sprintf('<a href="%s" onmouseover="%s" onmouseout="%s" class="submenu">%s</a>',$href, $onmouseover, $onmouseout, $title);
            
            $GLOBALS['TSFE']->applicationData['ypMenus'][$I['uid']]['level'] = $level;
            $GLOBALS['TSFE']->applicationData['ypMenus'][$I['uid']]['uid'] = $I['uid'];
            $GLOBALS['TSFE']->applicationData['ypMenus'][$I['uid']]['width'] = $this->sublevelWidth;
            $GLOBALS['TSFE']->applicationData['ypMenus'][$I['uid']]['height'] = $this->sublevelHeight;
            $GLOBALS['TSFE']->applicationData['ypMenus'][$I['uid']]['dir'] = 'right';
            $GLOBALS['TSFE']->applicationData['ypMenus'][$I['uid']]['top'] = intval($GLOBALS['TSFE']->applicationData['ypMenus'][$I['pid']]['top']) + (($I['key']) * $this->sublevelHeight);
            $GLOBALS['TSFE']->applicationData['ypMenus'][$I['uid']]['left'] = intval($GLOBALS['TSFE']->applicationData['ypMenus'][$I['pid']]['left']) + intval($GLOBALS['TSFE']->applicationData['ypMenus'][$I['pid']]['width']);   
            $GLOBALS['TSFE']->applicationData['ypMenus'][$I['uid']]['parentId'] = $I['pid'];      

         } else { // nothing to be done here :)
            $link = $I['parts']['ATag_begin']. $title .$I['parts']['ATag_end'];
         }

            // move down
         if($I['key'] == 0) {
            $GLOBALS['TSFE']->applicationData['ypTemp'][$I['pid']]['y'] = intval($GLOBALS['TSFE']->applicationData['ypMenus'][$I['pid']]['top']);
         } else {
            $GLOBALS['TSFE']->applicationData['ypTemp'][$I['pid']]['y'] += $this->sublevelHeight + ($this->secPadding * ($lines-1)) + $clientAdjust;
         }

         
         $GLOBALS['TSFE']->applicationData['ypMenus'][$I['pid']]['items'][$I['uid']]['link'] = $link;
         $GLOBALS['TSFE']->applicationData['ypMenus'][$I['pid']]['items'][$I['uid']]['height'] = $this->sublevelHeight + ($this->secPadding * ($lines-1));
         $GLOBALS['TSFE']->applicationData['ypMenus'][$I['pid']]['items'][$I['uid']]['top'] = $GLOBALS['TSFE']->applicationData['ypTemp'][$I['pid']]['y'] - ($this->secPadding * ($lines-1));
         
         // save link in output array
      $I['parts']['ATag_begin'] = '
<a href="' .$I['linkHREF']['HREF']. '" onfocus="' . $I['linkHREF']['onFocus']. '" onmouseover="ypSlideOutMenu.showMenu(\'menu'.$I['uid'].'\');" onmouseout="ypSlideOutMenu.hideMenu(\'menu'.$I['uid'].'\');" id="level1id'.$I['uid'].'">';
      //$GLOBALS['TSFE']->applicationData['ypMenu'][$level][$I['pid']]['parts']['items'][] = implode('', $I['parts']);
      $I['parts'] = array();
      break;
      }
   
      return $I;
   }

   /**
    * Builds all HTML/JS Code to initialize all ypMenu layers. Must be writen at the end of the document
    *
    * @return   string        html/js code
    */      
   function menuEnd() {
         // all relevant data stored in applicationData['ypMenus'];      
      if(is_array($GLOBALS["TSFE"]->applicationData['ypMenus'])) {
            // fix differnet browser bugs to get a transparency effect
         $clientinfo = t3lib_div::clientInfo();
         $pngimg = false;
         $pngbg = false;
         $filter = false;
         $appendix = '';
         $bg = false;
		 	// no longer necessarily, all browser get same code
            // ie >= 5.5 on win and mozilla can render transparency by css
          if(($clientinfo['SYSTEM'] == 'win' AND $clientinfo['BROWSER'] == 'msie' AND $clientinfo['VERSION'] >= 5.5) OR ($clientinfo['SYSTEM'] == 'win' AND $clientinfo['BROWSER'] == 'net')) {
#            $filter = true;
#            $style = 'style="-moz-opacity:.9; filter:alpha(opacity=90); background-color: #E1EDFD"';
            // Mr. IE on Mac needs a special treatment - a transparent png in a img tag in the background
         } elseif($clientinfo['SYSTEM'] == 'mac' AND ($clientinfo['BROWSER'] == 'msie')) {
#            $pngimg = true;
#            $style = 'style="background-color: transparent"';
            // Opera and Mozilla on Mac can handle transparent pngs
         } elseif(($clientinfo['SYSTEM'] == 'mac' AND $clientinfo['BROWSER'] == 'net') OR ($clientinfo['BROWSER'] == 'opera')){
#            $pngbg = true;
#            $style = 'style="background-image: url(\''. $this->transBg .'\');"';
            // no transparency for the rest - go get firefox!
         } else {
#            $bg = true;
#            $style = 'style="background-color: transparent"';
#            $appendix = 'b';
         }
            
            // loop through all collected data (buildIndex) and render js
         foreach($GLOBALS["TSFE"]->applicationData['ypMenus'] as $menu) {
            $uid = $menu['uid'];
            $level = $menu['level'];
            $dir = $menu['dir'];
            $parentId = ($menu['parentId']) ? '"menu'.$menu['parentId'].'"' : 'null';
            $x = $menu['left'];
            $y = ($menu['parentId']) ? $GLOBALS['TSFE']->applicationData['ypMenus'][$menu['parentId']]['items'][$uid]['top'] : $this->offsetY;
            $width = $menu['width'];

            $items = '';
            $wholeHeight = 0;
            if(is_array($menu['items'])) {
               $itemcount = count($menu['items']);
               foreach($menu['items'] as $item) {
			   	// modifited
#                 $items .= '<li>'. $item['link'] ."</li>\n";
                 $items .= '<div class="mmlink">'. $item['link'] ."</div>\n";
                  $wholeHeight = $wholeHeight + $item['height'];
               }
            }
			// no longer necessarily
#            if($clientinfo['SYSTEM'] == 'win' AND $clientinfo['BROWSER'] == 'msie' AND $clientinfo['VERSION'] < 5.5) {
#               $wholeHeight = $wholeHeight + 2 * $itemcount;
#            }

            $height = ($menu['height']) * count($menu['items']);
            $output[] = sprintf('<div id="menu%dContainer" class="mmContainer"><div id="menu%dContent" class="mmContent%s" s="">', $uid, $uid, $appendix, $style); // L%d / $level
			// ul to div!!!
#            $output[] = sprintf('<ul class="mmLevel%d">%s</ul>', $level, $items);
			$output[] = sprintf('<div class="mmLevel%d">%s</div>', $level, $items);
				// no longer necessarily
				// trick Mac IE to display our transparent PNG
#            if($pngimg) {
#               $output[] = '<img src="' . $this-" alt="" />transBg .'" width="'. $width .'" height="'. $wholeHeight .'" class="menuBackground">';
#            }
            
            $output[] = '</div></div>';
            
            $menus[] = sprintf('menu%d = new ypSlideOutMenu("menu%d", "%s", %d, %d, %d, %d, %s)', $uid, $uid, $dir, $x, $y, $width, $wholeHeight, $parentId);
         }
      }
   
     if(is_array($output) && is_array($menus)) {
         $output = implode("\n", $output);
         $output .= "
<script type="\"text/javascript\"">\n"
. implode("\n", $menus) ."

ypSlideOutMenu.writeCSS();

". $GLOBALS['TSFE']->applicationData['ypTemp']['js'] ."
</script>
";
         return $output;
      }
    }
}
?>
terranet ·

Hm,

hab das Menü jetzt angepaßt - nur, wenn man
die Auflösung des Computers verändert, stimmen die Positionen der Submenüs nicht mehr 😢 ...
Welche Lösung gibt es da ?