Cassiopeia - Menü Links formatieren

deltapapa

Moin Moin,

ich würde gerne die Links im Menü des Cassiopeia als Child Template formatieren.

Hintergrund: Im Standard ist der Homebutton immer unterstrichen, auch wenn dieser nicht aktiv ist und wenn man ein Home Symbol mit fa fa-home verwendet, wird dieser Strich zu den anderen Menüpunkten versetzt, was sehr unschön aussieht:

Nun wollte ich als erstes diesen Strich entfernen, kann die entsprechende Klasse aber nicht finden. In den Dev Tools finde ich nur die Farbe unter ::after:

Also Idee ist, diesen Strich, auch beim Hovern der anderen Menüpunkte komplett zu entfernen.

Dann würde ich gerne beim Hovern und bei dem aktiven Menüpunkt entweder Unterstreichen oder einen Rahmen dort hin machen, wo im Bild die gestrichelte Linie ist:

Aber wie gesagt, alle versuche mit current oder active haben nicht funktioniert.

Leider findet man weder im DEU noch im ENG Raum Informationen dazu. Hier ist das sehr gut umgesetzt, ist aber glaube ich kein Cassiopeia (wobei ich den Link aus einer Antwort hier aus dem Forum habe:) http://www.jes-hannover.de/

Diese CSS Klassen habe ich alle schon ausprobiert:

CSS

/*alle einzelnen menupunkte beim hover*/
.container-header .mod-menu a:hover {
text-decoration: underline !important;
}
/*menupunkte mit focus uber tabulator*/
.container-header .mod-menu a:focus {
text-decoration: underline!important;
}
/*alle menupunkte die angeklickt werden*/
.container-header .mod-menu a:active {
text-decoration: underline !important;
}
/*erster menupunkt*/
.metismenu.mod-menu .metismenu-item.active > a {
text-decoration: underline !important;
}

Alles anzeigen

Ich hoffe, da kann mir jemand von euch auf die Sprünge helfen, kann ja eigentlich nicht so schwer sein

Vielen herzlichen Dank,

drmenzelit

Warum Home immer als aktiv dargestellt wird, kann ich nicht sagen. Ist bei mir nicht so.

Code

 .container-header .metismenu > li > a::after {
 	display: none;
 }

deltapapa

vielen Dank, hast du den eine Idee, wie der aktive Link angesprochen wird. Also der, welche Seite gerade geöffnet ist?

Stef

Bei mir sieht es so aus: Der aktive Link ist "Schnick-Schnack", scheint zu funktionieren.

Sieger66

Dein Home Menüeintrag hat immer auch die Klasse active auch wenn ein anderer Menüeintrag aktiv ist daher ist bzw. war er permanent unterstrichen:

Code

<li class="metismenu-item item-101 level-1 default active"><a href="/"><span class="p-2 fa fa-home" aria-hidden="true"></span>Home</a></li>

Warum dies bei dir so ist weiß ich nicht.

Wenn du auch im Hamburger-Menü den permantenten Strich beim Home-Eintrag entfernen möchtest geht dies z.B.per:

Code

.metismenu.mod-menu .metismenu-item.active>a
{
 	text-decoration: none;
 }

Zitat von deltapapa

...hast du den eine Idee, wie der aktive Link angesprochen wird. Also der, welche Seite gerade geöffnet ist?

z.B.:

.metismenu.mod-menu .metismenu-item.current>a

christine2

Hallo Deltapapa,

Wegen der Formatierungen usw. seid Ihr ja schon kräftig dran. Zu dem da, jetzt nur generell:

Zitat von deltapapa

Code

Im Standard ist der Homebutton immer unterstrichen ...

Das liegt vermutlich an (Bei Basiseintrag steht: Home)

also: "Leeren".

Liebe Grüße
Christine

Elwood

BTW:

Der Link auf petersen webdesign im Impressum funktioniert nicht:

deltapapa

Vielen herzlichen Dank euch allen, ich war heute den Tag unterwegs daher kann ich erst jetzt antworten.

Stef jepp, ich hatte kurz nach drmenzelit ihrer Abtwort noch ein bisschen rumprobiert, und hiermit hatte es dann geklappt:

Code

.container-header .metismenu .current {
border-bottom: 2px solid black;
background-color: #00bbea;
}

Sieger66 ist ja so ähnlich wie in deiner Lösung. Das finde ich auch etwas verwirrend, das es so viele unterschiedliche Möglichkeiten gibt um sollche Fälle dann zu lösen.

christine2 -> Krass, kannte ich noch gar nicht, werde ich gleich mal probieren. Ich hatte, weil vorhanden den Basiseintrag tatsächlich gesetzt und gerade festgestellt, das es genau daran lag. Ist das jetzt ein Bug oder Feature? Naja, jetzt klappt es!

Ein 🍺 auf euch!

deltapapa

Elwood gerade zusammen geschrieben: Jepp, auch meine AGB sind weg. Ich habe die Seiten zusammengelegt, und muss noch ein paar Anpassungen machen, vielen Dank für den Hinweis🍺

christine2

Zitat von deltapapa

christine2 -> Krass, kannte ich noch gar nicht, werde ich gleich mal probieren. Ich hatte, weil vorhanden den Basiseintrag tatsächlich gesetzt und gerade festgestellt, das es genau daran lag. Ist das jetzt ein Bug oder Feature? Naja, jetzt klappt es!

Gab da mal was. War ein ev. Bug vor Joomla 3.7 (2017). Hatte das wie in #6 gezeigt, auch damals.

Drauf gekommen ist Re:Later , der mir sagte, ich solle "leeren". Jo, schon lange her ...

Liebe Grüße
Christine

Sieger66

Zitat von deltapapa
Code
.container-header .metismenu .current {
border-bottom: 2px solid black;
background-color: #00bbea;
}
Sieger66 ist ja so ähnlich wie in deiner Lösung. Das finde ich auch etwas verwirrend, das es so viele unterschiedliche Möglichkeiten gibt um sollche Fälle dann zu lösen.

Hatte mich früher auch etwas verwirrt bis ich es dann verstanden habe.

Ein wenig Aufklärung:

Ich fange mal vom Ende her an:

Das fehlende > a am Ende deines Codes bewirkt das die Festlegung nur für das umgebende li-Element wirkt und der Strich ist dadurch dann weiter unten weil padding fürs li-Element im CSS festgelegt bzw. vorhanden ist.

Das dein .current gegebenenfalls auf das li-Element wirkt sieht man übrigens wenn man sich den Quelltext bei deiner Website anschaut z.B.:

Code

...<ul class="mod-menu mod-menu_dropdown-metismenu metismenu mod-list ">
<li class="metismenu-item item-101 level-1 default current active">
<a href="/" aria-current="page">
<span class="p-2 fa fa-home" aria-hidden="true">
</span>
Home
</a>
</li>...

Das .metismenu in deinem Code siehst du übrigens im ul-Element des obigen Seitenquelltext.

Wie auch das .metismenu-item.current aus meinem Code im obigen li-Element des Seitenquelltexts vorhanden ist.

Das .container-header in deinem Code bewirkt das die Festlegung nur im ensprechenden Header-Bereich wirkt und gegebenenfalls nicht z.B. in einem Menü im Footer der Website. Das .container-header sieht man weiter oben im Seitenquelltext beim header-Element.

Code

<header class="header container-header full-width position-sticky sticky-top">

deltapapa

Moin,

vielen dank für die Erklärungen, das hat mich im Verständnis ein gutes Stück weiter gebracht. Liest du den Quelltext in der F12 - Dev - Konsole ab oder direkt in -> Rechte Maustaste Quelltext?

Aber, war noch nicht ganz fertig. Durch das ganze rumprobieren sah das dann so aus:

Den blauen Hintergrund habe ich nur zu testen angeschaltet. Und wieder sind die Striche nicht fluchtend. Also habe ich weiter rumprobiert, und mit folgendem Code sieht es jetzt so aus:

Code

/*Test*/
.container-header .mod-menu a {
    border-bottom: 2px solid #2c2e36;
    background-color: #00bbea;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1em;
}

Damit haben alle Menüpunkte mit oder ohne fa fa-home die gleiche Höhe, einen kleinen Abstand nach links und rechts.

Und hier nochmal der finale Code:

Code

/*macht jeden menueintrag gleich hoch und zentriert den linktext*/
.container-header .mod-menu a {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 .5em;
}
/*beim hovern wird ein unterstrich angezeigt*/
.container-header .mod-menu a:hover {
    border-bottom: 2px solid #2c2e36;
}
/*die aktuelle seite hat einen unterstrich*/
.metismenu.mod-menu .metismenu-item.current > a {
    border-bottom: 2px solid #2c2e36;;
}

Alles anzeigen

Was leider auch noch nicht geklappt hat, ist die Unterstreichung (text-decoration: none;) im Drop Down Menü auszuschalten. Die wird auch mit dem Tip weiter oben konsequent weiter angezeigt.

Sieger66

Verstehe deine Frage nicht wirklich. Unterstreichung per text-decoration sehe ich im Dropdown nicht.

Geht es um den "Unterstrich" im Dropdown beim hovern?

Der kommt ja aus deiner user.css per:

Code

/*beim hovern wird ein unterstrich angezeigt*/
.container-header .mod-menu a:hover {
	border-bottom: 2px solid #2c2e36;
}

Das ginge im Dropdown weg z.B. per:

Code

.container-header .mod-menu .mm-show a:hover {
	border-bottom: none;
}

Den Seitenquelltext lese ich meistens über die Browserwerkzeuge manchmal auch per Rechte Maustaste Quelltext.

deltapapa

Danke Dir,

ich hatte in der Zwischenzeit durch probieren die Lösung gefunden:

Code

.metismenu.mod-menu .metismenu-item.active>a,.metismenu.mod-menu .metismenu-item.active>button,.metismenu.mod-menu .metismenu-item>a:hover,.metismenu.mod-menu .metismenu-item>button:hover {
   text-decoration: none;
}

Damit ging dann die Unterstreichung weg

Sieger66

Falls du das Springen der Menüeinträge nach oben um 2px beim hovern verhindern möchtest eventuell nützlich z.B.:

Code

.container-header .mod-menu :not(.current) a:hover
{
   min-height: 44px;
    padding-top: 2px; 
}

.container-header .mod-menu :not(.current) .mm-show   a:hover {
   min-height: 40px;
}
 
 .container-header .navbar .mod-menu:hover .metismenu-item .mm-collapse.mm-show:not(:hover) {
	margin-top: -2px;
}

.container-header .navbar  .metismenu-item:hover .mm-collapse.mm-show {
	margin-top: 0px;
}

Alles anzeigen

Tags