ist alles jetzt drin.. aber nothing
http://jsmenu.kj187.de/index.php?id=311
;-(
in den untermenü punten setzt er jetzt alles center
grrr...
kannst mich ja mal per ICQ anquatschen wenn du magst
#127448744
www.meade.de
also ich habe ebenmal hin gesehen..
passt doch.
wenn du noch fragen hast rede mich im icq an, sorum ist es besser würde ich sagen. 😉
ne leider nein.. das untermenu was raus gescrollt kommt ist zu weit unten und links...
mit ICQ:
ja würd ich gern, aber habe probleme beim adden von usern g* benutze scheiss trillian
die position vom menu stellt man in der phpdatei ein und für operer braucht man ein png mit transparentem hg.
du solltest das workaround mal grundlich lesen da steht nämlich alles drin #paralyzed#
Kennt jemand das Problem, dass im IE die Menüs immer wieder abhauen, obwohl man sich mit der Maus über dem Submenu-Item befindet!?
An was kann's liegen???
Passiert eigentlich ausschließlich bei "Main 002".
Mit welcher IE Version hast du denn getestet?
Ich hab mir deine Seite mit dem IE6 angeguckt und es gab keine Probleme.
das mit dem abhauen der menus liegt an falschen java libs.
saug sie dir von einer meiner Webseiten.
Hi Typo3ler,
@ funzt das Menu auch mit 3.7 oder gibt es da irgendwelche Probleme?
@ Liberation
steht das angebot noch da man dich per icq anschreiben kann? Bin noch nicht so fit was typo3 angeht und wollte gern das menu in meinen template einbauen, da es genau das ist wonach ich gesucht hab!
gruß
Stefan
Das Menü funktioniert ohne Probleme mit Typo3.7
Ich möchte gerne die Transparenz der Roll Over Navi einstellen.
Im CSS habe ich nihts in der Richtung gefunden.
Wie wird das eingestellt?
Vielleicht mal in der php Datei nachschauen -🙂
Hi Leute,
wenn ich mir den ganzen thread anschaue, hatten verdammt viele Leute dasselbe Problem wie ich im Moment, dass nämlich die Schrift auf der ersten gmenu-Ebene beim Rollover verschwindet. Ich werde auch langsam zum Hirsch! Ich steige mit meinem gsunden Halbwissen über das Zusammenspiel aller Komponenten (ts, html, php, js, css) dieser Menüstruktur nicht soweit durch, dass ich weiß, wo ich nach dem Fehler suchen muss. Fehler zu sehen auf Seite http://www.textandimage.de.
Mein ts:
seite = PAGE
seite.typeNum = 0
seite.stylesheet = fileadmin/gl/stylesheet.css
# Benoetigte Libaries einfuegen
seite.includeLibs.ypMenu = fileadmin/gl/ypmenu.phpx
seite.headerData.10 = TEXT
seite.headerData.10.value = <script type="text/javascript" src="fileadmin/gl/ypSlideOutMenus.js" language="JavaScript"></script><script type="text/javascript" src="fileadmin/gl/jslib.js" language="JavaScript"></script>
seite.headerData.20 = TEXT
seite.headerData.20.value = <link rel="stylesheet" type="text/css" href="fileadmin/gl/stylesheet.css">
seite.10 = TEMPLATE
seite.10 {
template = FILE
template.file = fileadmin/gl/temp_main.htm
workOnSubpart = DOKUMENT
marks.INHALT = CONTENT
marks.INHALT < styles.content.get
marks.MENU_MAIN >
marks.MENU_MAIN = HMENU
marks.MENU_MAIN.1 = GMENU
marks.MENU_MAIN.1 {
IProcFunc = user_menu->firstLevel
expAll = 1
wrap = |
IFSUB = 1
IFSUB {
wrap = |
XY = [50.w]+20, 25
backColor = #cccccc
50 = TEXT
50 {
text.field = title
fontSize = 10
fontFile = fileadmin/fonts/arial.ttf
fontColor = #222222
offset = 10,17
niceText = 1
}
100 = || IMAGE
100.file = fileadmin/gl/spacer.gif
}
NO {
wrap = |
XY = [50.w]+20, 25
backColor = #cccccc
50 = TEXT
50 {
text.field = title
fontSize = 10
fontFile = fileadmin/fonts/arial.ttf
fontColor = #222222
offset = 10,17
niceText = 1
}
100 = || IMAGE
100.file = fileadmin/gl/spacer.gif
}
RO < marks.MENU_MAIN.1.NO
RO = 1
RO {
backColor = #aaaaaa
}
IFSUBRO < marks.MENU_MAIN.1.NO
IFSUBRO = 1
IFSUBRO {
backColor = #aaaaaa
}
}
marks.MENU_MAIN.2 = TMENU
marks.MENU_MAIN.2 {
IProcFunc = user_menu->secondLevel
expAll = 1
NO.linkWrap = <li>|</li>
}
marks.MENU_MAIN.3 = TMENU
marks.MENU_MAIN.3 {
IProcFunc = user_menu->thirdLevel
expAll = 1
NO.linkWrap = <li>|</li>
}
marks.MENU_MAIN.4 = TMENU
marks.MENU_MAIN.4 {
IProcFunc = user_menu->fourthLevel
expAll = 1
NO.linkWrap = <li>|</li>
}
}
# append Menu JS to page
seite.11 = USER
seite.11.userFunc = user_menu->menuEnd
Mein supereinfaches template:
<html>
<head>
<title></title>
</head>
<body BGCOLOR="#AAAAAA">
<!-- ###DOKUMENT### begin -->
<br>
<TABLE BORDER="0" ALIGN="LEFT" CELLPADDING="0" CELLSPACING="0" WIDTH="900">
<tr>
<td>
###MENU_MAIN###
</td>
</tr>
<br>
<tr>
<TD ALIGN="CENTER">
<img src="fileadmin/gl/flowers.jpg" border="0" width="900">
</TD>
</tr>
<tr>
<td>
###INHALT###
</td>
</tr>
</table>
<!-- ###DOKUMENT### end -->
</body>
</html>
Und mein css:
/* GENERAL fonts */
P, OL, UL, DIV, H1, H2, H4, H5, H6 {
font-family: Verdana, Arial, Helvetica, Geneva, SunSans-Regular;
font-size: 11px;
color: #004A85;
}
P { line-height:16px}
TD#content UL { line-height:16px; padding-left: 25px; margin-left:0px;}
H1 {
font-size: 16px;
background-image: url(../images/underline.gif);
background-repeat: no-repeat;
background-position: left bottom ;
padding-bottom: 3px;
}
H3 {
font-size: 16px;
background-image: url(../images/download.gif);
background-repeat: no-repeat;
background-position: left bottom ;
padding-bottom: 3px;
}
H4 { font-size: 16px;}
H2 { font-size: 13px;}
P, H1, H2, H3 {margin: 0px 0px 5px 0px;}
H5 {margin: 30px 0px 0px 18px; font-size: 16px; color: #ffffff;}
H6 {margin: 0px 0px 0px 21px; font-size: 10px; color: #ffffff; font-weight: bold;}
DIV#search {margin: 11px 0px 15px 10px; padding-bottom: 15px;}
.submit {float: left; }
/*background: url(../images/search.gif); background-repeat: no-repeat; width: 19px; height: 22px; border:0px;*/
.textbox {background-color:#ffffff; color:color:#004A85; border:1px solid #cccccc;}
.select {float: left; background-color:#ffffff; color:color:#004A85; border:1px solid #cccccc;}
body {
padding-left: 0px;
padding-top: 0px;
margin: 0px 0px 0px 0px; background-color: white;
}
/* overflow: hidden; /* To suppress the vertical scrollbar for the whole page in IE */
.header_home {
width: 941px;
height: 373px;
background-color: #ffffff;
float: left;
margin:0;
padding:0;
z-index: 1;
}
.header_main {
width: 941px;
height: 243px;
background-color: #ffffff;
float: left;
margin:0;
padding:0;
z-index: 1;
}
DIV#topmenu {
font-family: Verdana, Arial, Helvetica, Geneva, SunSans-Regular;
font-weight: bold;
text-align: right;
background-color: #ffffff;
width: 941px;
height: 25px;
/*margin: 0px 0px 0px 0px;*/
position: absolute;
padding:0;
margin: 5px 0px 0px -5px;
z-index: 1;
}
.logo span {
display: none;
}
.logo a {
width:230px;
height:67px;
background-image: url(../images/sciworx_logo.jpg);
background-repeat: no-repeat;
background-color: #ffffff;
background-position: 8px 15%;
margin: 25px 0px 0px 0px;
position: absolute;
padding:0;
z-index: 1;
color: #000
}
DIV#menu_1 {
width:711px;
height:67px;
background-color: #88A6C3;
border-left: solid 1px #ffffff;
margin: 25px 0px 0px 230px;
position: absolute;
padding:0;
z-index: 2;
visibility:hidden;
}
DIV#sitename_home {
width: 230px;
height: 280px;
background-color: #004A85;
border-top: solid 1px #ffffff;
padding:0;
margin: 92px 0px 0px 0px;
position: absolute;
z-index: 1;
}
DIV#sitename_main {
width: 230px;
height: 150px;
background-color: #004A85;
border-top: solid 1px #ffffff;
padding:0;
margin: 92px 0px 0px 0px;
position: absolute;
z-index: 1;
}
DIV#siteimage_home {
width: 711px;
height: 280px;
background-color: #ffffff;
background-image: url(../images/home.jpg);
background-repeat: no-repeat;
border-top: solid 1px #ffffff;
border-left: solid 1px #ffffff;
margin: 92px 0px 0px 230px;
position: absolute;
z-index: 1;
}
DIV#siteimage_main {
width: 711px;
height: 150px;
background-color: #ffffff;
/*background-image: url(../images/home.jpg);*/
background-repeat: no-repeat;
border-top: solid 1px #ffffff;
border-left: solid 1px #ffffff;
margin: 92px 0px 0px 230px;
position: absolute;
z-index: 1;
}
div#main {
width: 941px;
height: auto;
background-color: #ffffff;
float: left;
margin:0;
padding:0;
border-top: solid 1px #ffffff;
z-index: 1;
}
TD#rootmenu {
width: 691px;
border-left: solid 1px #ffffff;
padding-left: 10px;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 0px;
vertical-align: top;
font-size: 11px;
font-weight: bold;
}
TD#rootmenu A:link, A:visited, A:active {
text-decoration: none;
color:black;
}
TD#rootmenu A:hover {
text-decoration: underline;
color:white;
}
TD#content {
width: 711px;
vertical-align: top;
border-left: solid 1px #ffffff;
}
.content { margin: 20px 20px 20px 25px; }
TD#content A:link, A:visited, A:active {
text-decoration: none;
color:black;
}
TD#content A:hover {
text-decoration: underline;
color:white;
}
TD#content_left {
vertical-align: top;
width: 210px;
background-color: green;
padding-left: 10px;
padding-right: 10px;
padding-top: 15px;
padding-bottom: 10px;
height: 275px;
}
TD#content_left A:link, A:visited, A:active {
text-decoration: none;
color:white;
}
TD#content_left A:hover {
text-decoration: underline;
}
DIV#footer {
width: 941px;
height: 20px;
background-color: #ffffff;
padding-top: 2px;
border-top: solid 2px #004A85;
color: #004A85;
font-size: 10px;
text-align: center;
font-weight: bold;
float: left;
margin-top: 3px;
}
DIV#footer A:link, A:visited, A:active {
text-decoration: none;
color:#004A85;
}
DIV#footer A:hover {
text-decoration: underline;
color:#004A85;
}
.tx-lastupdate-pi1 {
float: left; margin: 0px 0px 0px 10px;
}
.imgtext-table {
padding-top: 10px;
}
/* Menu 2 column */
TD#menu_2 {
vertical-align: top;
width: 230px;
background-color: #EDF2F6;
padding-top: 10px;
height: 300px;
}
TD#menu_2 DIV A {
font-weight:bold;
color: #011D65;
text-decoration: none;
}
TD#menu_2 DIV A:hover {
text-decoration: underline;
}
/* MENU 2, level 1, normal state (NO) */
TD#menu_2 DIV.menu2-level1-no {
font-size: 11px;
padding-top:5px;
padding-bottom:5px;
background-image: url(media/bullets/bullet1_h.gif);
text-indent: 10px;
border-bottom: 1px solid #ffffff;
/*border-bottom: 1px dotted #999999;background-color: #85A4C2;filter:alpha(opacity='70', style='0'); border-bottom: 1px solid #ffffff;
*/
}
/* MENU 2, level 1, active state (ACT) */
TD#menu_2 DIV.menu2-level1-act {
font-weight:bold;
font-size: 11px;
padding-top:5px;
padding-bottom:5px;
background-image: url(media/bullets/bullet1_h.gif);
border-bottom: 1px solid #ffffff;
text-indent: 10px;
/*background-color: #015BA2;filter:alpha(opacity='90', style='0')*/
}
TD#menu_2 DIV.menu2-level1-act A {
color: #011D65;
}
/* MENU 2, level 2, normal state (NO) */
TD#menu_2 DIV.menu2-level2-no {
font-size: 10px;
padding-left:20px;
padding-top:2px;
padding-bottom:2px;
padding-right:2px;
}
/* MENU 2, level 2, active state (ACT) */
TD#menu_2 DIV.menu2-level2-act {
font-size: 10px;
font-weight:bold;
padding-left:20px;
padding-top:2px;
padding-bottom:2px;
padding-right:2px;
text-decoration: underline;
background: url(media/bullets/bullet1_h.gif) no-repeat left 1px;
}
DIV#topmenu11 SPAN {
}
DIV#topmenu SPAN A {
color:#011D65;
text-decoration: none;
}
DIV#topmenu SPAN A:hover {
text-decoration: underline;
}
/* MENU 3, level 1, normal state (NO) */
DIV#topmenu SPAN.topmenu-no {
font-size: 11px;
}
/* MENU 3, level 1, active state (ACT) */
DIV#topmenu SPAN.topmenu-act {
font-size: 11px;
color:black;
}
DIV#topmenu SPAN.topmenu-act A {
color:black;
text-decoration: underline;
}
/**
*Menu Styles
*/
.mmContent {
font-size: 9px;
font-family: Verdana, Arial, Helvetica, Geneva, SunSans-Regular;
}
.mmContent ul {
margin: 0px; padding: 0px;
list-style: none;
z-index:2;
position:relative;
left:0px; top:0px;
}
.mmContent li {
padding: 0px;
margin: 0px;
}
.menuBackground {
position:absolute;
left:0px; top:0px;
z-index:1;
}
.mmContent li a {
display: block;
color: #DEF2FE;
font-weight: bold;
font-size: 9px;
width: 150px;
padding: 5px;
text-decoration: none;
border-bottom: solid 1px #011D65;
}
* html .mmContent li a {
width: 160px;
width: 160px;
}
.mmContent li a:link {
color: #011D65;
}
.mmContent li a:visited {
color: #011D65;
}
.mmContent li a:hover{
background: #ffffff;
color: #011D65;
}
.mmContent li a:active {
background: #ffffff;
color: #011D65;
}
.mmContent li a.submenu {
background: url(media/bullets/bullet1_h.gif) no-repeat right 1px;
}
.mmContent li a.submenu:hover {
background: #ffffff url(media/bullets/bullet1_h.gif) no-repeat right 1px;
color: #011D65;
}
/**
*Menu Styles for our belove IE 5.01
*/
.mmContentb {
font-size: 9px;
font-family: Verdana, Arial, Helvetica, Geneva, SunSans-Regular;
}
.mmContentb ul {
margin: 0px; padding: 0px;
list-style: none;
z-index:2;
position:relative;
left:0px; top:0px;
}
.mmContentb li {
padding: 0px;
margin: 0px;
}
.menuBackground {
position:absolute;
left:0px; top:0px;
z-index:1;
}
.mmContentb li a {
display: block;
color: #DEF2FE;
width: 150px;
padding: 5px;
font-weight: bold;
text-decoration: none;
border-bottom: solid 1px #011D65;
}
* html .mmContentb li a {
width: 160px;
width: 160px;
}
.mmContentb li a:link {
background: #DEF2FE;
color: #011D65;
}
.mmContentb li a:visited {
background: #DEF2FE;
color: #011D65;
}
.mmContentb li a:hover{
background: #ffffff;
color: #011D65;
}
.mmContentb li a:active {
background: #ffffff;
color: #011D65;
}
.mmContentb li a.submenu {
background: url(media/bullets/bullet1_h.gif) no-repeat right 1px #DEF2FE;
}
.mmContentb li a.submenu:hover {
background: #ffffff url(media/bullets/bullet1_h.gif) no-repeat right 1px;
color: #011D65;
}
Alle code-Schnipsel fein brav zusammengeklaut aus diesem thread oder den Seiten von Liberation, aber wahrscheinlich passt irgendetwas noch nicht zusammen.
Zudem habe ich noch die folgenden zwei Probleme:
1) Das Positioning der dropdown-Menüs stimmt nicht. Wenn ich es nur in der ypmenu.php ändere, reicht das für eine saubere Justierung nicht. Womit muss die Positionierung in der ypmenu.php zusammenpassen?
2) Das Timing der slidedowns und slideouts ist auch noch nicht wirklich gut. Irgendwie macht das Menü dem Betrachter noch nicht wirklich Spaß, da haut noch zuviel an der falschen Stelle/Zeit ab...
Kann mir jemand helfen?
Grüße,
Guido
2) Das Timing der slidedowns und slideouts ist auch noch nicht wirklich gut. Irgendwie macht das Menü dem Betrachter noch nicht wirklich Spaß, da haut noch zuviel an der falschen Stelle/Zeit ab...
Das Timing kannst du in der ypSlideOutMenus.js verändern. Einfach mal bei den 2 folgenden Einträgen mit den Werten spielen 😉
ypSlideOutMenu.aniLen =
ypSlideOutMenu.hideDelay =
Wegen der Fehlenden Schrift musst du in dem TS nachgucken.
Ich hatte das Problem auch, habs aber hingekriegt.
Ich werd mir das TS von dir nachher genauer angucken...
Liberation schriebVielleicht mal in der php Datei nachschauen -🙂
#
OK, da hatte ich es als letztes vermutet.
Ich hätte das halt im CSS erwartet .
Das dieses Style nun hart ins PHP gecode ist ...
o.O
Vielleicht ein kleiner Verbesserungsvorschlag, für die ansonsten doch super Arbeit.
das muss in der php datei stehen weil diese jeden browser typ ein anderes style verpasst das das menu immer sauber läuft. 🙂
Hi SilverBlue,
konntest Du mein ts mal checken wegen des Verschwindens der Schrift beim Rollover auf meinem GMENU?
Der Fehler kann doch nur hier liegen:
RO < marks.MENU_MAIN.1.NO
RO = 1
RO {
backColor = #aaaaaa
}
IFSUBRO < marks.MENU_MAIN.1.NO
IFSUBRO = 1
IFSUBRO {
backColor = #aaaaaa
}
}
Any ideas?
Danke Dir/Euch!
Hi Leute,
ich versuche, wie bei www.sci-worx-emv.de im 1. Level bei Hover und Active ein roter border-bottom angezeigt wird. Leider komme ich nicht zum Erfolg. Vielleicht kann mir jemand weiterhelfen?
Habe z.B. u.a. folgendes versucht:
RO < temp.ypMenu.1.NO
RO = 1
RO {
wrap = <div style="border-bottom: solid 2px #FF0000"> | </div>
backColor = #88BCE8
30 >
oder (mit entsprechendem CSS-Eintrag)
RO < temp.ypMenu.1.NO
RO = 1
RO {
wrap = <div class="menu_border"> | </div>
backColor = #88BCE8
30 >
Vielen Dank.
Bei www.sci-worx-emv.de ist das per Gifbulder gemacht.
Ja ist per Gifbuilder.
NO {
wrap = |
#button grösse
XY = 177, 67
#transparentBackground = 1
backColor = #011D65 || #004A85 || #015BA2 || #88A6C3
50 = TEXT
50 {
text.field = title
fontSize = 15
fontFile = fileadmin/fonts/Arial.ttf
#fontFile = fileadmin/fonts/55HelveNeuRom.PFB
fontColor = #ffffff
align = center
offset = 0,36
#offset = -[50.w] + 90,36
niceText = 1
}
#Menu Balken bei mouseover am fuss der Schaltfläche
99 = IMAGE
99.file = GIFBUILDER
99.file {
XY = 400, 67
90 = IMAGE
90.file = fileadmin/template/images/line_menu.gif
90.offset = 0, 64
transparentBackground = 1
}
100 = || IMAGE
100.file = fileadmin/template/images/spacer.gif
}
bitte
Hallo,
habe mir mal die mühe gemacht und das problem beseitigt das das menu bisher nur mit config.no_cache=1 sauber auf allen browsern läuft.
Habe dazu das php und den css code überarbeitet/geändert
PHP datei:
<?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.xyz.de)
*
* @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 = 28; // inital offset values for the first level elements
var $offsetX = 0;
var $sublevelWidth = 154; // width and height values for sublevel items
var $sublevelHeight = 22;
var $padding = 5;
var $fontSize = 9;
var $breakpoint = 28; // recalculate width of text after x characters
var $secPadding = 12; // 16 padding inc. border
var $fontFile = 'fileadmin/template/fonts/verdana.ttf'; // font file needed to calculate linebreaks
var $transBg = 'fileadmin/template/img/menu_bg.png'; // transparent PNG file - needed to fix a transparency bug in Mac IE 5
/**
* 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("
", ' <br> ', str_replace("
", ' <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>';
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>
";
$items .= '<div class="mmlink">'. $item['link'] ."</div>
";
$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->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("
", $output);
$output .= "
<script type="text/javascript">
"
. implode("
", $menus) ."
ypSlideOutMenu.writeCSS();
". $GLOBALS['TSFE']->applicationData['ypTemp']['js'] ."
</script>
";
return $output;
}
}
}
?>
CSS code für das menu:
/*
*CSS-Style to build slideoutmenu by Alex.Elsner <alex.elsner@cms-medien-design.de>
*/
.mmContent DIV A {
font-size: 9px; font-family: Verdana, Arial, Helvetica, Geneva, SunSans-Regular;
font-weight: bold;
line-height: 11px;
padding: 5px;
text-decoration: none;
display: block;
color: #011D65;
background: #E1EDFD;
margin: 0px 0px 0px 0px;
border-bottom: solid 1px #011D65;
}
/* folgende anweisung wird nicht vom ie interpretiert */
.mmContent[id] DIV A {
-moz-opacity:.9;
filter:alpha(opacity=90);
background: transparent;
background-image: url(/fileadmin/template/img/menu_bg.png);
}
/* für IE >5 */
* html .mmContent DIV A {
width: 154px;
width: 154px; /* für IE 6 */
-moz-opacity:.9; /* für IE 6 */
filter:alpha(opacity=90); /* für IE 6 */
}
.mmContent DIV.mmlink A:hover {
background: #cccccc;
color: #011D65;
}
.mmContent DIV.mmlink A:active {
background: #cccccc;
color: #011D65;
}
.mmContent DIV.mmlink A.submenu {
background: #E1EDFD url(/fileadmin/template/img/nav_arrow.gif) no-repeat right 0px;
color: #011D65;
}
.mmContent DIV.mmlink A.submenu:hover {
background: #cccccc url(/fileadmin/template/img/nav_arrow_over.gif) no-repeat right 0px;
color: #011D65;
}
Habe es in den Browsern ie 5, 5.5, 6, firefox, mozilla und Operer getestet und es funktioniert einwandfrei.
Im ie 5 sieht das menu nun sogar deutlich besser aus. 🙂
Alle browser bekommen jetzt den selben style zugewiesen.
Grüsse Liberation