servus, habe probs mit der Positionierung kann mir da einer helfen ?
schaut mal hier http://jsmenu.kj187.de/index.php?id=311
die untermenüs werden alle da links angezeigt.
Ein zweites Prob habe ich im Mozilla, dort ist komischerweise ein abstand zwischen ester und zweiter ebene warum ?
hoffe das mir da einer weiter helfen kann... thx
Positions problem:
menucode in den selben container wie das menu.
css dann -> position: relative;
Mozilla problem:
css:
body {
margin: 0px 0px 0px 0px;
padding: 0px;
}
dann müsste es passen 🙂
>> Positions problem:
>> menucode in den selben container wie das menu.
>> css dann -> position: relative;
check ich nicht ganz ;-/
in welchen Container ? also haue ich in meine designvolrage
zB <div id="mmContainer">###MENU###</div>
???
nee so:
<div class="menu">###menu######menucode###</div>
und das vom originalen code umbauen:
# append Menu JS to page
#page.11 = USER
#page.11.userFunc = user_menu->menuEnd
temp.menucode = USER
temp.menucode.userFunc = user_menu->menuEnd
humm ok, hab ich. komme der sache schon näher http://jsmenu.kj187.de/
habe also
page.10.marks.TOPMENU < temp.slideMenu
page.10.marks.MENUCODE = USER
page.10.marks.MENUCODE.userFunc = user_menu->menuEnd
...
<tr>
<td><div id="mainNavigation">###TOPMENU### ###MENUCODE###</div></td>
</tr>
...
div#mainNavigation {
position: relative;
}
aber es ist immernoch nicht richtig ;-(
body {
text-align: center;
padding: 0px;
margin: 0px 0px 0px 0px;
background: #ffffff;
}
body text-align center dirn um es auch im ie zu centern?
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
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.