Ankündigung

Einklappen
Keine Ankündigung bisher.

Benutzername in der Anmelde-/ Menü-Leiste nur beim Mouseover anzeigen

Einklappen
X
Einklappen
Momentan aktive Benutzer in diesem Thema: 1 (0 Benutzer und 1 Gäste)
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

    Benutzername in der Anmelde-/ Menü-Leiste nur beim Mouseover anzeigen

    Den eigenen Benutzernamen kennt man und es ist eigentlich nicht nötig diesen ständig in dem Anmeldefenster bzw. der oberen Menüleiste angezeigt zu bekommen.
    Der Avatar an sich würde ja bereits ausreichen und ganz nett wäre es den Benutzernamen dann eingeblendet zu bekommen, wenn man mit der Maus über den Avatar fährt (Mouseover).

    Genau das habe ich hier im Forum erstellt und falls Ihr dies auch in eurem Forum so einstellen möchtet, ist dies nur über CSS möglich.
    Daher auch für die vB-Cloud geeignet!

    Vor der Anpassung und nach der Anpassung wenn man mit der Maus über den Avatar fährt:
    Klicke auf die Grafik für eine vergrößerte Ansicht  Name: Bildschirmfoto 2017-10-16 um 18.30.21.png Ansichten: 1 Größe: 4,7 KB ID: 158

    Nach der Anpassung:
    Klicke auf die Grafik für eine vergrößerte Ansicht  Name: Bildschirmfoto 2017-10-16 um 18.28.37.png Ansichten: 1 Größe: 3,3 KB ID: 157

    Um den Benutzernamen nur noch beim Mouseover anzuzeigen, fügt einfach den folgenden CSS in das Template css_additional.css ein.

    Code:
    /* START: Benutzernamen in der main-navbar ein-ausblenden */
    div#lnkUsernameMenu span.b-comp-menu-dropdown__trigger-username {
        opacity:0;
        max-width:1px;
        -webkit-transition: max-width .15s ease, opacity .05s ease;
        -moz-transition: max-width .15s ease, opacity .05s ease;
        -o-transition: max-width .15s ease, opacity .05s ease;
        -ms-transition: max-width .15s ease, opacity .05s ease;
        transition: max-width .15s ease, opacity .05s ease;
    }
    div#lnkUsernameMenu:hover span.b-comp-menu-dropdown__trigger-username {
        opacity:1;
        max-width:200px;
        -webkit-transition: opacity 1s ease;
        -webkit-transition: max-width 1s ease, opacity 1s ease;
        -moz-transition: max-width 1s ease, opacity 1s ease;
        -o-transition: max-width 1s ease, opacity 1s ease;
        -ms-transition: max-width 1s ease, opacity 1s ease;
        transition: max-width 1s ease, opacity 1s ease;
    }
    /* ENDE: Benutzernamen in der main-navbar ein-ausblenden */
    Das ganze ist auch ohne einblenden/ ausblenden-Effekt möglich:
    Code:
    /* START: Benutzernamen in der main-navbar ein-ausblenden */
    #lnkUsernameMenu span.b-comp-menu-dropdown__trigger-username {
        display:none;
    }
    #lnkUsernameMenu:hover span.b-comp-menu-dropdown__trigger-username {
        display:block;
    }
    /* ENDE: Benutzernamen in der main-navbar ein-ausblenden */

    Viel Spaß damit!
    It`s nice to be important but it`s more important to be nice!

    Themenstarter
    #2
    Reserviert
    It`s nice to be important but it`s more important to be nice!

    Kommentar


      #3
      Vielen Dank, das macht die Navigationsleiste endlich mal perfekt!

      Kommentar


        #4
        Netter Effekt. Probiere ich aus.
        https://blendpolis.de

        Kommentar

        Lädt...
        X