Menuleiste mit Bilder (Liste) anstelle von Text + Texteffekt

elmi

Hallo,

ich bin ein ziemlicher Anfänger dennoch versuche ich für meine Webseite eine Bilderleiste als Menu zusammen zu stellen und soweit habe ich es schon. Ich versuche zusätzlich den (hover) so zu gestalten, dass ein Wort über das Bild/Menupunkt erscheint. Mit einzelnen Bilder kriege ich es hin aber , das doi Menuleiste als <ul><li> definiert ist, klappt es nicht und ich komme leider nicht weiter. Ich wäre für gute Tipps sehr dankbar:

/* Text über Navi */

.post{

/*margin: 80px 0 0 20px;*/

position: relative;

cursor: pointer;

}

.post:hover li .menu-text{

/*background-color: #fff;*/

width:152px;

}

.post img{

display: block;

}

.menu-text{

width: 0;

height: 50px;

background-color: rgba(100,100,100,0.7);

position: absolute;

top:0;

display: flex;

justify-content: center;

align-items: center;

overflow: hidden;

/*border: solid;*/

transition: 0.7s ease;

}

.menu-text h2{

color: white;

font-size: 20px;

/* border: 6px solid white; */

padding:10px 30px;

}

/* */

<body>

<ul>

<li class="navi"><div class="menu-text"><h2>Panorama</h2></div> <a href="#"><img src="btn/1.jpg" title="" target=""></a></li>

</ul>

</div>

<div class="box item">Lorem, ipsum dolor sit amet consectetur adipisicing </div>

<div class="box item">Lorem, ipsum dolor sit amet consectetur adipisicing.</div>

</div>

<ul>

<li><a href="#">Impressum</a></li>

<li><a href="#">Kontakt</a></li>

<li><a href="#">Versand</a></li>

<li><a href="#">Kontakt</a></li>

</ul>

</div>

</body>

Sempervivum

Hallo elmi und willkommen im Forum!

Ich habe mir das in einer Testdatei angesehen und verstehe nicht ganz, was Du erreichen willst.

Die zwei ul-Elemente sind unabhängig und das zweite untere hat mit deinem Problem nichts zu tun, nicht wahr?

Bei dem ersten Listenelement sehe ich eine Überschrift mit dem Text "Panorama", der ist zunächst unsichtbar wegen "overflow: hidden;". Was soll mit diesem Test passieren?

Dies:

Zitat

Ich versuche zusätzlich den (hover) so zu gestalten, dass ein Wort über das Bild/Menupunkt erscheint.

verstehe ich so, dass der Text beim Hover genau das Bild überdecken soll, richtig? Das kannst Du auch mit Gridlayout erreichen, wenn Du beides, das Bild und den Text, in die selbe Zelle des Grid legst, ohne die Nachteile von absoluter Positionierung.

Sempervivum

PS: Ich habe eine Demo gemacht mit Gridlayout, wie ich es oben erwähnt hatte:

Code

                <ul>
                    <li class="nav-item">
                        <h2>Der Text</h2>
                        <img src="images/buttondown.png">
                    </li>

Code

        /* Grid anlegen, die Breite soll sich nach dem Inhalt richten: */
        li.nav-item {
            display: inline-grid;
            overflow: hidden;
        }

        li h2,
        li img {
            /* Beide Element sollen in der selben Zelle liegen
            und sich überdecken: */
            grid-column: 1 / 2;
            grid-row: 1 / 2;
        }

        li h2 {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            transition: transform 0.5s;
            /* Den Text nach links verschieben, so dass
            er zunächst unsichtbar ist: */
            transform: translateX(-100%);
        }

        li.nav-item:hover h2 {
            /* Beim Hover heben wir die Verschiebung
            auf, so dass der Text sichtbar wird: */
            transform: translateX(0);
        }

Alles anzeigen

elmi

Hallo Erleuchteter,

ich danke dir, dass du dit die Zeit genommen hast und vielen Dank für die Tipps. Ich konnte mich leider bis heute nicht zurück melden.

Gruß
Elmi

elmi

Bitte um Entschguldigung ich dachte "Erleuchteter" wäre der Benutzernamen.

Sempervivum

Macht nichts. Trifft das denn jetzt, was Du dir vorgestellt hast?

elmi

Ja. Ich hatte ziemliches Chaos in meinem Code. Anfänger eben danke für die Hilfe.

elmi

Hey ich würde gerne Dir eine Frage zu dem Code von Dir stellen. Aus irgend einem Grund funktioniert "hover" nicht hundertprozentig damit meine ich manchmal muß man die Maus etwas hin und her bewegen bos der Effekt mit dem Text einsetzt. Ich habe zwar minimale Änderungen vorgenommen aber das Problem hatte ich vorher schon:

<ul>

</li>

</li>

</li>

</li>

</li>

</li>

</ul>

</div>

---------------------------------------------------------------------------------

/* Grid anlegen, die Breite soll

sich nach dem Inhalt richten: */

li.nav-item {

display: inline-grid;

overflow: hidden;

/* border: solid red; */

}

li h2,

li a {

/* Beide Element sollen in der selben Zelle liegen

und sich überdecken: */

grid-column: 1 / 2;

grid-row: 1 / 2;

/* border: solid green; */

}

li h2 {

display: flex;

align-items: center;

justify-content: center;

margin: 0;

transition: transform 0.4s;

/* Den Text nach links verschieben, so dass

er zunächst unsichtbar ist: */

transform: translateX(-100%);

}

li.nav-item:hover h2 {

/* Beim Hover heben wir die Verschiebung

auf, so dass der Text sichtbar wird: */

transform: translateX(0);

backdrop-filter: blur(5px);

}

Sempervivum

Ich habe deinen neuen Code in eine Testdatei eingetragen und bei mir funktioniert er einwandfrei.

Vermutung: Ich habe in dem Code in deinem ersten Posting einiges an abs. Positionierung gesehen. Gibt es in deinem vollständigen Code noch etwas davon, so dass ein anderes Element die Listenpunkte überdeckt?

Auf jeden Fall wäre es hilfreich, das im vollständigen Zusammenhang zu sehen. Wenn Du es online hast, dann poste bitte die URL.

elmi

HAMBURG-BILDERWELTEN

Ich habe weiter oben in der CSS Datei einen Grid definiert. Könnte es daran liegen?

.hauptContainer{

width: 100%vw;

height: 100%vh;

display: grid;

grid-template-columns: 1fr;

grid-template-rows: 100px 120px 1fr 50px;

grid-template-areas:

"header"

"menuBox"

"container"

"footer"

;

text-align: center;

}

elmi

Das ist der ganze Code:

----------------------------

html body{

margin:0;

padding: 0;

background: rgbwhite;

font-family: Verdana, Geneva, Tahoma, sans-serif;

font-size: 0.9rem;

}

.hauptContainer{

width: 100%vw;

height: 100%vh;

display: grid;

grid-template-columns: 1fr;

grid-template-rows: 100px 120px 1fr 50px;

grid-template-areas:

"header"

"menuBox"

"container"

"footer"

;

text-align: center;

}

.container{

min-width: 100%;

grid-area: container;

background-color: white;

display: flex;

justify-content: center;

gap: 50px;

flex-direction: row;

flex-wrap: wrap;

}

/* Grid anlegen, die Breite soll

sich nach dem Inhalt richten: */

li.nav-item {

display: inline-grid;

overflow: hidden;

/* border: solid red; */

}

li h2,

li a {

/* Beide Element sollen in der selben Zelle liegen

und sich überdecken: */

grid-column: 1 / 2;

grid-row: 1 / 2;

/* border: solid green; */

}

li h2 {

display: flex;

align-items: center;

justify-content: center;

margin: 0;

transition: transform 0.4s;

/* Den Text nach links verschieben, so dass

er zunächst unsichtbar ist: */

transform: translateX(-100%);

}

li.nav-item:hover h2 {

/* Beim Hover heben wir die Verschiebung

auf, so dass der Text sichtbar wird: */

transform: translateX(0);

backdrop-filter: blur(5px);

}

Sempervivum

Was ich beobachte: Wenn man von oben oder unten mit der Maus ganz schnell auf ein Bild fährt, blitzt es links ganz kurz auf aber der Text erscheint nicht dauerhaft. Muss ich genauer untersuchen.

Sempervivum

Ich haben das jetzt untersucht. Dadurch, dass die Elemente <h> und <a> sich überdecken feuern die Events mouseover und mouseout mehrfach und das kann in Verbindung mit der Transition zu Problemen führen. Versuche folgendes:

Die Elemente <h> sollen nicht auf Mausaktionen reagieren:

Code

        li h2 {

            display: flex;

            align-items: center;

            justify-content: center;

            margin: 0;

            transition: transform 0.4s;

            /* Den Text nach links verschieben, so dass

    er zunächst unsichtbar ist: */

            transform: translateX(-100%);
            
            /* Hinzu fügen: Die Elemente sollen nicht
            auf Mausaktionen reagieren: */ 
            pointer-events: none;

        }

Alles anzeigen

Außerdem überdecken sich die Elemente nicht genau weil der Defaultwert für "vertical-align" "baseline" ist. Das kannst Du durch dieses CSS beheben:

Code

        li img {
            vertical-align: top;
        }

Menuleiste mit Bilder (Liste) anstelle von Text + Texteffekt

Jetzt mitmachen!

Tags