Ergebnis 1 bis 12 von 12

Thema: Problem mit 2 stufigen Menü

  1. #1
    Contao-Nutzer
    Registriert seit
    02.10.2009.
    Beiträge
    14

    Standard Problem mit 2 stufigen Menü

    Hallo zusammen...

    Ich hab hier folgendes Problem:

    Ich habe ein Menü mit 2 Stufen (horizontal). Sobald jemand auf die erste Stufe klickt, klappt die 2. aus und bleibt auch stehen. Soweit so gut, das hab ich alles hinbekommen.

    Wenn ich aber jetzt in der 2. Stufe auf einen Link klicke, möchte ich das die 2. Stufe immernoch stehen bleibt... Und auch die Schriftarten sollten statt gelb auch grau sein... Ich hab euch unten mal den Templace, CSS und HTML Code reingepackt.

    Ich hoffe Ihr könnt mir weiterhelfen, bin schon halb am verzweifeln...

    Vielleicht könnte ich es so steuern wenn ich der dem UL in den subitems eine Klasse zuteilen kann, im nav template ist aber nur "echo item['subitems'];". Weis einer wo ich diese Klasse einfügen kann?

    HTML:
    HTML-Code:
    <div id="menu">
    <ul>
    <li><a href="index.php/kontakt.html" title="Kontakt">Kontakt</a>
    <ul>
    <li><a href="index.php/geschaeftsfuehrung.html" title="Geschäftsführung">Geschäftsführung</a></li>
    <li><a href="index.php/adresse.html" title="Adresse">Adresse</a></li>
    <li><a href="index.php/anfrage.html" title="Anfrage">Anfrage</a></li>
    <li><a href="index.php/standort.html" title="Standort">Standort</a></li>
    </ul>
    </li>
    <li><a href="index.php/info.html" title="Info">Info</a>
    <ul>
    <li><a href="index.php/veranstaltungen.html" title="Veranstaltungen">Veranstaltungen</a></li>
    <li><a href="index.php/pipettor-info.html" title="Pipettor-Info">Pipettor-Info</a></li>
    </ul>
    </li>
    <li><a href="index.php/produkte.html" title="Produkte">Produkte</a>
    <ul>
    <li><a href="index.php/oem-pipettoren.html" title="OEM-Pipettoren">OEM-Pipettoren</a></li>
    <li><a href="index.php/massgeschneidert.html" title="Massgeschneidert">Massgeschneidert</a></li>
    </ul>
    </li>
    <li><a href="index.php/kompetenzen.html" title="Kompetenzen">Kompetenzen</a>
    <ul>
    <li><a href="index.php/betreuung-von-a-z.html" title="Betreuung von A-Z">Betreuung von A-Z</a></li>
    <li><a href="index.php/entwicklung.html" title="Entwicklung">Entwicklung</a></li>
    <li><a href="index.php/qualitaet.html" title="Qualität">Qualität</a></li>
    </ul>
    </li>
    <li><a href="index.php/unternehmen.html" title="Unternehmen">Unternehmen</a>
    <ul>
    <li><a href="index.php/philosophie.html" title="Philosophie">Philosophie</a></li>
    <li><a href="index.php/mitarbeiter.html" title="Mitarbeiter">Mitarbeiter</a></li>
    <li><a href="index.php/karriere.html" title="Karriere">Karriere</a></li>
    </ul>
    </li>
    </ul>
    
    </div>
    CSS:
    HTML-Code:
    #menu {
        width: 800px;
        height: 380px;
        position: absolute;
        margin: 0;
        padding: 0;
      background-image: url("tl_files/***/images/background-menu.jpg");
        background-repeat: repeat-x;
        font-weight: bold;
        font-size: 14px;
        list-style-type: none;
    }
    #menu .active a {
        color: rgb(251,189,26);
    }
    #menu a {
        text-decoration: none;
        color: rgb(76,76,78);
    }
    #menu a:hover {
        text-decoration: none;
        color: rgb(251,189,26);
    }
    #menu ul {
        margin: 0 28px 0 0;
        padding: 0;
        list-style-type: none;
    }
    #menu .active ul {
        top: 28px;
        position: absolute;
        display: block;
        text-align: left;
        left: 0px;
    }
    #menu .active {
        background-color: rgb(255,255,255);
        color: rgb(251,189,26);
    }
    #menu li {
        width: 115px;
        height: 30px;
        float: right;
        text-align: center;
        text-decoration: none;
        line-height: 30px;
    }
    #menu li ul {
        display: none;
    }
    #menu li ul li {
        width: 200px;
        float: none;
        padding-left: 27px;
        text-align: left;
    }
    Navigations Template:
    HTML-Code:
    <ul>
    <?php foreach ($this->items as $item): ?>
    <?php if ($item['isActive']): ?>
    <li class="active"><?php echo $item['link']; ?><?php echo $item['subitems']; ?></li>
    <?php else: ?>
    <li><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>
    <?php endif; ?>
    <?php endforeach; ?>
    </ul>
    Ich danke schon jetzt für eure Tipps!

    Liebe Grüsse
    Extremo

  2. #2
    Contao-Nutzer
    Registriert seit
    15.11.2010.
    Beiträge
    12

    Standard

    Also für mich ist das ein Navigationsmenü mit Startlevel 0 und Stoplevel 1. Dann wird die 2. Ebene erst angezeigt, wenn ein Link in der 1. Ebene angeklickt wird und diese Ebene bleibt dann auch da (solange "Hard Limit" nicht aktiviert ist)

    Den aktive Seite kannst Du über die CSS-Klasse .active ansteuern die "Überseiten" mit .trail (So ist es zumindest im Standardtemplate). Wenn ich dein Beispiel richtig verstehe, willst Du bei der aktiven Seite die Schriftart ändern. Wäre im CSS dann etwa sowas:

    Code:
    #menu li ul li.active {
      color:BLA;
    }
    Korrigier mich, wenn ich einen Denkfehler reingehauen habe

    Liebe Grüße,
    Jonas

  3. #3
    Contao-Nutzer
    Registriert seit
    02.10.2009.
    Beiträge
    14

    Standard

    Zitat Zitat von JonasKeinholz Beitrag anzeigen
    Also für mich ist das ein Navigationsmenü mit Startlevel 0 und Stoplevel 1. Dann wird die 2. Ebene erst angezeigt, wenn ein Link in der 1. Ebene angeklickt wird und diese Ebene bleibt dann auch da (solange "Hard Limit" nicht aktiviert ist)

    Den aktive Seite kannst Du über die CSS-Klasse .active ansteuern die "Überseiten" mit .trail (So ist es zumindest im Standardtemplate). Wenn ich dein Beispiel richtig verstehe, willst Du bei der aktiven Seite die Schriftart ändern. Wäre im CSS dann etwa sowas:

    Code:
    #menu li ul li.active {
      color:BLA;
    }
    Korrigier mich, wenn ich einen Denkfehler reingehauen habe

    Liebe Grüße,
    Jonas
    Hallo Jonas,
    vielen Dank für deine Antwort!

    Hab das mit dem Navigationsmenü versucht mit Startlevel 0 und Stoplevel 1. Klappt aber leider noch nicht :-(

    Ach ja,
    Code:
    #menu li ul li.active {
      color:BLA;
    }
    funktioniert ohne Probleme -> DANKE!

    Hier noch der Link zum aktuellen Projekt:
    http://www.kawator.com/cms/

    Dort seht Ihr auch die Problematik... Ich hoffe Ihr könnt mir nochmals helfen! Und nochmals danke Jonas für deine Hilfe!

    Gruss
    Extremo

  4. #4
    Contao-Nutzer
    Registriert seit
    15.11.2010.
    Beiträge
    12

    Standard

    Kein Problem

    Also hab mir das grad nochmal angesehen. Mich macht grad das Folgendes im CSS stutzig:

    Code:
    #menu li ul{display:none;}
    Was genau soll das bewirken? Weil eigentlich taucht auch auf den Unterseiten das Menü zweiter Ebene im HTML auf => Wird einfach nur nicht angezeigt. Probier mal diese Zeile auszukommentieren und dann nochmal diese Sache mit dem Stoplevel?
    Geändert von JonasKeinholz (17.11.2010 um 15:09 Uhr)

  5. #5
    Contao-Nutzer
    Registriert seit
    15.11.2010.
    Beiträge
    12

    Standard

    Habe glaube grade deinen Fehler gefunden: Du positionierst das Untermenü über ".active ul". Wird nun da aber die Unterseite aufgerufen, ist leider nicht mehr die 1. Ebene "active". Wenn Du jetzt aber zusätzlich noch ".trail ul" benutzt, dürfte er das Menü auch bei den Unterseiten richtig positionieren. Mit ".trail" werden nämlich alle "Elternseiten" angesprochen.

  6. #6
    Contao-Nutzer
    Registriert seit
    02.10.2009.
    Beiträge
    14

    Standard

    Hallo Jonas,
    nochmals wirklich DANKE für deine tolle Hilfe!

    Ich hab's die Positionierungen bereits ohne .trail irgendwie hinbekommen.

    Jetzt habe ich aber nur noch ein kleines Problem:

    Sobald ich auf einer der Unterseiten bin (z.B http://www.kawator.com/cms/qualitaet.html) fliegt mir der weisse Hintergrund auf der oberen Leiste raus. (Aktive Hauptseite auf der ersten Stufe - wechselt den Hintergrund von Grau auf Weiss.)

    CSS des wechselnden Hintergrundes:
    <code>
    #menu .active {
    background-color: rgb(255,255,255);
    color: rgb(251,189,26);
    }
    </code>

    Hoffe du kannst mir auch kurz hier helfen, dann wär ich richtig froh. Habe mir schon fast den Kopf auf der Tastatur wundgeschlagen vor lauter Verzweiflung :-)

    Gruss
    Extremo

  7. #7
    Contao-Nutzer
    Registriert seit
    25.06.2009.
    Beiträge
    43

    Standard

    #menu .active, #menu .trail {
    background-color: rgb(255,255,255);
    color: rgb(251,189,26);
    }

    dürfte das Problem erledigen - wie mein Vorredner schon gesagt hat: Mit .trail werden die "Elternseiten" angesprochen. Also alles das was auf dem Weg zum active liegt.

  8. #8
    Contao-Nutzer
    Registriert seit
    02.10.2009.
    Beiträge
    14

    Standard

    Zitat Zitat von juli0r Beitrag anzeigen
    #menu .active, #menu .trail {
    background-color: rgb(255,255,255);
    color: rgb(251,189,26);
    }

    dürfte das Problem erledigen - wie mein Vorredner schon gesagt hat: Mit .trail werden die "Elternseiten" angesprochen. Also alles das was auf dem Weg zum active liegt.
    Hallo juli0r,
    danke auch Dir für deine Antwort!

    Ich habe versucht, das CSS gemäss deinem Tipp anzupassen. Dennoch greift die Regelung nicht. Ich bin mir auch nicht sicher ob ich diese auch korrekt anwende, da ich .trail noch nie verwendet habe.

    Aktuelle Version --> http://www.kawator.com/cms/

    Ich werde mich bei euch entsprechend revanchieren, wenn alles klappt. Ihr seit meine Rettung!

    Gruss
    Extremo

  9. #9
    Contao-Nutzer
    Registriert seit
    15.11.2010.
    Beiträge
    12

    Standard

    Liegt daran, dass Du Dein Navigations-Template geändert hast und somit die "Standard-Contao" Klassen nicht auftauchen:

    Code:
    <ul>
    <?php foreach ($this->items as $item): ?>
    <?php if ($item['isActive']): ?>
    <li class="active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>"><?php echo $item['link']; ?><?php echo $item['subitems']; ?></li>
    <?php else: ?>
    <li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?>><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>
    <?php endif; ?>
    <?php endforeach; ?>
    </ul>
    Wenn Du den fettgedruckten Code in Dein Template übernimmst, sollte Contao die Klasse trail verwenden und dann noch den CSS-Code von meinem Vorredner nehmen und das Problem sollte gelöst sein

  10. #10
    Contao-Nutzer
    Registriert seit
    02.10.2009.
    Beiträge
    14

    Standard

    Hallo Zusammen,
    ich glaubs ja nicht, endlich gehts! Ihr seit meine Helden!

    Falls einer von euch beiden ein Webhosting auf cPanel Server (Standort Deutschland) ohne Werbung etc. möchte, soll er sich doch bitte bei mir melden.

    Traffic und sonstiges unlimitiert. Speicherplatz nach Absprache (10 GB wenn o.K)

    Ich danke nochmals für eure Hilfe! Endlich gehts!

    Dank und Gruss
    Extremo

  11. #11
    Contao-Nutzer
    Registriert seit
    02.10.2009.
    Beiträge
    14

    Standard

    Ach mist, zu früh gefreut. Einen kleinen Bug hat's noch drinn.

    Obwohl bei <code>
    #menu .active,#menu .trail{
    background-color: rgb(255,255,255);
    color: rgb(251,189,26);
    }
    </code>
    color gesetzt wurde, zeigt es diese bei den unterseiten dennoch Grau an. Hat da einer ne Idee? Und dann gebe ich definitiv Ruhe, denn Ihr habt mir bereits sehr geholfen!

    Nochmals Danke!

    Gruss
    Extremo

  12. #12
    Contao-Nutzer
    Registriert seit
    15.11.2010.
    Beiträge
    12

    Standard

    Auf den Unterseiten wird "Produkte" wieder als Link angezeigt. Folgendes sollte helfen:

    Code:
    #menu .trail a {
    color: rgb(251,189,26);
    }

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Ähnliche Themen

  1. Problem mit Radio-Button-Menü
    Von nAttillionAire im Forum Formulare
    Antworten: 4
    Letzter Beitrag: 01.02.2011, 13:13
  2. Css Menü-Problem...
    Von Truller500 im Forum Layout / Templates / Holy Grail
    Antworten: 17
    Letzter Beitrag: 08.07.2010, 19:26
  3. CSS-Problem mit Dropline-Menü...
    Von phyton2706 im Forum Layout / Templates / Holy Grail
    Antworten: 10
    Letzter Beitrag: 28.01.2010, 06:25
  4. DropDown Menü Problem
    Von matze im Forum Layout / Templates / Holy Grail
    Antworten: 7
    Letzter Beitrag: 24.09.2009, 15:45

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •