Plugin Subsites Menü MouseOver-Effekt

Erweiterungen
Post Reply
Gonzo Gates
Posts: 194
Joined: Thu 19. Jan 2023, 21:46

Plugin Subsites Menü MouseOver-Effekt

Post by Gonzo Gates »

Hallo Gemeinde,

das ist für mich ein eigendlich schon älteres Problem.

Das Plugin lässt sich wunderbar einfach in eine Website einbauen (Habe ich bei mehreren CMSimple Installationen gecheckt) und im CSS konfigurieren. Meine Vorlage heißt 'dor_menu' und ist vertikal ausgerichtet oberhalb der Website positioniert. Ok, das Menü überschneidet um ein paar Pixel das Header-Bild nach unten.

Code: Select all

/*
##################################################
        class extension "dor_menu"
##################################################
*/

/* SUBSITES MENU "dor_menu" */

/*div.ssf_subsitesMenuContainer_dor_menu {margin-top: 5px;}  DOR: hinzugefuegt wg. SSF-Menue jetzt ueber Header-Bild eingefuegt - Abstand zur permanent-navi oben */
div.ssf_subsitesMenuContainer_dor_menu {position: absolute; z-index: 2; margin: .05em 0 0 2px; font-family: RobotoCondensed;} /* DOR: hinzugefuegt wg. SSF-Menue jetzt ueber Header-Bild eingefuegt - Abstand zur permanent-navi oben -> Neues Template neuer abstand, Mit 'position' und 'z-index' Navi1 in den Vordergrund gebracht und 'Headerinage' liegt dahinter */
/*div.ssf_subsitesMenuContainer_dor_menu span {display: block; width: 98px; height: 50px; overflow: hidden; padding: 6px 12px 6px 12px;} */

div.ssf_subsitesMenuContainer_dor_menu span {display: block; width: 145px; height: 25px; overflow: hidden; padding: 6px 12px 6px 12px;} /* DOR: aenderungen - active Navi-Link im Block ausgerichtet - nach rchts geschoben, Element breiter */
/*div.ssf_subsitesMenuContainer_dor_menu a {display: block; width: 98px; height: 50px; overflow: hidden; padding: 6px 12px 6px 12px;} */
div.ssf_subsitesMenuContainer_dor_menu a {display: block; width: 145px; height: 25px; overflow: hidden; padding: 7px 12px 6px 12px;} /* DOR: aenderungen - Links 'Subsites' ausgerichtet - nach rechts geschoben, Element breiter -> deshalb wird das Element eingefaerbt, wenn man kurz unter dem 'Link' ist! */

/*div.ssf_subsitesMenuContainer_dor_menu a:link {color: #ccc;}*/
/* div.ssf_subsitesMenuContainer_dor_menu a:link {color: rgba(119,85,0,1); } DOR: Link in braun, wie Breadcrumb */
div.ssf_subsitesMenuContainer_dor_menu a:link {color: rgba(64,64,64,1); } /* DOR: Link in dunkelgrau - #444, wie Breadcrumb */
/*div.ssf_subsitesMenuContainer_dor_menu a:visited {color: rgba(119,85,0,1);}  DOR: Part2 - wenn die Browser so resistent gegen aenderungen sind, dann baller ich denen eine ':visited'-farbe wie bei ':link' rein...fertich aus! -> DU Knallcharge hast die geschlossene Klammer vergessen! Wenn drin, dann klappts auch mit dem Nachbarn!!! */
div.ssf_subsitesMenuContainer_dor_menu a:visited {color: rgba(64,64,64,1);} /* DOR: Part2 - wenn die Browser so resistent gegen aenderungen sind, dann baller ich denen eine ':visited'-farbe (#444) wie bei ':link' rein...fertich aus! -> DU Knallcharge hast die geschlossene Klammer vergessen! Wenn drin, dann klappts auch mit dem Nachbarn!!! */
/*div.ssf_subsitesMenuContainer_dor_menu a:visited {color: ccc;}*/
/*div.ssf_subsitesMenuContainer_dor_menu a:visited {color: #930;}*/
/*div.ssf_subsitesMenuContainer_dor_menu a:visited {color: #444;} DOR: Part1 - einfach mal raus nehmen, wenn es nicht gefaellt */
/*div.ssf_subsitesMenuContainer_dor_menu a:hover {color: #fc0;}*/
div.ssf_subsitesMenuContainer_dor_menu a:hover {color: rgba(238,238,238,1) /*#eee*/; text-decoration: none;} /* deshalb erhaelt die Schrift ihre Farbe, wenn man kurz unter dem 'Link' ist! */
/*div.ssf_subsitesMenuContainer_dor_menu a:active {color: #f90;}  DOR: sehr helles rot - als Gag drinnen lassen */
div.ssf_subsitesMenuContainer_dor_menu a:active {color: chocolate;} /* DOR: chocolate - als Gag drinnen lassen und passt besser */
/*div.ssf_subsitesMenuContainer_dor_menu a:focus {color: #f90;}  DOR: sehr helles rot - als Gag drinnen lassen */
div.ssf_subsitesMenuContainer_dor_menu a:focus {color: chocolate;} /* DOR: chocolate - als Gag drinnen lassen und passt besser  */

div.ssf_subsitesMenuContainer_dor_menu ul {
list-style-type: none;
list-style-image: none;
padding: 0;
margin: 0;
}

div.ssf_subsitesMenuContainer_dor_menu ul li { /* DOR: Eigenschaften alle Navi-Elemente */
display: block;
float: left;
min-width: 98px; /* DOR: Breite Navi-Elemente */
color: rgba(139,69,19,1); /* DOR: Faebe braun zieht hier nicht. Bei 'a:link' schon */
/*background: #333!important;*/
background: rgba(187,187,187,.85)!important; /* DOR: Hintergrund helleres grau '#bbb' /w opacity */
/*opacity: .85;  DOR: hinzugefuegt -> hat die farbe */
border: 0;
/*border-radius: 3px;*/
border-radius: 0 20px 20px 0; /* DOR: rounded-corners right */
margin: 0 6px 6px 0;
padding-left: 8px;  /* DOR: hinzugefuegt, Text nach rechts geschoben */ 
font-weight: 600; /* DOR: Schrift ein bisschen dicker */
font-size: 18px; /* DOR: hinzugefuegt, Schrift groesser */
letter-spacing: 1px;
text-align: left; /* DOR: hinzugefuegt */
/*box-shadow: inset -2px -2px rgba(119,17,0,.85)!important, inset 2px 2px rgba(119,17,0,.85)!important, inset -2px 2px rgba(119,17,0,.85)!important, inset 2px -2px rgba(119,17,0,.85)!important;*/
box-shadow:inset 0px 0px 5px 0px rgba(119,17,0,.85); /* DOR: hinzugefuegt -> nach Schmerzen mit anderer Vorlage so gebaut */
outline: rgba(153, 51, 00, .8) solid 1px; /* DOR: hinzugefuegt von '.tplge_sidebarNavIn' vom CSS SSF */
}

div.ssf_subsitesMenuContainer_dor_menu ul li.ssf_currentSubsite { /* DOR: aktives Navi-Element */
/*background: #060!important;*/
background: rgba(119,17,0,.85)!important; /* DOR: darkred '#710' */
/*opacity: .85;  DOR: hinzugefuegt -> hat die farbe */
/*height: 42px;  DOR: hoehe aktiver menuepunkt -> Hoehe raus, sonst Umbruch*/
padding-top: 4px; /* DOR: hinzugefuegt wg Schriftgroesse 20px */
/*color: #fc0;*/
color: #eee; /* DOR: farbe wie normale Navi-Links */
border: 0;
/*border-radius: 3px;*/
border-radius: 25px 0 0 25px; /* DOR: rounded-corners left */
box-shadow:inset 0px 0px 5px 2px rgba(238,238,238,.85); /* DOR: hinzugefuegt */
outline: rgba(238,238,238, .7) solid 1px; /* DOR: hinzugefuegt */
/*font-weight: 400;*/
font-weight: 800; /* DOR: Schrift ein bisschen fetter*/
}

div.ssf_subsitesMenuContainer_dor_menu ul li.ssf_currentSubsite:hover { /* DOR: hinzugefuegt fuer 'mouseover' aktive Seite */
  background: rgba(153,51,0,.85)!important; /* DOR: darkred '#930' */
}

div.ssf_subsitesMenuContainer_dor_menu ul li.ssf_otherSubsite {
/*color: #fff;  DOR: hinzugefuegt und bringt nix */
font-weight: 600;
}

div.ssf_subsitesMenuContainer_dor_menu ul li.ssf_otherSubsite:hover {
background: rgba(119,17,0,.85)!important; /* DOR: #710 */
color: #eee;
/*background: coral !important;*/
font-weight: 600;
box-shadow:inset 0px 0px 5px 1px rgba(238,238,238,.85); /* DOR: hinzugefuegt */
outline: rgba(238,238,238, .7) solid 1px; /* DOR: hinzugefuegt */
}
Ich habe festgestellt, dass wenn man sich langsaaam mit dem Curser über einen dargestellten Menüpunkt bewegt, sich bei meinem Menü die Hintergrund Farbe, aber nicht die Schrift Farbe (wie gewollt) ändert. Außerdem bleibt der Curser ein Pfeil. Erst wenn man ihn weiter bewegt, ändert sich die Farbe und der Curser wird zum Pointer.

Also nochmal ein Test mit der Vorlage 'horizontal01' aus dem Plugin getestet und auch dort erscheint der selbe Effekt, wie oben beschrieben. Man muss mit der Maus nur schnell genug sein, das dieser Effekt nicht auftritt. (CMSimple 5.9, SubsiteFuncs,2021011001,2.2.)

Nach einigen Versuchen das schnell mal eben auszubügeln, habe ich aufgegeben.

Andere Änderungen im CSS betreffen lediglich minimal die Darstellung der 'Sitemap'.

Das Plugin habe ich in den Quellen nach dem Update auf PHP 8.2 per 'diff' geändert. Aktuell CMSimple 5.11

Hat jemand Ideen?

Gruß
Gonzo
Ich kenne keinen Sysadmin oder Programmierer, der sich noch nie ins Knie geschossen hat :!:
Top
Post Reply

Return to “Plugins and Addons”