Heim > Artikel > Web-Frontend > CSS3+Js implementiert eine responsive Navigationsleiste

CSS3+Js implementiert eine responsive Navigationsleiste

高洛峰Original: 2017-02-09 11:56:421197Durchsuche

Heute habe ich eine responsive Navigationsleiste erstellt, die den Stil der Navigationsleiste bei unterschiedlichen Bildschirmauflösungen oder Browserfenstergrößen automatisch ändern kann. Hier wird hauptsächlich CSS3 Media Query verwendet. 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:

<div class="navBar">
    <div 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]-->
    </div>
</div>

Der HTML-Teil enthält auch einen bedingten Kommentar. Wenn der Browser ie6-8 ist, mounten Sie die HTML-Tag-Klasse „ie6-8“, was die Verarbeitung im Stylesheet erleichtert:

<!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

* {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 , Im Folgenden wird die Medienabfrage verwendet.

Wenn die Bildschirmbreite größer als 1000 Pixel ist:

@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 die Bildschirmbreite zwischen 640 Pixel und 1000 Pixel liegt:

@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 kleiner ist als 640px:

@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 implementiert eine responsive Navigationsleiste

Aber für das dritte Bild wollen wir auch einen Effekt, das heißt, das Menü lässt sich versenken, wenn man auf das Icon unten rechts klickt, Wie macht man also dieses Wolltuch? 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:

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);

}

Weitere Artikel zur responsiven Navigationsleiste von CSS3 J finden Sie auf der chinesischen PHP-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：Gründe und Lösungen für das Scheitern von Firefox Margin-TopNächster Artikel：Gründe und Lösungen für das Scheitern von Firefox Margin-Top

In Verbindung stehende Artikel

Mehr sehen