Also ich habs mal schnell auf meinem Backupserver nach gebaut und hab eigentlich keinerlei Probleme mit dem Menü gehabt. Ich schicke euch mal alles was ihr benötigt meiner Meinung nach 😉. Ein Problem gibts dabei allerdings noch wobei ich evtl. erfahrene Hilfe benötigen würde. Die Positionierung der subLevels funktioniert nur Teilweise. Wenn im Menü selbst Wörter mit Umbruch zu Tage kommen zerreisst er meine Positionierung seht am besten selbst: http://85.214.32.188/index.php?id=121
Die Horizontale Variante:
Das TS ins Maintemplate integrieren bzw. komplett übernehmen (ist nen bischen wirr dadrin da es auszüge ausm Backupserver sind).
page = PAGE
page.bodyTag = <body bgcolor="#CCCCCC" topmargin="0">
page.typeNum = 0
page.stylesheet = fileadmin/templates/style2/class.css
page.10 = TEMPLATE
page.10{
template = FILE
template.file = fileadmin/vorlage_con_sol.html
workOnSubpart = DOKUMENT
marks.INHALT = CONTENT
marks.INHALT {
table = tt_content
select.orderBy = sorting
select.where = colPos = 0
select.languageField = sys_language_uid
}
marks.MENU = COA
marks.MENU {
10 < temp.ypMenu
20 < temp.user_menu
}
marks.KLICKPFAD = HMENU
marks.KLICKPFAD {
special = rootline
special.range = 2 | 1
1 = TMENU
1.NO = 1
1.NO.linkWrap = | |*| -> | |*| ->
}
marks.MENU_UNTEN = HMENU
marks.MENU_UNTEN {
special = directory
special.value = 124
1 = TMENU
1.NO = 1
1.NO.linkWrap = | ||*| | ||*| |
}
marks.BUTTON = HMENU
marks.BUTTON.special = browse
marks.BUTTON.entryLevel=1
marks.BUTTON.special{
items = prev | next
items.prevnextToSection = 1
prev.fields.title = « zurück
next.fields.title = vor »
}
marks.BUTTON.1 = TMENU
marks.BUTTON.1.NO {
linkWrap = |
}
marks.DRUCKVERSION = TEXT
marks.DRUCKVERSION {
field = uid
wrap = <a href="index.php?id= |&type=1" target="_new">Druckversion</a>
}
}
#Druckansicht
druckversion = PAGE
druckversion {
typeNum = 1
10 = CONTENT
10.table = tt_content
10.select.orderBy = sorting
10.select.colPos = 0
#druckversion.stylesheet = fileadmin/druck.css
druckversion.10 = TEMPLATE
druckversion.10 {
template = FILE
template.file = fileadmin/druckansicht.html
marks.INHALT = CONTENT
}
}
config.extTarget = _self
Das ist mein Externes Template. Dieses Template liegt in einem SysFolder. Man bindet es ein in dem Man unter Template->auf "click here to edit whole template record" klickert-> dann auf include basis template das template einbinden.
config.no_cache = 1
page.includeLibs.ypMenu = fileadmin/scripts/ypMenu/ypMenu.ini
page.headerData.11 = TEXT
page.headerData.11.value = <script type="text/javascript" src="fileadmin/scripts/ypMenu/ypSlideOutMenus.js" language="JavaScript"></script>
temp.ypMenu.special = directory
temp.ypMenu.special.value = 119
temp.ypMenu.entryLevel = 0
temp.ypMenu = HMENU
temp.ypMenu {
1 = GMENU
1 {
IProcFunc = user_menu->firstLevel
expAll = 1
wrap = |
NO = 1
NO {
wrap = |
XY = [50.w]+20, 31
//backColor = #343471
30 = IMAGE
30.file = fileadmin/images/cons/cw-button.png
50 = TEXT
50 {
text.field = title
fontSize = 10
fontFile = fileadmin/templates/fonts/verdana.ttf
fontColor = #ffffff
offset = 10,20
niceText = 0
transparentBackground = 1
}
// 100 = || IMAGE
// 100.file = fileadmin/scripts/ypMenu/menu_space.gif
}
IFSUB < temp.ypMenu.1.NO
IFSUB = 1
RO < temp.ypMenu.1.NO
RO = 1
RO {
// backColor = #40408C
wrap = |
XY = [50.w]+20, 31
30 = IMAGE
30.file = fileadmin/images/cons/cw-button-ro.png
50 = TEXT
50 {
text.field = title
fontSize = 10
fontFile = fileadmin/templates/fonts/verdana.ttf
fontColor = #ffffff
offset = 10,20
niceText = 0
transparentBackground = 1
}
}
IFSUBRO < temp.ypMenu.1.NO
IFSUBRO = 1
IFSUBRO {
// backColor = #40408C
wrap = |
XY = [50.w]+20, 31
30 = IMAGE
30.file = fileadmin/images/cons/cw-button-ro.png
50 = TEXT
50 {
text.field = title
fontSize = 10
fontFile = fileadmin/templates/fonts/verdana.ttf
fontColor = #ffffff
offset = 10,20
niceText = 0
transparentBackground = 1
}
}
}
2 = TMENU
2 {
IProcFunc = user_menu->secondLevel
expAll = 1
NO.linkWrap = <li>|</li>
}
3 = TMENU
3 {
IProcFunc = user_menu->thirdLevel
expAll = 1
NO.linkWrap = <li>|</li>
}
4 = TMENU
4 {
IProcFunc = user_menu->fourthLevel
expAll = 1
NO.linkWrap = <li>|</li>
}
5 = TMENU
5 {
IProcFunc = user_menu->fifthLevel
expAll = 1
NO.linkWrap = <li>|</li>
}
6 = TMENU
6 {
IProcFunc = user_menu->sixtLevel
expAll = 1
NO.linkWrap = <li>|</li>
}
}
temp.user_menu = USER
temp.user_menu.userFunc = user_menu->menuEnd
Kommen wir nun zur HTML Vorlage:
<html>
<head>
</head>
<body bgcolor="#CCCCCC">
<!-- ###DOKUMENT### begin -->
<table border="0" width="1020" height="581">
<tr>
<td height="577" width="1020">
<div style="position: absolute; width: 783px; height: 576px; z-index: 1; left: 118px; top: 17px; background-image:url('fileadmin/images/cons/cw-bg-sol.png')" id="back"></div>
<div style="position: absolute; width: 765px; height: 456px; z-index: 2; left:127px; top:121px; background-image:url('fileadmin/images/cons/cw-bg-blau.png')" id="back2"></div>
<div style="position: absolute; width: 697px; height: 342px; z-index: 2; left:144px; top:180px; background-color:#D8DADC" id="inhalt">###INHALT###</div>
<div style="position: absolute; width: 701px; height: 38px; z-index: 2; left:144px; top:141px" id="cMenu">###MENU###</div>
<div style="position: absolute; width: 700px; height: 21px; z-index: 2; left:142px; top:523px;" id="menu_unten">###MENU_UNTEN###</div>
<div style="position: absolute; width: 700px; height: 18px; z-index: 2; left:142px; top:540px;" id="klickpfad">###KLICKPFAD###</div>
<div style="position: absolute; width: 109px; height: 22px; z-index: 3; left:732px; top:523px" id="druckansicht" align="right">###DRUCKVERSION###</div>
<div style="position: absolute; width: 109px; height: 18px; z-index: 3; left:732px; top:540px;" id="button" align=right>###BUTTON###</div>
</td>
</tr>
</table>
<!-- ###DOKUMENT### end -->
</body>
</html>
Die zugehörige CSS Datei:
<strong>CSS-code ( fileadmin/templates/style2/class.css ) für das ypMenu und für den DIV mit der ID cMenu</strong>
#cMenu {
height:31px;
width: 708px;
margin-left:1px;
margin-bottom:1px;
background: #343471 url(http://85.214.32.188/fileadmin/scripts/ypMenu/menu.png) repeat-x top left;
position:relative; /* wichtige angabe, sonst taucht das slideMenu an falscher Position auf */
}
/*
###################
# ypMenu Styles #
###################
*/
.mmContent {
/* nrmale schrift definieren */
font-size: 12px; 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 {
/* Links bzw. die slideMenü-Elemente definieren */
display: block;
color: #ffffff;
font-weight:normal;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, Geneva, SunSans-Regular;
width: 150px;
padding: 5px;
text-decoration: none;
border-bottom: solid 1px #CCCCCC; /* der rand zwischen den MenüElementen */
}
* html .mmContent li a {
width: 160px;
width: 160px;
}
/* */
.mmContent li a:link { background: #343471; color: #ffffff; font-size: 12px; }
.mmContent li a:visited { background: #343471; color: #ffffff; font-size: 12px; }
.mmContent li a:hover{ background: #343471; color: #ffffff; font-size: 12px; }
.mmContent li a:active { background: #343471; color: #ffffff; font-size: 12px; }
.mmContent li a.submenu {
background: #343471 url(http://85.214.32.188/fileadmin/images/cons/pfeil.gif) no-repeat right center; }
.mmContent li a.submenu:hover {
background: #343471 url(http://85.214.32.188/fileadmin/images/cons/pfeil.gif) no-repeat right center; }
/*
##########################################
# ypMenu Styles for our belove IE 5.01 #
##########################################
*/
.mmContentb {
font-size: 12px; 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 {
/* Links bzw. die slideMenü-Elemente definieren */
display: block;
width: 150px;
padding: 5px;
color: #222222;
font-weight: normal;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, Geneva, SunSans-Regular;
text-decoration: none;
border-bottom: solid 1px #CCCCCC; /* der rand zwischen den MenüElementen */
}
* html .mmContentb li a {
width: 160px;
width: 160px;
}
.mmContentb li a:link { background: #343471; color: #ffffff; }
.mmContentb li a:visited { background: #343471; color: #ffffff; }
.mmContentb li a:hover{ background: #343471; color: #ffffff; }
.mmContentb li a:active { background: #343471; color: #ffffff; }
.mmContentb li a.submenu {
background: #343471 url(http://85.214.32.188/fileadmin/images/cons/pfeil.gif) no-repeat right center;
font-size: 12px;
}
.mmContentb li a.submenu:hover {
background: #343471 url(http://85.214.32.188/fileadmin/images/cons/pfeil.gif) no-repeat right center;
font-size: 12px;
}
#inhalt {
font-family:arial; /*Schriftart*/
color:#343471; /*Schriftfarbe*/
font-size:12; /*Schriftgröße*/
overflow:auto;
width:100%;
height:100%;
padding:20px;
padding-left:30px;
scrollbar-base-color:#D8DADC; /*legt die Grundfarbe des Scrollbalkens fest*/
scrollbar-track-color:#D8DADC; /*legt die Hintergrundfarbe des Scrollbalkens fest*/
scrollbar-face-color:#343471; /*legt die Farbe der Scrollbalken-Oberfläche fest*/
}
#klickpfad { /*class mit dem Namen "klickpfad" wird angesprochen*/
font-family:arial; /*Schriftart*/
color:#dddddd; /*Schriftfarbe*/
font-size:11; /*Schriftgröße*/
}
#klickpfad a:hover { /*Mouseover-Effekt für die class "klickpfad"*/
font-family:arial; /*Schriftart*/
color:#dddddd; /*Schriftfarbe*/
font-size:11; /*Schriftgröße*/
}
#klickpfad a:visited { /*Mouseover-Effekt für die class "klickpfad"*/
font-family:arial; /*Schriftart*/
color:#dddddd; /*Schriftfarbe*/
font-size:11; /*Schriftgröße*/
}
#klickpfad a:active { /*Mouseover-Effekt für die class "klickpfad"*/
font-family:arial; /*Schriftart*/
color:#dddddd; /*Schriftfarbe*/
font-size:11; /*Schriftgröße*/
}
#klickpfad a:link { /*Mouseover-Effekt für die class "klickpfad"*/
font-family:arial; /*Schriftart*/
color:#dddddd; /*Schriftfarbe*/
font-size:11; /*Schriftgröße*/
}
#menu_unten { /*class mit dem Namen "menu_unten" wird angesprochen*/
font-family:arial; /*Schriftart*/
color:#dddddd; /*Schriftfarbe*/
font-size:11; /*Schriftgröße*/
font-weight:bold; /*legt fest wie fett eine Schrift ist*/
}
#menu_unten a:hover { /*Mouseover-Effekt für die class "menu_unten"*/
font-family:arial; /*Schriftart*/
color:#dddddd; /*Schriftfarbe*/
font-size:11; /*Schriftgröße*/
font-weight:bold; /*legt fest wie fett eine Schrift ist*/
}
#menu_unten a:visited { /*Mouseover-Effekt für die class "menu_unten"*/
font-family:arial; /*Schriftart*/
color:#dddddd; /*Schriftfarbe*/
font-size:11; /*Schriftgröße*/
font-weight:bold; /*legt fest wie fett eine Schrift ist*/
}
#menu_unten a:active { /*Mouseover-Effekt für die class "menu_unten"*/
font-family:arial; /*Schriftart*/
color:#dddddd; /*Schriftfarbe*/
font-size:11; /*Schriftgröße*/
font-weight:bold; /*legt fest wie fett eine Schrift ist*/
}
#menu_unten a:link { /*Mouseover-Effekt für die class "menu_unten"*/
font-family:arial; /*Schriftart*/
color:#dddddd; /*Schriftfarbe*/
font-size:11; /*Schriftgröße*/
font-weight:bold; /*legt fest wie fett eine Schrift ist*/
}
.form {
font-size: 11pt;
font-family: arial;
}
.table {
font-size: 11pt;
font-family: arial;
}
#druckansicht { /*class mit dem Namen "menu_unten" wird angesprochen*/
font-family:arial; /*Schriftart*/
color:#dddddd; /*Schriftfarbe*/
font-size:11; /*Schriftgröße*/
font-weight:bold; /*legt fest wie fett eine Schrift ist*/
}
#druckansicht a:hover { /*Mouseover-Effekt für die class "menu_unten"*/
font-family:arial; /*Schriftart*/
color:#dddddd; /*Schriftfarbe*/
font-size:11; /*Schriftgröße*/
font-weight:bold; /*legt fest wie fett eine Schrift ist*/
}
#druckansicht a:visited { /*Mouseover-Effekt für die class "menu_unten"*/
font-family:arial; /*Schriftart*/
color:#dddddd; /*Schriftfarbe*/
font-size:11; /*Schriftgröße*/
font-weight:bold; /*legt fest wie fett eine Schrift ist*/
}
#druckansicht a:active { /*Mouseover-Effekt für die class "menu_unten"*/
font-family:arial; /*Schriftart*/
color:#dddddd; /*Schriftfarbe*/
font-size:11; /*Schriftgröße*/
font-weight:bold; /*legt fest wie fett eine Schrift ist*/
}
#druckansicht a:link { /*Mouseover-Effekt für die class "menu_unten"*/
font-family:arial; /*Schriftart*/
color:#dddddd; /*Schriftfarbe*/
font-size:11; /*Schriftgröße*/
font-weight:bold; /*legt fest wie fett eine Schrift ist*/
}
#button { /*class mit dem Namen "menu_unten" wird angesprochen*/
font-family:arial; /*Schriftart*/
color:#dddddd; /*Schriftfarbe*/
font-size:11; /*Schriftgröße*/
font-weight:bold; /*legt fest wie fett eine Schrift ist*/
}
#button a:hover { /*Mouseover-Effekt für die class "menu_unten"*/
font-family:arial; /*Schriftart*/
color:#dddddd; /*Schriftfarbe*/
font-size:11; /*Schriftgröße*/
font-weight:bold; /*legt fest wie fett eine Schrift ist*/
}
#button a:visited { /*Mouseover-Effekt für die class "menu_unten"*/
font-family:arial; /*Schriftart*/
color:#dddddd; /*Schriftfarbe*/
font-size:11; /*Schriftgröße*/
font-weight:bold; /*legt fest wie fett eine Schrift ist*/
}
#button a:active { /*Mouseover-Effekt für die class "menu_unten"*/
font-family:arial; /*Schriftart*/
color:#dddddd; /*Schriftfarbe*/
font-size:11; /*Schriftgröße*/
font-weight:bold; /*legt fest wie fett eine Schrift ist*/
}
#button a:link { /*Mouseover-Effekt für die class "menu_unten"*/
font-family:arial; /*Schriftart*/
color:#dddddd; /*Schriftfarbe*/
font-size:11; /*Schriftgröße*/
font-weight:bold; /*legt fest wie fett eine Schrift ist*/
}
textarea {
overflow-x:hidden;
overflow-y:auto;
width:266
}
td {
font-family:arial; /*Schriftart*/
color:#343471; /*Schriftfarbe*/
font-size:12;
}
body,
html {
overflow: hidden;
}
Wem die Pfade zu komisch sind kann sie gern x beliebig abändern.
Die benötigten Datei zu meinem Code bsp.:
http://85.214.32.188/fileadmin/scripts/ypMenu/jslib.js
http://85.214.32.188/fileadmin/scripts/ypMenu/ypSlideOutMenus.js
http://85.214.32.188/fileadmin/scripts/ypMenu/ypmenu.ini
http://85.214.32.188/fileadmin/scripts/ypMenu/line_menu.gif
http://85.214.32.188/fileadmin/scripts/ypMenu/menu.png
http://85.214.32.188/fileadmin/scripts/ypMenu/menu_bg.png
http://85.214.32.188/fileadmin/scripts/ypMenu/menu_space.gif
http://85.214.32.188/fileadmin/scripts/ypMenu/menu_sub.gif
http://85.214.32.188/fileadmin/scripts/ypMenu/menu_sub.png
http://85.214.32.188/fileadmin/templates/style2/class2.css
http://85.214.32.188/fileadmin/templates/fonts/verdana.ttf
http://85.214.32.188/fileadmin/vorlage_con_sol.html
So ich glaube nichts vergessen zu haben 🙂 wer sich wundert warum die ypMenu.ini eine *.ini Datei ist -> nehmt es so hin 😉 so brauch man wenigstens nicht remote arbeiten sondern kann bequem die Datei uploaden für änderungen.
Es werden noch 2 Grafiken für das Menü geladen die ihr euch allerdings selbst zusammen bauen müsstet.
Ich gebe sie euch allerdings trotzdem für die Abmaße.
Die Transparenz wurde ebenfalls entfernt.
http://85.214.32.188/fileadmin/images/cons/cw-button.png
http://85.214.32.188/fileadmin/images/cons/cw-button_ro.png
So dieses Menü funktioniert definitiv lediglich die Positionierung ist momentan bei mir wegen der langen Menüeinträge fürn Popo 😉
Ich hab auch schon versucht den breakpoint zu vergrößern brachte jedoch nicht den gewünschten erfolg. Falls mir ein Erfahrener T3 bauer an der Stelle eventuell helfen könnte wäre ich echt dankbar.
lg und viel spaß arrow
*edit: Die Downloads funzen alle wärs nicht geladen sondern nur angezeigt bekommt sollte nen DownloadManager benutzen oder im Opera den Schnelldownload via URL benutzen.