So erstellen Sie mit CSS eine Bildlaufleiste mit fester Navigation und Links- und Rechtsverschiebung

Wie oben gezeigt ist die Navigation oben fixiert und Sie können nach links und rechts wischen, um auf weitere Optionen zu klicken.

Dies ist eine ziemlich einfache Produktion, und in diesem Artikel werden nur einige Punkte erwähnt:

Feste Position

Das Menü ist oben fixiert und bewegt sich nicht. Verwenden Sie position:fixed; top:0; left:0;. Beachten Sie außerdem:

• Verschieben Sie die darunterliegende Liste nach unten an die entsprechende Stelle, da sonst beim Öffnen der Seite ein Teil der darunterliegenden Liste überdeckt wird.
• Legen Sie den Hintergrund für das Menü fest. Andernfalls überlappt es, wenn es transparent ist, den Inhalt, der aus der Liste darunter nach oben gescrollt wird.
• Legen Sie den Hintergrund für den Text fest. Da der WeChat-Browser eine Standardhintergrundfarbe (nicht weiß) hat, kann es zu Konflikten mit unserem Effekt kommen. Legen Sie den Hintergrund nach Bedarf fest.

Tabelle verwenden

Normalerweise verwenden wir ul und li für Float, aber wenn eine Zeile nicht angezeigt werden kann, ist es mühsam, zu verhindern, dass sie in die zweite Zeile fällt. Daher empfehlen wir die Verwendung einer Tabelle.

Nachfolgend sehen Sie den gesamten CSS-Code, wobei .wrapper die äußere Ebene darstellt und .nav und .list Brüder sind.

Körper, .wrapper 
{ 
Hintergrund:#fff; 
}

.nav 
{ 
Position: fest; 
oben: 0;
 links: 0; Polsterung: 0; 
Breite: 100 %; 
Höhe: 60px; 
Überlauf-x:scrollen; 
Hintergrund:#fff; 
}
.nav-Tabelle 
{ 
Breite: 720px;
 Rahmen-Collapse:Collapse;
 }
.nav Tabelle td 
{
 Polsterung oben: 10px; 
Polsterung unten: 10px; 
Breite: 80px; 
Textausrichtung: zentriert; 
}
.nav Tabelle td a 
{ 
Zeilenhöhe: 40px; 
Schriftgröße: 14px; 
Schriftstärke: fett; 
}
.nav Tabelle td.cur a 
{ 
Boxgröße: Rahmenbox; 
Rahmen unten: 2px durchgezogen #f07515; Farbe: #f07515; 
}

.Liste 
{ 
Rand oben: 60px; 
}

Dynamisch begrenzte Breite

Der obige CSS-Code setzt die Tabelle auf 720 Pixel, was einer Breite von 9 tds entspricht. Normalerweise ist die Anzahl der Menüs festgelegt, also legen wir sie einfach so fest. Wenn sie jedoch nicht festgelegt ist, können wir das Programm verwenden, um sie dynamisch festzulegen, beispielsweise die JavaScript-Einstellungsmethode:

$(".header table").Breite($(".header table td").Länge * $(".header table td").Breite());

Wenn der nächste Menüpunkt ausgewählt wird, wird der nächste Menüpunkt angezeigt

Wenn Sie bei Nicht-Ajax-Seiten auf die dahinterliegende Menüseite klicken, wird die Seite aktualisiert und zeigt dann die Menüelemente ganz links an. Wir können JavaScript verwenden, um die Menüelemente zu scrollen, sodass das aktuell ausgewählte Element angezeigt wird. Der Beispielcode lautet wie folgt:

Variablenanzahl = 0;
$(".header table td").jeweils(function () {
	wenn ($(this).hasClass("cur")) {
		gibt false zurück;
	}
	zählen++;
});
if (Anzahl >= 3) { // Nicht scrollen, wenn die ersten ausgewählt sind Anzahl -= 2; // Kein Scrollen nach ganz links nötig $(".header").get(0).scrollLeft = Anzahl * $(".header table td").width();
}

Zusammenfassen

Dies ist das Ende dieses Artikels zum Erstellen einer festen Navigation und einer nach links und rechts verschiebbaren Bildlaufleiste mit CSS. Weitere relevante Inhalte zur CSS-Navigation mit festen nach links und rechts verschiebbaren Bildlaufleisten finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!