In diesem Artikel wird die CSS3 + Js-Methode zum Implementieren einer reaktionsfähigen Navigationsleiste vorgestellt.
Heute habe ich eine reaktionsfähige Navigationsleiste erstellt, die die Navigationsleiste automatisch an unterschiedliche Bildschirmauflösungen oder Browserfenstergrößen anpassen kann Was hier verwendet wird, ist CSS3 Media Query. Weitere Informationen finden Sie im Artikel „Ein kurzer Vortrag zum Thema Responsive Layout“. Ich werde hier nicht viel Platz darauf verwenden, es vorzustellen, sondern mich hauptsächlich mit der Erstellung dieser Navigationsleiste befassen.
Eine weitere Sache, die erwähnt werden muss, ist, dass ie6-ie8 keine CSS3-Medienabfrage unterstützt. Daher benötigen wir eine Sonderbehandlung für ie6-ie8 und lassen sie den Standardstil beibehalten, der sowohl für das Layout als auch für den Stil wichtig ist in Betracht ziehen.
Sehen Sie sich zunächst das Layout an:
Kopieren Sie den Code Der Code lautet wie folgt :
<p class="navBar">
<p class="nav">
<ul id="menu">
<li class="current"><a href="#">首页</a></li>
<li><a href="#">电影</a></li>
<li><a href="#">电视剧</a></li>
<li><a href="#">动漫</a></li>
<li><a href="#">综艺</a></li>
<li><a href="#">纪录片</a></li>
<li><a href="#">公开课</a></li>
</ul>
<p class="hot">
<a href="#">钢铁侠3</a>
<a href="#">中国合伙人</a>
<a href="#">盛夏晚晴天</a>
<a href="#">陆贞传奇</a>
</p>
<!--判断浏览器是否是IE9,IE10或者是非IE浏览器-->
<!--[if (gt IE 8) | !(IE)]><!-->
<h1 class="title" id="title">
<a href="#">风驰网</a>
<span class="btn" id="btn"></span>
</h1>
<!--<![endif]-->
</p>
</p>Der HTML-Teil benötigt auch einen bedingten Kommentar. Wenn der Browser ie6-8 ist, hängen Sie eine Klasse „ie6-8“ an das HTML-Tag an, was die Verarbeitung im Stylesheet erleichtert:
Code kopieren Der Code lautet wie folgt:
<!DOCTYPE html> <!--[if lt IE 9]><html class="ie6-8"><![endif]--> <html> ...
Das Folgende ist die Stilsteuerung. Verarbeiten Sie zuerst den Gesamtstil und ie6 -ie8
Code kopieren Der Code lautet wie folgt:
* {margin: 0; padding: 0;}
body {font: 14px/22px "宋体", arial, serif;}
.navBar {margin-top: 80px; width: 100%; height: 38px; background: #333;}
.nav {margin: 0 auto; border: 0px solid #ccc;}
.nav ul {list-style: none; width: auto;}
.nav ul li {height: 38px; text-align: center;}
.nav ul li a {display: block; font-size: 16px; color: #fff; text-decoration: none; line-height: 39px;}
.ie6-8 .nav {width: 1000px; height: 38px;}
.ie6-8 .nav ul li {float: left;}
.ie6-8 .nav ul li a {padding: 0 30px 0 30px;}
.ie6-8 .nav ul li.current {background: #f60;}
.ie6-8 .nav ul li:hover a {color: #f60;}
.ie6-8 .nav ul li a:hover {_color: #f60;}/*IE6 Hack*/
.ie6-8 .nav ul li.current:hover a {color: #fff;}
.ie6-8 .nav .hot {float: left; margin-left: 20px; padding-top: 8px;}
.ie6-8 .nav .hot a {padding: 0 5px 0 5px; font-size: 12px; color: #fff; text-decoration: none;}
.ie6-8 .nav .hot a:hover {color: #f60; text-decoration: underline;}
.ie6-8 .nav .title {display: none;}OK, unten wird die Medienabfrage verwendet.
Wenn die Bildschirmbreite größer als 1000 Pixel ist:
Kopieren Sie den Code Der Code lautet wie folgt:
@media screen and (min-width: 1000px) {
.nav {width: 1000px; height: 38px;}
.nav ul li {float: left; width: auto;}
.nav ul li a {padding: 0 30px 0 30px;}
.nav ul li.current {background: #f60;}
.nav ul li:hover a {color: #f60;}
.nav ul li.current:hover a {color: #fff;}
.nav .hot {margin-left: 20px; padding-top: 8px;}
.nav .hot a {padding: 0 5px 0 5px; font-size: 12px; color: #fff; text-decoration: none;}
.nav .hot a:hover {color: #f60; text-decoration: underline;}
.nav .title {display: none;}
}Wenn der Bildschirm Wenn die Breite zwischen 640px und 1000px liegt:
Kopieren Sie den Code Der Code lautet wie folgt:
@media screen and (min-width: 640px) and (max-width: 1000px) {
.nav {width: auto; height: 38px;}
.nav ul li {float: left; width: 14%; min-width: 50px;}
.nav ul li.current {background: #f60;}
.nav ul li:hover a {color: #f60;}
.nav ul li.current:hover a {color: #fff;}
.nav .hot {display:none;}
.nav .title {display: none;}
}Wenn die Bildschirmbreite weniger als 640 Pixel beträgt:
Code kopieren Der Code lautet wie folgt:
@media screen and (max-width: 640px) {
.navBar {margin-top: 0; height: auto; background: #444;}
.nav {width: auto; height: auto;}
.nav ul li {margin-top: 1px; width: 100%; min-width: 100px;background: #333;}
.nav ul li a:active {background: #f60;}
.nav .hot {display:none;}
.nav .title {position: relative; width: 100%; height: 38px; border-top: 1px solid #444; background: #333; text-align: center; font:normal 20px/35px "Microsoft YaHei", arial, serif; letter-spacing: 2px;}
.nav .title a {color: #f60; text-decoration: none;}
.nav .title .btn {position: absolute; right: 10px; top: 0; width: 34px; height: 34px; padding: 2px; background: url(btn.png) center center no-repeat; cursor: pointer;}
}ok, die Layout- und Stilkontrolle ist abgeschlossen und der Effekt ist da. Die Effekte in 3 verschiedenen Zuständen sind wie folgt:
| ||
 |
Aber für das dritte Bild möchten wir auch, dass das Menü eingefahren werden kann, wenn man auf das Symbol in der unteren rechten Ecke klickt. Dies kann mit js erreicht werden. Klicken Sie auf das Bildmenü, um es zu erweitern. Wenn sich das Menü im erweiterten Zustand befindet, klicken Sie auf das Symbolmenü, um es zu reduzieren. Außerdem sind Animationseffekte erforderlich. Okay, werfen wir einen Blick auf js, aber ich werde nicht auf Details zu js eingehen. Lassen Sie uns den Kerncode veröffentlichen:
Dieser Teil des Codes wird zum Erzeugen von Animationseffekten verwendet:
Code kopieren Der Code lautet wie folgt:
var move = function (obj, target) {
var timer;
clearInterval(timer);
timer = setInterval(function () {
var speed = (target - obj.offsetTop)/3;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (Math.abs(obj.offsetTop - target) < 4) {
clearInterval(timer);
obj.style.marginTop = target + "px";
} else {
obj.style.marginTop = obj.offsetTop + speed + "px";
}
}, 30);
}Das obige ist der detaillierte Inhalt vonCSS3+Js-Implementierung der responsiven Navigationsleistenmethode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Muster für praktische CSS -benutzerdefinierte Eigenschaften verwendenApr 15, 2025 am 10:34 AMI ' Ich habe mit CSS -benutzerdefinierten Eigenschaften herumgespielt, um ihre Kraft zu entdecken, da die Browser -Unterstützung endlich an einem Ort liegt, an dem wir sie in unserem verwenden können
Jamstack -Tools und das Spektrum der KlassifizierungApr 15, 2025 am 10:31 AMDa die wundervolle Welt von Jamstack groß wird, sind alle Kategorien von Diensten und Tools, die ihm helfen, so wichtig wie immer. Es gibt eine statische Stelle
Ein Business Case, um den Internet Explorer abzulegenApr 15, 2025 am 10:30 AMDer Abstand zwischen Internet Explorer (dh) 11 und jedem anderen großen Browser ist eine zunehmend klaffende Kluft. Unterstützung für eine technologisch veraltete Unterstützung hinzufügen
Animierte Position des FokusringsApr 15, 2025 am 10:27 AMMaurice Mahan erstellte FocusOverlay, eine "Bibliothek zum Erstellen von Überlagerungen auf fokussierten Elementen". Diese Beschreibung ist ein wenig verwirrend darüber, dass Sie keine Bibliothek benötigen.
Lassen Sie die Containeranfragen nicht vergessenApr 15, 2025 am 10:25 AMContainerabfragen stehen immer ganz oben auf der Liste der angeforderten Verbesserungen an CSS. Das allgemeine Gefühl ist, dass wir, wenn wir Container -Abfragen hätten, nicht#039; T.
Workflow -Überlegungen zur Verwendung eines BildverwaltungsdienstesApr 15, 2025 am 10:20 AMEs gibt all diese Websites, die Ihnen bei Ihren Bildern helfen möchten. Sie tun Dinge wie die Optimierung Ihrer Bilder und helfen Ihnen dabei, sie performant zu dienen. Das ist eine sehr gute Sache. Nach jeder Metrik sind Bilder ein großes Stück der Ressourcen auf
Graben in die Vorschau -Ladeanimation in WordPressApr 15, 2025 am 10:19 AMWordPress hat den Block -Editor (auch bekannt als Gutenberg) in Version 5.0 verschickt. Damit kam ein schicker neuer Post -Vorschau -Bildschirm, der die WordPress -Logo -Zeichnung anzeigt
WordPress -Plugin -Überladung? Probieren Sie Jetpack aus!Apr 15, 2025 am 10:18 AMDas WordPress -Ökosystem verfügt über eine reichliche Versorgung mit Plugins, die alles von AMP bis Zapier -Integration und so, so viele andere Dinge dazwischen bieten.
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
VSCode Windows 64-Bit-Download
Ein kostenloser und leistungsstarker IDE-Editor von Microsoft
EditPlus chinesische Crack-Version
Geringe Größe, Syntaxhervorhebung, unterstützt keine Code-Eingabeaufforderungsfunktion
SublimeText3 Linux neue Version
SublimeText3 Linux neueste Version
Dreamweaver CS6
Visuelle Webentwicklungstools
DVWA
Damn Vulnerable Web App (DVWA) ist eine PHP/MySQL-Webanwendung, die sehr anfällig ist. Seine Hauptziele bestehen darin, Sicherheitsexperten dabei zu helfen, ihre Fähigkeiten und Tools in einem rechtlichen Umfeld zu testen, Webentwicklern dabei zu helfen, den Prozess der Sicherung von Webanwendungen besser zu verstehen, und Lehrern/Schülern dabei zu helfen, in einer Unterrichtsumgebung Webanwendungen zu lehren/lernen Sicherheit. Das Ziel von DVWA besteht darin, einige der häufigsten Web-Schwachstellen über eine einfache und unkomplizierte Benutzeroberfläche mit unterschiedlichen Schwierigkeitsgraden zu üben. Bitte beachten Sie, dass diese Software
