Contao-Camp 2024
Ergebnis 1 bis 3 von 3

Thema: Navigation vertikal mit Pfeil nach unten und Pfeil nach oben

  1. #1
    Contao-Fan
    Registriert seit
    31.01.2016.
    Ort
    Kaufbeuren
    Beiträge
    473

    Standard Navigation vertikal mit Pfeil nach unten und Pfeil nach oben

    Hallo zusammen,

    ich habe eine vertikale Navigation mit 3 Ebenen erstellt und dort wo sich ein Untermenü darunter befindet wird dies mit einem Pfeil nach unten gekennzeichnet. Diese Navigation funktioniert soweit einwandfrei. Zu sehen ist die Navigation unter: http://sub.musikverein-hirschzell.de...ikkapelle.html.
    Jetzt sollen aber bei allen Menüpunkten vom Trail-Pfad der Pfeil nach unten durch einen Pfeil nach oben ersetzt werden, vorzugsweise mit content:"\f0d8";
    font-family:FontAwesome;. In diesem Fall z.B. sollen die beiden Pfeile von "Die Kapellen" und "Musikkapelle" nach oben zeigen, alle anderen Pfeile die nicht direkt zum Pfad gehören sollen unverändert nach wie vor nach unten zeigen.
    Gibt es dafür eine Lösung, am Besten nur mit reinem CSS? Ich habe schon etliche Versuche unternommen um dies zu realisieren, aber keiner meiner Versuche hat bislang zu dem gewünschten Erfolg geführt.

    CSS der Navigation
    Code:
    .mod_navigation {
    margin-top:-1px;
    }
    
    .mod_navigation ul {
    margin:0;
    padding:0;
    list-style-type:none;
    }
    
    .mod_navigation li {
    margin:0;
    padding:0;
    }
    
    .mod_navigation a,
    .mod_navigation spam {
    display:block;
    margin-top:1px;
    background-color:#004e80;
    border:1px solid #0af;
    color:#e1e1e1;
    text-decoration:none;
    }
    
    .mod_navigation a:hover,
    .mod_navigation a:focus {
    background-color:#804e00;
    border:1px solid #fa0;
    color:#fff;
    }
    
    .mod_navigation .active strong {
    display:block;
    margin-top:1px;
    background-color:#804e00;
    border:1px solid #fa0;
    color:#fff;
    text-decoration:none;
    }
    
    .mod_navigation .trail {
    color:#fff;
    }
    
    .mod_navigation .level_1 a,
    .mod_navigation .level_1 spam {
    font-family:"PF Text Pro Medium", Verdana, Arial, sans-serif;
    font-size:1.4em;
    font-weight:400;
    padding:3px 0 1px 5px;
    height:22px;
    }
    
    .mod_navigation .level_1 .active strong {
    font-family:"PF Text Pro Medium", Verdana, Arial, sans-serif;
    font-size:1.4em;
    font-weight:400;
    padding:3px 0 1px 5px;
    height:22px;
    }
    
    .mod_navigation .level_1 .triangle {
    position:relative;
    }
    
    .mod_navigation .level_1 .triangle:before {
    content:"\f0d7";
    font-family:FontAwesome;
    font-size:18px;
    font-weight:400;
    margin-top:2px;
    right:8px;
    position:absolute;
    }
    
    .mod_navigation .level_2 a,
    .mod_navigation .level_2 spam {
    font-family:"PF Text Pro Medium", Verdana, Arial, sans-serif;
    font-size:1.32em;
    font-weight:400;
    padding:2px 0 1px 18px;
    height:20px;
    }
    
    .mod_navigation .level_2 .active strong {
    font-family:"PF Text Pro Medium", Verdana, Arial, sans-serif;
    font-size:1.32em;
    font-weight:400;
    padding:2px 0 1px 18px;
    height:20px;
    }
    
    .mod_navigation .level_2 .triangle {
    position:relative;
    }
    
    .mod_navigation .level_2 .triangle:before {
    content:"\f0d7";
    font-family:FontAwesome;
    font-size:17px;
    font-weight:400;
    margin-top:1px;
    right:8px;
    position:absolute;
    }
    
    .mod_navigation .level_3 a,
    .mod_navigation .level_3 spam {
    font-family:"PF Text Pro Medium", Verdana, Arial, sans-serif;
    font-size:1.18em;
    font-weight:400;
    padding:2px 0 1px 36px;
    height:18px;
    }
    
    .mod_navigation .level_3 .active strong {
    font-family:"PF Text Pro Medium", Verdana, Arial, sans-serif;
    font-size:1.18em;
    font-weight:400;
    padding:2px 0 1px 36px;
    height:18px;
    }
    Danke!

    Gruß
    Thomas

  2. #2
    Contao-Fan
    Registriert seit
    03.01.2012.
    Beiträge
    809

    Standard

    Du könntest die Menüpunkte der 3. Ebene ansprechen, also z.B.

    .mod_navigation li.trail .level_3 li {
    ...
    }

    Dann würde es sich auf alle Level 3 Elemente des aktiven Menüpunktes beziehen. Oder suchst du eine universelle Lösung, falls es statt der 3. mal die 2. oder 4. Ebene sein sollte?

  3. #3
    Contao-Nutzer Avatar von hjo
    Registriert seit
    08.01.2013.
    Ort
    Wuppertal
    Beiträge
    118

    Standard

    Hallo Thomas,

    ich würde dir empfehlen dein CSS zu korregieren. Es gibt kein Element spam, es heist span. Vielleicht hilft das dein Ziel zu erreichen.

    Viel Erfolg

    Hans-Jürgen

Aktive Benutzer

Aktive Benutzer

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

Lesezeichen

Lesezeichen

Berechtigungen

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