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
