Beispielcode zum Erstellen eines minimierten Header-Effekts nur mit CSS

Zusammengeklappte Kopfzeilen sind eine großartige Lösung, um Benutzern wichtige Informationen wie Sonderangebote und wichtige Ankündigungen anzuzeigen. Viele Entwickler verlassen sich beim Erstellen dieser Art von Effekten auf JavaScript. Es ist jedoch durchaus möglich, mit reinem CSS einen einfacheren Effekt mit reduzierter Kopfzeile zu erstellen.

Die eingeklappte Kopfzeile funktioniert ähnlich wie der Parallaxeffekt. Der Hintergrund der minimierten Kopfzeile bleibt fixiert, sodass der Inhalt darunter darüber fließen kann, wenn der Benutzer auf der Seite nach unten scrollt. In diesem Tutorial zeigen wir Ihnen, wie Sie die folgenden reduzierten Titeleffekte erstellen:

Diese Präsentation besteht aus drei Teilen:

1. Eine feste Kopfzeile mit schwarzem Hintergrund oben auf der Seite, die das Hauptmenü enthält.
2. Ausgeklappte Kopfzeile mit blauem Hintergrund, die zusätzliche Informationen zum Sonderangebot enthält.
3. Der Benutzer scrollt zum restlichen Inhalt mit einem weißen Hintergrund der minimierten Kopfzeile.

Einklappbare Kopfzeilen sind für die Benutzererfahrung großartig. Benutzer können jederzeit scrollen, wenn sie spezielle Informationen sehen möchten, werden dadurch aber beim Lesen des restlichen Inhalts nicht abgelenkt.

Sehen wir uns nun Schritt für Schritt an, wie man einen Faltkopf erstellt.

1. HTML erstellen

HTML besteht aus drei Hauptteilen:

Wird für die feste obere Menüleiste verwendet, .banner ist die gefaltete Kopfzeile und .article wird für den restlichen Inhalt verwendet. So sieht der Code aus:

 <div Klasse="Container"> 
        <Kopfzeile>
            <Navigation>
                <ul Klasse="Menü">
                    <li class="logo"><a href="#">Entwicklung und Design</a></li>
                    <li><a href="#">Startseite</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Über</a></li>
                    <li><a href="#">Kontakt</a></li>
                </ul>
            </nav>
        </header>
        <div Klasse="Banner">
            <div>
                <h2 class="banner-title">Verpassen Sie nicht unser nächstes Webinar</h2>
                <p class="banner-desc">Jetzt anmelden und kostenlos ein E-Book auswählen</p>
            </div>
            <button class="btn-signup" type="button" onclick="location.href='#'">
                   Zu den Webinaren »
            </button>
        </div>
        <Artikelklasse="Artikel">
            <p>...</p>
        </Artikel>
    </div>

2. Fügen Sie grundlegende Stile mit CSS hinzu

Beginnen wir unser CSS, indem wir einige Reset- und Basisstile definieren, zum Beispiel:

* {
	Box-Größe: Rahmenbox;
	Rand: 0;
	Polsterung: 0;
	Schriftfamilie: serifenlos;
	Farbe: #222;
}
A {
	Textdekoration: keine;
}
ul {
	Listenstiltyp: keiner;
}

3. Platzieren Sie die obere Menüleiste

Um die feste Menüleiste oben auf der Seite zu positionieren, müssen Sie

Die Position des Elements wird auf fest und der Z-Index auf einen Wert größer als Null gesetzt. Da der Z-Index standardmäßig auf „auto“ eingestellt ist, muss es sich lediglich um einen Z-Index-Wert handeln, der höher ist als der des übergeordneten Elements. Das folgende CSS verwendet 99, da es wahrscheinlich über

Alle übergeordneten Elemente des Elements:

Kopfzeile {
	Höhe: 70px;
	Hintergrund: #222;
	Position: fest;
	Breite: 100 %;
	Z-Index: 99;
}

Die Regel „z-index: 99;“ ermöglicht, dass die obere Menüleiste über allen Elementen bleibt, selbst wenn die ausblendbare Kopfzeile vollständig ausgeblendet ist und der restliche Inhalt den oberen Seitenrand erreicht.

4. Legen Sie den Menüstil fest

Obwohl die folgenden CSS-Regeln zum Erstellen einer minimierten Kopfzeile nicht erforderlich sind, können Sie diese mit einem oberen Menü formatieren:

Navigation {
	Höhe: erben;
}
.Speisekarte {
	Anzeige: Flex;
	Höhe: erben;
	Elemente ausrichten: zentrieren;
	Polsterung: 0 20px;
}
.menu li {
	Polsterung: 0 10px;
}
.menu ein {
	Farbe: weiß;
}
.logo {
	biegen: 1;
	Schriftgröße: 22px;
}

.nav und Menüelementvererbung

(100 %) Breite, sodass sie auch den gesamten Bildschirm ausfüllen.

Darüber hinaus verwendet .menu Flexbox, sodass die Menüelemente horizontal ausgerichtet werden können, und die Eigenschaft „align-items“ zentriert sie vertikal.

Sie können auch sehen, dass wir dem .logo-Element die CSS-Regel „flex: 1;“ hinzugefügt haben. Die Flext-Eigenschaft ist eine Abkürzung für Flex-Grow, Flex-Shrink und Flex-Basis. Wenn es nur einen Wert hat, bezieht es sich auf Flex-Grow, während die anderen beiden Eigenschaften auf ihren Standardwerten bleiben.

Wenn „Flex-Grow“ auf 1 gesetzt ist, bedeutet dies, dass das angegebene Element den gesamten zusätzlichen Speicherplatz im Flex-Container erhält. Dadurch wird das Menüelement auf die linke Seite des Containers verschoben, während die Menüelemente auf der rechten Seite verbleiben.

5. Platzieren Sie den gefalteten Titel

Auch der eingeklappte Header hat, genau wie die obere Menüleiste, eine feste Position. Es erhält jedoch keinen Z-Index-Wert, sodass es „zusammenbrechen“ kann, wenn der Benutzer auf der Seite nach unten scrollt und der restliche Inhalt das Banner nach und nach überdeckt.

.banner {
	/* zur Positionierung */
	Breite: 100 %;
	Höhe: 300px;
	Position: fest;
	oben: 70px;
	Hintergrund: linearer Farbverlauf (45 Grad, #98cbff, #98ffcb);

	/* zur Inhaltsausrichtung */
	Anzeige: Flex;
	Flex-Richtung: Spalte;
	Inhalt ausrichten: gleichmäßiger Abstand;
	Elemente ausrichten: zentrieren;
}

Wie Sie sehen, verwenden wir erneut Flexbox, um den Inhalt innerhalb der reduzierten Kopfzeile auszurichten. Jetzt handelt es sich um ein spaltenbasiertes Flex-Layout, mit dem Sie Elemente mithilfe der Eigenschaften „Justify-Content“ und „Align-Items“ problemlos vertikal und horizontal ausrichten können.

6. Legen Sie den Stil des gefalteten Titels fest

Dies ist zwar nicht Teil des Effekts der minimierten Kopfzeile, aber so werden die Nachkommen des Elements .banner (Titel, Beschreibung und Schaltfläche) in der obigen Demo formatiert:

.banner-titel {
	Schriftgröße: 32px;
	Rand unten: 10px;
	Textausrichtung: zentriert;
}
.banner-desc {
	Schriftgröße: 22px;
	Textausrichtung: zentriert;
}
.btn-Anmeldung {
	Farbe: weiß;
	Hintergrundfarbe: #0056ab;
	Rand: 0;
	Polsterung: 15px 25px;
	Schriftgröße: 16px;
	Cursor: Zeiger;
}

Im Screenshot unten sehen Sie, wie unsere Demo im Moment aussieht. Da sowohl die obere Menüleiste als auch die Akkordeonüberschrift feste Positionen haben, befinden sie sich oben auf der Seite und decken die obere Hälfte des Inhalts ab. Im nächsten Schritt machen wir die Kopfzeile ausblendbar, indem wir den restlichen Inhalt formatieren.

7. Gestalten Sie den Rest des Inhalts

Um die Kopfzeile beim Scrollen auszublenden, müssen Sie vier Dinge tun:

1. Darüber hinaus müssen Sie einen Hintergrund für den Rest Ihres Inhalts festlegen, damit dieser über die einklappbare Kopfzeile hinausragen kann. Bedenken Sie, dass dieser Effekt dem Parallaxeffekt ähnelt; die verschiedenen Hintergründe müssen sich überlagern.
   1. In der Demonstration haben wir einen einfachen weißen Hintergrund verwendet. Damit dieser Effekt funktioniert, müssen Sie für den Flow-Inhalt immer einen Hintergrund festlegen (sonst wird die Kopfzeile nicht ausgeblendet).
2. Positioniert den Inhalt relativ zu zwei festen Elementen. oben: 370px; Die folgende Regel ist die Summe der Höhe von (70px) und .banner (300px).
3. Stellen Sie die Breite auf 100 % ein, sodass der Inhalt die gesamte Kopfzeile abdeckt.
4. Stellen Sie die Höhe auf 100% ein, damit der Hintergrund die komplette Seitenhöhe einnimmt (wichtig auf mobilen Geräten oder bei langen Seiten).

So sieht es im Code aus:

.Artikel {
	Breite: 100 %;
	Position: relativ;
	oben: 370px; 
	Hintergrund: weiß;
	Höhe: 100%; 
	Polsterung: 30px 10 %;
}
.Artikel p {
	Rand unten: 20px;
}

Den gesamten Code anzeigen

Und fertig ist der Klappkopf. Unten können Sie das gesamte CSS anzeigen. Sie können sich auch eine Live-Demo des in diesem Artikel gezeigten Effekts der minimierten Kopfzeile ansehen.

* {
	Box-Größe: Rahmenbox;
	Rand: 0;
	Polsterung: 0;
	Schriftfamilie: serifenlos;
	Farbe: #222;
}
A {
	Textdekoration: keine;
}
ul {
	Listenstiltyp: keiner;
}
Kopfzeile {
	Höhe: 70px;
	Hintergrund: #222;
	Position: fest;
	Breite: 100 %;
	Z-Index: 99;
}
Navigation {
	Höhe: erben;
}
.Speisekarte {
	Anzeige: Flex;
	Höhe: erben;
	Elemente ausrichten: zentrieren;
	Polsterung: 0 20px;
}
.menu li {
	Polsterung: 0 10px;
}
.menu ein {
	Farbe: weiß;
}
.logo {
	biegen: 1;
	Schriftgröße: 22px;
}
.banner {
	/* zur Positionierung */
	Breite: 100 %;
	Höhe: 300px;
	Position: fest;
	oben: 70px;
	Hintergrund: linearer Farbverlauf (45 Grad, #98cbff, #98ffcb);

	/* zur Inhaltsausrichtung */
	Anzeige: Flex;
	Flex-Richtung: Spalte;
	Inhalt ausrichten: gleichmäßiger Abstand;
	Elemente ausrichten: zentrieren;
}
.banner-titel {
	Schriftgröße: 32px;
	Rand unten: 10px;
	Textausrichtung: zentriert;
}
.banner-desc {
	Schriftgröße: 22px;
	Textausrichtung: zentriert;
}
.btn-Anmeldung {
	Farbe: weiß;
	Hintergrundfarbe: #0056ab;
	Rand: 0;
	Polsterung: 15px 25px;
	Schriftgröße: 16px;
	Cursor: Zeiger;
}
.Artikel {
	Breite: 100 %;
	Position: relativ;
	oben: 370px; 
	Hintergrund: weiß;
	Höhe: 100%; 
	Polsterung: 30px 10 %;
}
.Artikel p {
	Rand unten: 20px;
}

abschließend

Mithilfe ausblendbarer Überschriften können Sie auf benutzerfreundliche Weise zusätzlichen Inhalt oben auf der Seite anzeigen. Sie funktionieren ähnlich wie der Parallaxeffekt; Sie benötigen verschiedene Hintergründe, die sich mit unterschiedlicher Geschwindigkeit bewegen, und müssen den fließenden Inhalt relativ zum festen Element positionieren.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.