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

Menuleiste mit Bilder (Liste) anstelle von Text + Texteffekt

Jetzt mitmachen!

Tags