CSS3 Js implémente la méthode de la barre de navigation réactive-tutoriel CSS-php.cn

CSS3 Js implémente la méthode de la barre de navigation réactive

高洛峰

Libérer： 2017-03-10 10:08:06

original

1618 Les gens l'ont consulté

Cet article présente la méthode CSS3 Js pour implémenter une barre de navigation réactive

Aujourd'hui, j'ai créé une barre de navigation réactive qui peut automatiquement changer le style de la barre de navigation avec différentes résolutions d'écran ou tailles de fenêtre de navigateur, la. la principale chose utilisée ici est CSS3 Media Query. Pour plus de détails, vous pouvez consulter l'article A Brief Talk on Responsive Layout. Je ne passerai pas beaucoup d'espace à le présenter ici, je regarde principalement comment créer cette barre de navigation.

Une autre chose à mentionner est que ie6-ie8 ne prend pas en charge CSS3 Media Query, nous avons donc besoin d'un traitement spécial pour ie6-ie8 et les laissons conserver le style par défaut, ce qui est à la fois important pour la mise en page et le style. Prenez ceci. en considération.

Jetez d'abord un œil à la mise en page. Le code html est le suivant :

Copiez le code Le code est le suivant. :

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

Copier après la connexion

La partie html a également besoin d'un commentaire conditionnel Lorsque le navigateur est ie6-8, montez une classe "ie6-8" sur la balise html, ce qui facilite le traitement dans la feuille de style :

Copier le code Le code est le suivant :

<!DOCTYPE html>
<!--[if lt IE 9]><html class="ie6-8"><![endif]-->
<html>
...

Copier après la connexion

Ce qui suit est le contrôle de style, traitez d'abord le style global et ie6 -ie8

Copier le code Le code est le suivant :

* {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;}

Copier après la connexion

ok, Media Query sera utilisé ci-dessous.

Lorsque la largeur de l'écran est supérieure à 1000px :

Copiez le code Le code est le suivant :

@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;}
}

Copier après la connexion

Lorsque l'écran Lorsque la largeur est comprise entre 640px et 1000px :

Copier le code Le code est le suivant :

@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;}
}

Copier après la connexion

Lorsque la largeur de l'écran est inférieure à 640px :

Copiez le code Le code est le suivant :

@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;}
}

Copier après la connexion

ok, le contrôle de la mise en page et du style est terminé, et l'effet est là, les effets dans 3 états différents sont les suivants :

CSS3 Js implémente la méthode de barre de navigation réactive

CSS3 Js实现响应式导航条方法

Mais pour la troisième image, nous voulons aussi un effet, c'est-à-dire que le menu peut être réduit en cliquant sur l'icône dans le coin inférieur droit, alors comment faire ? Cela peut être réalisé avec js. Lorsque le menu est à l'état réduit, cliquez sur le menu d'images pour le développer ; lorsque le menu est à l'état développé, cliquez sur le menu d'icônes pour le réduire, et il a également besoin d'effets d'animation. ok, jetons un oeil à js, mais je n'entrerai pas dans les détails sur js. Postons le code principal :

Cette partie du code est utilisée pour produire des effets d'animation :

Copier le code Le code est le suivant :

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

}

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!