Heim > Artikel > Web-Frontend > CSS3+Js-Implementierung der responsiven Navigationsleistenmethode

CSS3+Js-Implementierung der responsiven Navigationsleistenmethode

高洛峰Original: 2017-03-10 10:08:061550Durchsuche

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:

CSS3+Js zum Implementieren einer responsiven Navigationsleistenmethode

CSS3+Js-Implementierung der responsiven Navigationsleistenmethode

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie CSS3, um Material Design-Effekte zu erzielenNächster Artikel：So verwenden Sie CSS3, um Material Design-Effekte zu erzielen

In Verbindung stehende Artikel

Mehr sehen