www.meade.de: Seite 5

Unbekannter Benutzer · 2004-08-23T12:19:05+00:00

eben entdeckt: http://www.meade.de/ anscheinend auch mit T3 gemacht und ein wirklich geiles Navigationsmenü 🙂

Liberation · 21. März 2005 09:30

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

T.uX · 21. März 2005 09:47

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 ;-(

Liberation · 21. März 2005 10:12

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?

T.uX · 21. März 2005 10:19

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

Liberation · 21. März 2005 10:28

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. 😉

T.uX · 21. März 2005 10:34

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

Liberation · 21. März 2005 17:59

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#

Jay-R · 28. März 2005 18:49

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".

http://typo3.connectaserver.de/

SilverBlue · 28. März 2005 18:57

Mit welcher IE Version hast du denn getestet?
Ich hab mir deine Seite mit dem IE6 angeguckt und es gab keine Probleme.

Liberation · 28. März 2005 19:32

das mit dem abhauen der menus liegt an falschen java libs.
saug sie dir von einer meiner Webseiten.

McLoud · 30. März 2005 14:37

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

SilverBlue · 30. März 2005 15:20

Das Menü funktioniert ohne Probleme mit Typo3.7

maik · 31. März 2005 10:09

Ich möchte gerne die Transparenz der Roll Over Navi einstellen.

Im CSS habe ich nihts in der Richtung gefunden.

Wie wird das eingestellt?

Liberation · 31. März 2005 12:35

Vielleicht mal in der php Datei nachschauen -🙂

Guido · 2. April 2005 14:32

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

SilverBlue · 3. April 2005 12:51

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...

maik · 3. April 2005 13:57

Liberation schrieb
Vielleicht 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.

Liberation · 3. April 2005 18:06

das muss in der php datei stehen weil diese jeden browser typ ein anderes style verpasst das das menu immer sauber läuft. 🙂

Guido · 9. April 2005 09:35

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!

s.sach · 11. April 2005 08:30

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.