hallo
meine seite: http://www.strichmaennli.ch
setup:
seite = PAGE
seite.typeNum = 0
seite.stylesheet = fileadmin/MEADE-Menue/menu.css
# Benoetigte Libaries einfuegen
seite.includeLibs.ypMenu = fileadmin/MEADE-Menue/ypMenu.php
seite.headerData.10 = TEXT
seite.headerData.10.value = <script type="text/javascript" src="fileadmin/MEADE-Menue/ypSlideOutMenus.js" language="JavaScript"></script><script type="text/javascript" src="fileadmin/MEADE-Menue/jslib.js" language="JavaScript"></script><script src="fileadmin/template/blur.js" type="text/javascript" language="JavaScript"></script><script src="fileadmin/template/dt.js" type="text/javascript" language="JavaScript"></script>
page.bodyTag = <body onLoad="window.setTimeout('datumuhr()',1000)">
seite.10 = TEMPLATE
seite.10 {
template = FILE
template.file = fileadmin/template/root.html
workOnSubpart = DOKUMENT
marks.DOKUMENT = CONTENT
marks.DOKUMENT < styles.content.get
marks.BORDER >
marks.BORDER = HMENU
marks.BORDER.entryLevel = 1
marks.BORDER.special = directory
marks.BORDER.special.value = 3
marks.BORDER.1 = GMENU
marks.BORDER.1 {
IProcFunc = user_menu->firstLevel
expAll = 1
wrap = |
IFSUB = 1
IFSUB {
wrap = |
XY = [50.w]+20, 25
backColor = #EEF311
50 = TEXT
50 {
text.field = title
fontSize = 12
fontFile = fileadmin/fonts/verdana.ttf
fontColor = #222222
offset = 10,17
niceText = 1
}
# 100 = || IMAGE
# 100.file = fileadmin/MEADE-Menue/spacer.gif
}
NO {
wrap = |
XY = [50.w]+20, 25
backColor = #EEF311
50 = TEXT
50 {
text.field = title
fontSize = 12
fontFile = fileadmin/fonts/verdana.ttf
fontColor = #222222
offset = 10,17
niceText = 1
}
# 100 = || IMAGE
# 100.file = fileadmin/MEADE-Menue/spacer.gif
}
RO < marks.BORDER.1.NO
RO = 1
RO {
backColor = #EEF311
}
IFSUBRO < marks.BORDER.1.NO
IFSUBRO = 1
IFSUBRO {
backColor = #EEF311
}
}
marks.BORDER.2 = TMENU
marks.BORDER.2 {
IProcFunc = user_menu->secondLevel
expAll = 1
NO.linkWrap = <li>|</li>
}
marks.BORDER.3 = TMENU
marks.BORDER.3 {
IProcFunc = user_menu->thirdLevel
expAll = 1
NO.linkWrap = <li>|</li>
}
marks.BORDER.4 = TMENU
marks.BORDER.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
tt_content.header.20.1.fontTag = <font face="verdana" size="4"> | </font>
tt_content.text.20.textStyle.size.default =
tt_content.text.20.textStyle.align.field = text_align
html-vorlage:
<html>
<head>
<title>Strichmaennlis Homepage</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<meta http-equiv="imagetoolbar" content="no">
</head>
<body>
<!-- ###DOKUMENT### -->
<table>
<td width="10"></td>
</table>
<div align="center">
<table width="780" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<!-- row 1 -->
<td width="780" height="80"><img name="strichmaennli" src="fileadmin/template/images/banner.jpg" width="780" height="80" border="0" alt=""></td>
</tr>
</table>
<table>
<tr>
<td width="780" height="30">###BORDER###</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="780" height="600" bgColor=#BB0100>
<tr>
<td width="780" height="500"><div align="justify"><strong>###CONTENT###</strong></div></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="780">
<tr>
<td height="18"> </td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="780" bgcolor="#ff0000">
<td width="640">copyright by <a href="http://www.strichmaennli.ch" target="_self">Strichmaennli</a></td>
<td width="20"align="right">| </td>
<td bgcolor="#FF0000"width="50" align="right"><form name="anzeige"><input size=10 name="date" class="datum" size="10"></form></td>
<td width="20" align="right">| </td>
<td width="50" align="right"><form name="anzeige2" bgcolor="#FF0000"><input size=8 name="time" class="datum" size="8"></form></td>
<td align="right">| </td>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="780">
<tr>
<td height="16"></td>
</tr>
</table>
</div>
<!-- ###DOKUMENT### -->
</body>
</html>
meine Fragen:
1. warum erscheint das "Grund"-Menü nicht
2. wo kann ich die breite der "Grund"-Menü-Blöcken, bzw. der Untermenüs verändern?
3. 2. Untermenü funktioniert nicht richtig (siehe "Grund"-Menü ganz rechts --> 1. Untermenü "test1") An was könnte das liegen.
4. wenn ich das browser fenster verkleinere bleiben die untermenü-slides am gleichen ort. wo kann ich das anpassen?
5. und last but not least: Was hat es mit der zeile:
# 100 = || IMAGE
# 100.file = fileadmin/MEADE-Menue/spacer.gif
im setup auf sich? wo finde ich das spacer.gif?
danke für beantwortung meiner fragen.
gruss
2. wo kann ich die breite der "Grund"-Menü-Blöcken, bzw. der Untermenüs verändern?
Die Breite der Untermenüs kannst du in der ypMenu.php über "$sublevelWidth" und "$sublevelHeight" definieren.
3. 2. Untermenü funktioniert nicht richtig (siehe "Grund"-Menü ganz rechts --> 1. Untermenü "test1") An was könnte das liegen.
Die ypSlideOutMenus.js die du benutzt unterstützt keine Untermenüs mehr.
Nimm die hier:
/*****************************************************
* ypSlideOutMenu
* 3/04/2001
*
* a nice little script to create exclusive, slide-out
* menus for ns4, ns6, mozilla, opera, ie4, ie5 on
* mac and win32. I've got no linux or unix to test on but
* it should(?) work...
*
* --youngpup--
*****************************************************/
ypSlideOutMenu.Registry = []
ypSlideOutMenu.aniLen = 450
ypSlideOutMenu.hideDelay = 50
ypSlideOutMenu.minCPUResolution = 10
// constructor
function ypSlideOutMenu(id, dir, left, top, width, height, parentid)
{
this.ie = document.all ? 1 : 0
this.ns4 = document.layers ? 1 : 0
this.dom = document.getElementById ? 1 : 0
if (this.ie || this.ns4 || this.dom) {
this.id = id
this.dir = dir
this.orientation = dir == "left" || dir == "right" ? "h" : "v"
this.dirType = dir == "right" || dir == "down" ? "-" : "+"
this.dim = this.orientation == "h" ? width : height
this.hideTimer = false
this.aniTimer = false
this.open = false
this.over = false
this.startTime = 0
this.sliding = false
this.parentid = parentid
this.showcount = 0
// global reference to this object
this.gRef = "ypSlideOutMenu_"+id
eval(this.gRef+"=this")
this.initleft = left
this.inittop = top
this.initwidth = width
this.initheight = height
this.showcount = 0;
// add this menu object to an internal list of all menus
ypSlideOutMenu.Registry[id] = this
var d = document
var strCSS = "";
strCSS += '#' + this.id + 'Container { visibility:hidden; '
strCSS += 'left:' + left + 'px; '
strCSS += 'top:' + top + 'px; '
strCSS += 'overflow:hidden; z-index:10000; }'
strCSS += '#' + this.id + 'Container, #' + this.id + 'Content { position:absolute; '
strCSS += 'width:' + width + 'px; '
strCSS += 'height:' + height + 'px; '
strCSS += 'clip:rect(0 ' + width + ' ' + height + ' 0); '
strCSS += '}'
this.css = strCSS;
this.load()
}
}
ypSlideOutMenu.writeCSS = function() {
document.writeln('<style type="text/css">');
for (var id in ypSlideOutMenu.Registry) {
document.writeln(ypSlideOutMenu.Registry[id].css);
}
document.writeln('</style>');
}
ypSlideOutMenu.prototype.load = function() {
var d = document
var lyrId1 = this.id + "Container"
var lyrId2 = this.id + "Content"
var obj1 = this.dom ? d.getElementById(lyrId1) : this.ie ? d.all[lyrId1] : d.layers[lyrId1]
if (obj1) var obj2 = this.ns4 ? obj1.layers[lyrId2] : this.ie ? d.all[lyrId2] : d.getElementById(lyrId2)
// var temp
if (!obj1 || !obj2) window.setTimeout(this.gRef + ".load()", 1000)
else {
this.container = obj1
this.menu = obj2
this.style = this.ns4 ? this.menu : this.menu.style
this.homePos = eval("0" + this.dirType + this.dim)
this.outPos = 0
this.accelConst = (this.outPos - this.homePos) / ypSlideOutMenu.aniLen / ypSlideOutMenu.aniLen
// set event handlers.
if (this.ns4) this.menu.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
this.menu.onmouseover = new Function("ypSlideOutMenu.showMenu('" + this.id + "')")
this.menu.onmouseout = new Function("ypSlideOutMenu.hideMenu('" + this.id + "')")
//set initial state
this.endSlide()
}
}
ypSlideOutMenu.showMenu = function(id)
{
var reg = ypSlideOutMenu.Registry
var obj = ypSlideOutMenu.Registry[id]
if (obj.container) {
obj.over = true
// close other menus.
// for (menu in reg) if (id != menu) ypSlideOutMenu.hide(menu)
// if this menu is scheduled to close, cancel it.
if (obj.hideTimer) { reg[id].hideTimer = window.clearTimeout(reg[id].hideTimer) }
obj.showcount++;
// if this menu is closed, open it.
if (!obj.open && !obj.aniTimer) reg[id].startSlide(true)
}
}
ypSlideOutMenu.hideMenu = function(id)
{
// schedules the menu to close after <hideDelay> ms, which
// gives the user time to cancel the action if they accidentally moused out
var obj = ypSlideOutMenu.Registry[id]
if (obj.container) {
if (obj.hideTimer) window.clearTimeout(obj.hideTimer)
obj.showcount--;
obj.hideTimer = window.setTimeout("ypSlideOutMenu.hide('" + id + "')", ypSlideOutMenu.hideDelay);
}
}
ypSlideOutMenu.hide = function(id)
{
var obj = ypSlideOutMenu.Registry[id]
var reg = ypSlideOutMenu.Registry
obj.over = false
if (obj.hideTimer) window.clearTimeout(obj.hideTimer)
// flag that this scheduled event has occured.
obj.hideTimer = 0
var close = true;
for (menu in reg) {
// for each child, if either
// 1. the child is open or
// 2. the child is closing (but hasn't closed yet)
// then we don't close this menu.
var pid = ypSlideOutMenu.Registry[menu].parentid;
if(pid == id) {
if (ypSlideOutMenu.Registry[menu].open) close = false;
if (!ypSlideOutMenu.Registry[menu].open && ypSlideOutMenu.Registry[menu].sliding) close = false;
}
}
// if this menu is open, close it.
if (obj.open && !obj.aniTimer && close && !obj.showcount) obj.startSlide(false);
}
ypSlideOutMenu.prototype.startSlide = function(open) {
this[open ? "onactivate" : "ondeactivate"]()
this.open = open
if (open) this.setVisibility(true)
this.startTime = (new Date()).getTime()
this.sliding = true;
this.aniTimer = window.setInterval(this.gRef + ".slide()", ypSlideOutMenu.minCPUResolution)
}
ypSlideOutMenu.prototype.slide = function() {
var elapsed = (new Date()).getTime() - this.startTime
if (elapsed > ypSlideOutMenu.aniLen) this.endSlide()
else {
var d = Math.round(Math.pow(ypSlideOutMenu.aniLen-elapsed, 2) * this.accelConst)
if (this.open && this.dirType == "-") d = -d
else if (this.open && this.dirType == "+") d = -d
else if (!this.open && this.dirType == "-") d = -this.dim + d
else d = this.dim + d
this.moveTo(d)
}
}
ypSlideOutMenu.prototype.endSlide = function() {
this.aniTimer = window.clearTimeout(this.aniTimer)
this.moveTo(this.open ? this.outPos : this.homePos)
if (!this.open) this.setVisibility(false)
this.sliding = false;
if ((this.open && !this.over) || (!this.open && this.over) && (!this.parent || this.parent.open)) {
this.startSlide(this.over)
} else {
var overchild = false;
var reg = ypSlideOutMenu.Registry
for (menu in reg) {
var pid = ypSlideOutMenu.Registry[menu].parentid
if (pid == this.id) overchild = ypSlideOutMenu.Registry[menu].over ? true : overchild
}
if(!overchild && this.parentid && !ypSlideOutMenu.Registry[this.parentid].over) ypSlideOutMenu.hide(this.parentid);
}
}
ypSlideOutMenu.prototype.setVisibility = function(bShow) {
var s = this.ns4 ? this.container : this.container.style
s.visibility = bShow ? "visible" : "hidden"
}
ypSlideOutMenu.prototype.moveTo = function(p) {
this.style[this.orientation == "h" ? "left" : "top"] = this.ns4 ? p : p + "px"
}
ypSlideOutMenu.prototype.getPos = function(c) {
return parseInt(this.style[c])
}
// events
ypSlideOutMenu.prototype.onactivate = function() { }
ypSlideOutMenu.prototype.ondeactivate = function() { }
Die enthält den CSS-Fix aus deiner Version und unterstützt Untermenüs wie die alte Version.
SilverBlue schrieb2. wo kann ich die breite der "Grund"-Menü-Blöcken, bzw. der Untermenüs verändern?
Die Breite der Untermenüs kannst du in der ypMenu.php über "$sublevelWidth" und "$sublevelHeight" definieren.
Vielen Dank für das js-file. Das funktioniert nun.
Zur Anpassung der Breite: Ich möchte nicht nur die Untermenüs anpassen, sondern auch die Obermenüs. Wo kann ich diese Aenderungen vornehmen?
gruss
Das müsste direkt in dem TS-Setup gehen. Die Bilder werden ja per Gifbuilder erstellt. Einfach da die Breite erhöhen 😉
Der einte Teil meiner Fragen wurden beantwortet. danke an silverblue
hat jemand noch eine antwort auf die anderen?
1. warum erscheint das "Grund"-Menü nicht
4. wenn ich das browser fenster verkleinere bleiben die untermenü-slides am gleichen ort. wo kann ich das anpassen?
5. und last but not least: Was hat es mit der zeile:
# 100 = || IMAGE
# 100.file = fileadmin/MEADE-Menue/spacer.gif
im setup auf sich? wo finde ich das spacer.gif?
Ciao Strichmaennli,
1. warum erscheint das "Grund"-Menü nicht
Ich habe das selbe Problem. IM ist installiert und läuft auch einwandfrei. doch mit dem nice Text hat es seine Schwierigkeiten.
Wenn ich niceText auskommentiere verhält sich das Menue folgendermasse:
NO = Menue sichtbar
RO = Menue unsichtbar
Hat dazu jemand eine Erklärung?
Mein Setup:
page = PAGE
page.typeNum = 0
page.stylesheet = fileadmin/template/ypMenu/style.css
# Benoetigte Libaries einfuegen
page.includeLibs.ypMenu = fileadmin/template/ypMenu/ypmenu.php
page.headerData.10 = TEXT
page.headerData.10.value = <script type="text/javascript" src="fileadmin/template/ypMenu/ypSlideOutMenus.js" language="JavaScript"></script><script type="text/javascript" src="fileadmin/template/ypMenu/jslib.js" language="JavaScript"></script>
page.10 = TEMPLATE
page.10 {
template = FILE
template.file = fileadmin/template/index_too.html
workOnSubpart = DOKUMENT
marks.CONTENT = CONTENT
marks.CONTENT < styles.content.get
marks.KOPF_MENU >
marks.KOPF_MENU = HMENU
marks.KOPF_MENU.entryLevel = 1
marks.KOPF_MENU.special = directory
marks.KOPF_MENU.special.value = 72
marks.KOPF_MENU.1 = GMENU
marks.KOPF_MENU.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 = 11
fontFile = fileadmin/fonts/verdana.ttf
fontColor = #000000
offset = 10,17
# niceText = 1
}
100 = || IMAGE
100.file = fileadmin/ypMenu/spacer.gif
}
NO {
wrap = |
XY = [50.w]+20, 25
backColor = #cccccc
50 = TEXT
50 {
text.field = title
fontSize = 11
fontFile = fileadmin/fonts/verdana.ttf
fontColor = #000000
offset = 10,17
# niceText = 1
}
100 = || IMAGE
100.file = fileadmin/ypMenu/spacer.gif
}
RO < marks.KOPF_MENU.1.NO
RO = 1
RO {
backColor = #ffca51
}
IFSUBRO < marks.KOPF_MENU.1.NO
IFSUBRO = 1
IFSUBRO {
backColor = #ffca51
}
}
marks.KOPF_MENU.2 = TMENU
marks.KOPF_MENU.2 {
IProcFunc = user_menu->secondLevel
expAll = 1
NO.linkWrap = <li>|</li>
}
marks.KOPF_MENU.3 = TMENU
marks.KOPF_MENU.3 {
IProcFunc = user_menu->thirdLevel
expAll = 1
NO.linkWrap = <li>|</li>
}
marks.KOPF_MENU.4 = TMENU
marks.KOPF_MENU.4 {
IProcFunc = user_menu->fourthLevel
expAll = 1
NO.linkWrap = <li>|</li>
}
}
# append Menu JS to page
page.11 = USER
page.11.userFunc = user_menu->menuEnd
Danke GreenBanana
Ich konnte gewisse Fragen mit Hilfe von Greenbanana herausfinden
1. warum erscheint das "Grund"-Menü nicht
hatte mit dem nicetext zu tun. wenn ich es ausklammere funktioniert es.
4. wenn ich das browser fenster verkleinere bleiben die untermenü-slides am gleichen ort. wo kann ich das anpassen?
ich hatte meine seite volkommen zentriert anzegeigt und die positionierung des untermenüs geht vom rand oben links des browser fensers aus.
5. und last but not least: Was hat es mit der zeile:
# 100 = || IMAGE
# 100.file = fileadmin/MEADE-Menue/spacer.gif
im setup auf sich? wo finde ich das spacer.gif?
Diese Frage ist immer noch offen.