[Beispiel] ypMenu ( GMENU horizontal , ypSlideOutMenus )

  • n-joy n-joy
    R2-D2
    0 x
    65 Beiträge
    0 Hilfreiche Beiträge
    25. 01. 2005, 17:33

    Tach allerseits :)

    ich habe mir mal die Mühe gemacht (..sieh an ..sieh an ;) ) und zum ypMenu ein relativ umfangreiches Beispiel erstellt. Dieses soll euch helfen das ypMenu schnell und ohne viel Zeitaufwand zum laufen zu bringen...

    aus optischen Gründen habe ich das Beispiel erstmal im HTML-Format erstellt:
    http://steinhauer-gmbh.net/_tmp/ypMenu/

    ...im Laufe der Zeit werde ich mein Posting erweitern (editieren)

    - Verbesserungsvorschläge erwünscht
    - bei Problemen oder wenn nicht verständlich, fragen :)

    [quote:dcd9872421]
    [b:dcd9872421]ypMenu (ypSlideOutMenu) in Typo3[/b:dcd9872421]

    Dateien (copyright haben die jeweiligen Autoren):
    - [url=http://steinhauer-gmbh.net/_tmp/ypMenu/ypMenu-php.zip]ypMenu.php [/url]( [i:dcd9872421]per includeLibs in Typo3 einbinden[/i:dcd9872421] )
    - [url=http://steinhauer-gmbh.net/_tmp/ypMenu/ypSlideOutMenus-js.zip]ypSlideOutMenus.js[/url] ( [i:dcd9872421]im header laden[/i:dcd9872421] )
    - [url=http://steinhauer-gmbh.net/_tmp/ypMenu/ypMenu-css.zip]ypMenu.css[/url] ( [i:dcd9872421]in eure CSS-datei übernehmen oder im header mitladen[/i:dcd9872421] )

    [code:1:dcd9872421]
    [b]Typo3: externes Template ( temp.ypMenu ) -> Setup[/b]

    config.no_cache = 1
    page.includeLibs.ypMenu = fileadmin/scripts/ypMenu/ypMenu.php
    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
    # 57 ist die ID der root-page - siehe screenshot
    temp.ypMenu.special.value = 57
    temp.ypMenu = HMENU
    temp.ypMenu {
    1 = GMENU
    1 {
    IProcFunc = user_menu->firstLevel
    expAll = 1
    wrap = |
    NO = 1
    NO {
    wrap = |
    XY = [50.w]+20, 31
    30 = IMAGE
    30.file = fileadmin/scripts/ypMenu/menu_bg2.gif
    50 = TEXT
    50 {
    text.field = title
    fontSize = 10
    fontFile = fileadmin/templates/fonts/verdana.ttf
    fontColor = #222222
    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 = #DDDDDD
    30 >
    }

    IFSUBRO < temp.ypMenu.1.NO
    IFSUBRO = 1
    IFSUBRO {
    backColor = #DDDDDD
    30 >
    }
    }

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

    temp.user_menu = USER
    temp.user_menu.userFunc = user_menu->menuEnd
    [/code:1:dcd9872421]
    Ich habe vieles - wie auch das ypMenu - aus meinem MainTemplate in externe Templates ausgelagert, damits im MainTemplate übersichtlich bleibt! Deshalb kommt auch nur wenig TS in das MainTemplate(externes Template einbinden)
    [code:1:dcd9872421]
    [b]Typo3: MainTemplate der root-page -> Setup[/b]

    page = PAGE
    page.typeNum = 0
    page.stylesheet = fileadmin/templates/style2/class.css
    page.10 = TEMPLATE
    page.10{
    template = FILE
    template.file = fileadmin/templates/style2/template.htm
    workOnSubpart = DOKUMENT

    marks.MENU = COA
    marks.MENU {
    10 < temp.ypMenu
    20 < temp.user_menu
    }
    }
    [/code:1:dcd9872421]
    Das dazugehörige XHTML-template ist natürlich nur als Beispiel/Vorlage gedacht!
    [code:1:dcd9872421]
    [b]HTML-template ( fileadmin/templates/style2/template.htm )[/b]

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
    <!-- ###DOKUMENT###-->
    <div id="cRoot">
    <div id="cBanner"></div>
    <div id="cHeader"></div>
    <div id="cMenu">###MENU###</div>
    <div id="cPfad"></div>
    <div id="cInhalt">###INHALT###</div>
    <div id="cFunktion"></div>
    <div style="clear:both;height:1px;overflow:hidden;"></div>
    <div id="cFooter"></div>
    </div>
    <!-- ###DOKUMENT### -->
    </body>
    </html>
    [/code:1:dcd9872421]
    Im CSS-Teil kann man im grunde >alles< dem eigenen design anpassen, ich habe aber erstmal nur die relevantesten eigenschaften blau markiert. Ausserdem ist die class "cMenu" nur ein Beispiel für einen DIV-container in dem der MENU-marker steht.
    [code:1:dcd9872421]
    [b]CSS-code ( fileadmin/templates/style2/class.css ) für das ypMenu und für den DIV mit der ID cMenu[/b]

    #cMenu {
    height:31px;
    width: 708px;
    margin-left:1px;
    margin-bottom:1px;
    background: #FFFFFF url(menu_bg.gif) 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: #222222;
    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: #EAED65; color: #222222; font-size: 12px; }
    .mmContent li a:visited { background: #EAED65; color: #222222; font-size: 12px; }

    .mmContent li a:hover{ background: #FFFF99; color: #222222; font-size: 12px; }
    .mmContent li a:active { background: #EAED65; color: #222222; font-size: 12px; }

    .mmContent li a.submenu {
    background: #EAED65 url(fileadmin/scripts/ypMenu/pfeil.gif) no-repeat right center; }
    .mmContent li a.submenu:hover {
    background: #FFFF99 url(fileadmin/scripts/ypMenu/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: #EAED65; color: #222222;}
    .mmContentb li a:visited { background: #EAED65; color: #222222;}

    .mmContentb li a:hover{ background: #FFFF99; color: #222222;}
    .mmContentb li a:active { background: #EAED65; color: #222222;}

    .mmContentb li a.submenu {
    background: #EAED65 url(fileadmin/scripts/ypMenu/pfeil.gif) no-repeat right center;
    font-size: 12px;
    }
    .mmContentb li a.submenu:hover {
    background: #FFFF99 url(fileadmin/scripts/ypMenu/pfeil.gif) no-repeat right center;
    font-size: 12px;
    }
    [/code:1:dcd9872421]
    In der ypMenu.php wird man noch ein paar kleinigkeiten anpassen müssen...
    [code:1:dcd9872421]
    [b]ypMenu.php anpassen...[/b]

    var $offsetY = 31; // vertikale fixierung des slideMenu's - relativ zum gecenterten DIV oder TD
    var $offsetX = 0; // horizontale fixierung des slideMenu's - relativ zum gecenterten DIV oder TD
    var $sublevelWidth = 160; // breite des sublevel elements
    var $sublevelHeight = 25; // höhe des sublevel elements

    var $padding = 5; // padding-abstand rechts und links
    var $fontSize = 11; // schriftgröße
    var $breakpoint = 14; // bricht Zeile nach X(14) Zeichen um
    var $secPadding = 16; // padding-abstand oben und unten

    var $fontFile = 'fileadmin/templates/fonts/verdana.ttf'; // font-datei wird fürs berechnen des zeilenumbruchs benötigt
    var $transBg = 'fileadmin/scripts/ypMenu/menu_bg.png'; // transparente PNG datei, behebt transparenz-fehler beim Mac IE 5 und Opera - die PNG-Transparenz sollte die gleiche sein wie die der CSS-FILTER-eigenschaft: alpha(opacity)
    [/code:1:dcd9872421]

    [/quote:dcd9872421]

    MfG

    [i:dcd9872421]p.s. ypMenu kommt von Ersteller der http://www.meade.de[/i:dcd9872421]


  • Strichmaennli Strichmae...
    Padawan
    0 x
    36 Beiträge
    0 Hilfreiche Beiträge
    08. 04. 2005, 19:27

    der marker der navigation heisst "KOPF_MENU"

    siehe html-vorlage
    [code:1:ed3bd22b74]<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 width="880" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td width="100"></td>
    <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="100"></td>
    <td width="780" height="30"><div align="left">###KOPF_MENU###</div></td>
    </tr>
    </table>

    <table border="0" cellpadding="0" cellspacing="0" width="880" height="400">
    <tr>
    <td width="100"></td>
    <td valign="top" width="780" height="400" bgColor=#BB0100><div align="justify"><strong>###CONTENT###</strong></div></td>
    </tr>
    </table>
    <table border="0" cellpadding="0" cellspacing="0" width="880">
    <tr>
    <td width="100"></td>
    <td height="18"> </td>
    </tr>
    </table>
    <table border="0" cellpadding="0" cellspacing="0" width="880">
    <td width="100"></td>
    <td width="570" bgcolor="#ff0000">copyright by <a href="http://www.strichmaennli.ch" target="_self">Strichmaennli</a></td>
    <td width="20"align="right" bgcolor="#ff0000">|  </td>
    <td bgcolor="#FF0000" width="50" align="right" bgcolor="#ff0000"><form name="anzeige"><input size=10 name="date" class="datum" size="10"></form></td>
    <td width="20" align="right" bgcolor="#ff0000">|  </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>

    <!-- ###DOKUMENT### -->
    </body>
    </html>[/code:1:ed3bd22b74]

  • 0 x
    65 Beiträge
    0 Hilfreiche Beiträge
    13. 04. 2005, 12:32

    Hallo Leute,

    ich möchte das Menü vertikal einbinden.
    Soweit funktioniert das auch schon. Allerdings sind meine Untermenüs alle direkt neben dem obersten Punkt. Der top-Wert soll aber immer so gesetzt werden, dass das Untermenü direkt neben dem zugehörigen Hautpmenüpunkt aufgeht.
    Hat jemand ne Ahnung, wo in der php das berechnet wird, und wie ich das verändern kann? #giggle#

    Gruss
    Silke

  • 0 x
    65 Beiträge
    0 Hilfreiche Beiträge
    13. 04. 2005, 14:03

    Also, irgendwo muss er eine falsche Berechnung machen.
    Wenn ich mir den Quealltext der erzeugten Seite anschaue, steht da

    [code:1:38ba89ec66]<script type="text/javascript">
    menu2 = new ypSlideOutMenu("menu2", "right", 192, 1, 150, 113, null)
    menu3 = new ypSlideOutMenu("menu3", "right", 192, 1, 150, 138, null)
    menu23 = new ypSlideOutMenu("menu23", "right", 192, 1, 150, 38, null)
    menu22 = new ypSlideOutMenu("menu22", "right", 192, 1, 150, 38, null)
    menu21 = new ypSlideOutMenu("menu21", "right", 192, 1, 150, 38, null)
    menu20 = new ypSlideOutMenu("menu20", "right", 192, 1, 150, 38, null)
    menu19 = new ypSlideOutMenu("menu19", "right", 192, 1, 150, 113, null)[/code:1:38ba89ec66]

    Der Wert, wo jetzt "null" steht, ist der Abstand von oben. Da muss er mir doch irgendwo was berechnen...

    Gruss
    Silke

  • 0 x
    65 Beiträge
    0 Hilfreiche Beiträge
    13. 04. 2005, 14:55

    Also, das null ist es doch nicht.

    [code:1:0a2c556c39]menu2 = new ypSlideOutMenu("menu2", "right", 192, 1, 150, 113, null)
    [/code:1:0a2c556c39]

    Es ist die 1, die er statisch aus der Variablen offsetY übernimmt und nicht aus der Anzahl der Hauptmenüeinträge berechnet.

    Die Stelle, an dem eine Berechnung erfolgen sollte ist:
    [code:1:0a2c556c39]$y = ($menu['parentId']) ? $GLOBALS['TSFE']->applicationData['ypMenus'][$menu['parentId']]['items'][$uid]['top'] : $this->offsetY;[/code:1:0a2c556c39]
    Da aber im Hauptmenü kein Parentmenü vorhanden ist, nimmt er hier immer das offsetY als Wert.
    Bei weiteren Untermenüs funktioniert es.

  • kwiesatz kwiesatz
    T3PO
    0 x
    18 Beiträge
    0 Hilfreiche Beiträge
    21. 04. 2005, 17:22

    hi

    erstmal hallo und danke an alle!

    ohne dieses forum wär das "experiment typo3" bei mir schon längstens gescheitert...

    nun wollte ich mal eben dieses wirklich hervorragend dokumentierte menü nachbauen und stoße auf die üblichen schwierigkeiten...

    [quote:4acd6ee7c5="F.Eppmann"]ja, 1 und 3 hab ich gestern noch beseitigen können. [/quote:4acd6ee7c5]

    ich denke ich habe dasselbe problem...
    ...leider hat f.eppmann nicht verraten, wie er das problem mit dem horizontalen menue gelöst hat...

    aber nochmal von vorne:

    ich will also dieses menue machen.
    es funktioniert auch - bis auf...

    anstelle meines markers "###navi_main###" bekomme ich den seitentitel, der ebenfalls navi_main heißt angezeigt.

    beim rollover fahren die hauptmenuepunkte aus und alles läuft eigentlich wie´s soll...

    ...nur dass ich halt die hauptmenuepunkte gerne permanent und horizontal angezeigt bekäme...

    nun hab ich mir überlegt:

    ich könnte ja anstelle von navi_main jeweils einen marker für einen hauptmenuepunkt anlegen und für jeden punkt ein eigenes menue generieren lassen...

    ...aber irgendwie glaube ich nicht, dass das so gedacht ist.

    und da ich mit meinem latein und meinen nerven am ende bin, dacht´ich, fragste einfach mal die jungs vom forum...

    entweder habe ich das temp.ypMenu nicht richtig eingebunden (hab ich noch nie vorher gemacht - aber dann wür´s doch garnich gehn?)

    ich kann auch die php-datei nur per ftp hochladen - nicht über typo3 - no permissionbla

    ...damit ihr auch genau im bilde seid:

    http://server1.80686-net.de/u00011/index.php?id=142
    (totale baustelle)

    und hier mal meine dateien:

    html:
    [code:1:4acd6ee7c5]
    <html>
    <body>
    <!-- ###DOKUMENT### -->

    <table border="0" width="100%" height="100%"align="center">
    <tr>
    <td height="100" width="100%" valign="top" class="top">
    <table width="100%">
    <tr>
    <td>
    <table border="0" width="100%" align="center">
    <tr>
    <td class="logo">###logo###</td>
    <td class="head">###TRAILER###</td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td><div id="cMenu">###navi_main###</div>
    </tr>
    </table>
    </td>
    </tr>
    <tr height=100%" valign="top">
    <td class="content"> ###content###</td>
    </tr>
    <tr height="15" valign="bottom">
    <td class="bottom">
    <table width="100%">
    <tr>
    <td class="label">Design 2005 Copyright by Nico Athanasopoulos, AFN - Van d. Vliet & Kunz GmbH</td>
    <td class="navi_rechts" align="right">###navi_rechts###</td>
    </tr>
    </table>
    </td>
    </tr>
    </table>

    <!-- ###DOKUMENT### -->
    </body>
    </html>
    [/code:1:4acd6ee7c5]

    basistemplate:
    [code:1:4acd6ee7c5]page = PAGE
    page {
    typeNum = 0
    bodyTag = <body bgColor = "FFFFFF">
    stylesheet = fileadmin/spp/sph/class.css
    meta.AUTHOR = Nico Athanasopoulos

    10 = TEMPLATE
    10.template = FILE
    10.template.file = fileadmin/spp/sph/index.html
    10.workOnSubpart = DOKUMENT
    10.marks {
    logo = IMAGE
    logo.file = fileadmin/spp/img/logo.jpg
    head
    head

    TRAILER = IMAGE
    TRAILER.file = GIFBUILDER
    TRAILER.file {
    XY = 559, 86
    backColor = #990000

    5 = IMAGE
    5.file = fileadmin/spp/img/head.jpg
    10 = TEXT
    10.text.field = subtitle // title
    10.fontSize = 60
    10.fontFile = fileadmin/fonts/arial.ttf
    10.fontColor = #660000
    10.niceText = 1
    10.offset = 10, 75

    20= TEXT
    20.text.field = subtitle // title
    20.fontSize = 36
    20.fontFile = fileadmin/fonts/arial.ttf
    20.fontColor = #E2F5E5
    20.niceText = 1
    20.offset = 40, 68
    }

    navi_main = COA
    navi_main {
    10 < temp.ypMenu
    20 < temp.user_menu
    }

    navi_rechts= HMENU
    navi_rechts.special = directory
    navi_rechts.special.value = 130
    navi_rechts.1 = TMENU

    navi_rechts.1.NO = 1
    navi_rechts.1.NO.linkWrap =  | |

    content = CONTENT
    content {
    table = tt_content
    select.orderBy = sorting
    select.where = colPos = 0
    }

    }
    }
    [/code:1:4acd6ee7c5]

    temp.ypMenu
    [code:1:4acd6ee7c5]
    page = PAGE
    page {
    typeNum = 0
    bodyTag = <body bgColor = "FFFFFF">
    stylesheet = fileadmin/spp/sph/class.css
    meta.AUTHOR = Nico Athanasopoulos

    10 = TEMPLATE
    10.template = FILE
    10.template.file = fileadmin/spp/sph/index.html
    10.workOnSubpart = DOKUMENT
    10.marks {
    logo = IMAGE
    logo.file = fileadmin/spp/img/logo.jpg
    head
    head

    TRAILER = IMAGE
    TRAILER.file = GIFBUILDER
    TRAILER.file {
    XY = 559, 86
    backColor = #990000

    5 = IMAGE
    5.file = fileadmin/spp/img/head.jpg
    10 = TEXT
    10.text.field = subtitle // title
    10.fontSize = 60
    10.fontFile = fileadmin/fonts/arial.ttf
    10.fontColor = #660000
    10.niceText = 1
    10.offset = 10, 75

    20= TEXT
    20.text.field = subtitle // title
    20.fontSize = 36
    20.fontFile = fileadmin/fonts/arial.ttf
    20.fontColor = #E2F5E5
    20.niceText = 1
    20.offset = 40, 68
    }

    navi_main = COA
    navi_main {
    10 < temp.ypMenu
    20 < temp.user_menu
    }

    navi_rechts= HMENU
    navi_rechts.special = directory
    navi_rechts.special.value = 130
    navi_rechts.1 = TMENU

    navi_rechts.1.NO = 1
    navi_rechts.1.NO.linkWrap =  | |

    content = CONTENT
    content {
    table = tt_content
    select.orderBy = sorting
    select.where = colPos = 0
    }

    }
    }[/code:1:4acd6ee7c5]

    css:

    [code:1:4acd6ee7c5]
    #cMenu {
    height:31px;
    width: 790px;
    margin-left:1px;
    margin-bottom:1px;

    background: #cccccc url(fileadmin/spp/src/menu_bg2.gif) repeat-x top left;
    position:relative; /* wichtige angabe, sonst taucht das slideMenu an falscher Position auf */
    }

    /*
    ###################
    # ypMenu Styles #
    ###################
    */
    .mmContent {
    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 {
    display: block;
    color: #222222;
    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;
    }

    * html .mmContent li a {
    width: 160px;
    width: 160px;
    }

    .mmContent li a:link { background: #EAED65; color: #222222; font-size: 12px; }
    .mmContent li a:visited { background: #EAED65; color: #222222; font-size: 12px; }

    .mmContent li a:hover{ background: #FFFF99; color: #222222; font-size: 12px; }
    .mmContent li a:active { background: #EAED65; color: #222222; font-size: 12px; }

    .mmContent li a.submenu {
    background: #EAED65 url(http://steinhauer-gmbh.net/cms/fileadmin/scripts/ypMenu/pfeil.gif) no-repeat right center;
    }
    .mmContent li a.submenu:hover {
    background: #FFFF99 url(http://steinhauer-gmbh.net/cms/fileadmin/scripts/ypMenu/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 {
    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;
    }

    * html .mmContentb li a {
    width: 160px;
    width: 160px;
    }

    .mmContentb li a:link { background: #EAED65; color: #222222;}
    .mmContentb li a:visited { background: #EAED65; color: #222222;}

    .mmContentb li a:hover{ background: #FFFF99; color: #222222;}
    .mmContentb li a:active { background: #EAED65; color: #222222;}

    .mmContentb li a.submenu {
    background: #EAED65 url(http://steinhauer-gmbh.net/cms/fileadmin/scripts/ypMenu/pfeil.gif) no-repeat right center;
    font-size: 12px;
    }
    .mmContentb li a.submenu:hover {
    background: #FFFF99 url(http://steinhauer-gmbh.net/cms/fileadmin/scripts/ypMenu/pfeil.gif) no-repeat right center;
    font-size: 12px;
    }

    body { background-color:#990000;
    font-family:Helvetica,Arial,sans-seif;
    color:#000000;
    }

    a {text-decoration: none; color:#86061B; background-color:#ffffcc;}
    a:hover{text-decoration: none; color:#ffffcc;background-color:#86061B;}
    a:active{text-decoration: none; color:#ffffcc;background-color:#86061B;}

    .top {background-color:#990000;}

    .logo {}

    .head {text-align:right;color:#ffffcc;}

    .content {background-color:#ffffcc; font-size:12px; color:black; align:left;}

    .label {background-color:#86061B; font-size:10px; color:#ffffcc; align:left;}

    .navi_rechts {background-color:#86061B; font-size:10px; color:#ffffcc; align:right;}

    .bottom {background-color:#86061B; font-size:10px; color:#ffffcc;}[/code:1:4acd6ee7c5]

    so
    wenn´s noch fragen gibt - ich bin online
    ich bedanke mich jedenfalls schonmal im voraus bei allen, die sich die zeit nehmen möchten, sich gedanklich mit meinem problem auseinander zu setzen.

    mfg aus freiburg
    kwie

  • kwiesatz kwiesatz
    T3PO
    0 x
    18 Beiträge
    0 Hilfreiche Beiträge
    23. 04. 2005, 10:33

    der mir helfen will?

    *beitrag nach oben push


  • 0 x
    26. 04. 2005, 13:24

    Was kann man machen , damit bei ausgeschaltetem
    Javascript die unteren Menüebenen nicht sichtbar werden ?

    Bei allen Webseiten , die YpMenu verwenden ,
    werden die Submenüs "statisch" sichtbar ,
    wenn Javascript ausgeschaltet ist.
    Entweder direkt unter "Hauptmenüleiste" oder am Seitenende sieht man
    die komplette Liste der Submenüeinträge.

    Schade eigentlich , denn ich wollte mir eine ähnliche
    "Menüstruktur" wie bei http://www.bonn.de für mein
    zukünftiges Regionalportal kreieren.

    Findet sich diesbezüglich keine Lösung ,
    werde ich wohl auf TMENU_LAYER umsteigen.

    Dort wäre zumindest die Hauptmenüleiste bedienbar
    und die Layer wären bei ausgeschaltetem
    Jacascript unsichtbar.

    Mir ist es wichtig , da einige Besucher partout
    kein Javascript einschalten.

    Bis jetzt muß ich mich mit einer "noscript"-Browserweiche
    zufrieden geben .
    Mittels dieser wird ein Besucher ohne Javascript
    aufgefordert/erinnert Javascript einzuschalten.
    Darin ist auch ein Link enthalten ,
    der dem "unwissenden" Besucher hilft ,
    Javascript zu aktivieren.

    Wäre schön wenn jemand eine ander Lösung
    vorschlagen könnte.

  • silverzone silverzon...
    Sternenflotten-Admiral
    0 x
    185 Beiträge
    0 Hilfreiche Beiträge
    18. 05. 2005, 11:56

    hallo zusammen

    ich verstehe das irgendwie nicht... #evil# #evil# #evil#

    jetzt habe ich 4 stunden an diesem menü gebastetlt und es klappt immer noch nicht. bis jetzt wird folgendes angezeigt:
    [url]http://sirnach.h-it.ch/dummy-3.7.0[/url]

    das problem ist, dass die menüs nicht aufklappen (die kategorie news hat als einzige unterkategorien)

    sieht da jemand gleich den fehler? habe die dateien übernommen und eigentlich fast nix bis auf die id geändert.

    was mir immer noch nicht klar ist:

    20 < temp.user_menu
    was bring das?
    ich hab ja gar kein temp.user_menu
    wass muss da drinn stehen

    gruss stefan

  • Strichmaennli Strichmae...
    Padawan
    0 x
    36 Beiträge
    0 Hilfreiche Beiträge
    31. 05. 2005, 23:33

    hallo

    möchte mir ein vertikales ypmenu erstellen und jetzt sind die untermenüs ständig eingeblendet. siehe [url]http://rpc.strichmaennli.ch[/url]

    --> wie bekomme ich die weg, bzw. wie bekomme ich es hin, dass das 2. und 3. untermenü ausgeslidet wird?

    Habe auf einer anderen Seite ein horizontales menü erstellt. Da funktioniert alles tip top.

    danke für eure hilfe.