Méthode d'implémentation de la barre de navigation latérale Bootstrap (code)

Le contenu de cet article concerne la méthode d'implémentation (code) de la barre de navigation latérale bootstrap. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Avant-propos

La barre de navigation réactive fournie avec le bootstrap glisse vers le bas et parfois elle ne peut pas répondre aux besoins personnalisés, vous devez donc faire 1 Semblable au menu coulissant latéral d'Android DrawerLayout, il s'agit du menu coulissant latéral personnalisé bootstrap que je souhaite implémenter. Je me réfère au menu coulissant latéral de nombreux sites Web officiels. Les méthodes d'implémentation sont différentes, ainsi que les avantages et les inconvénients. sont également très évidents. Certaines pages d'accueil de sites officiels n'en implémentent qu'un. Pour l'effet de glissement latéral, j'ai utilisé le plug-in d'écran coulissant Owl.carousel, mais je pense personnellement que c'est exagéré. Le nom le plus professionnel de ce menu coulissant latéral bootstrap est appelé barre de navigation mobile. Je compare aussi ce nom, qui correspond davantage aux caractéristiques du bootstrap. Par conséquent, cet article présente une méthode plus simple et plus facile à accepter pour les novices.

Principe de mise en œuvre de la barre de navigation latérale Bootstrap

1. Positionnement de la barre coulissante latérale fixe

2. utiliser la réactivité de Bootstrap utilise la classe d'outils visible-sm visible-xs Hidden-Xs Hidden-sm, etc. pour s'adapter aux différents écrans

3. L'effet de glissement latéral de la barre coulissante latérale n'utilise pas le jquery L'attribut css3 transforms est utilisé pour déplacer p, et l'effet d'animation de glissement latéral utilise l'attribut css transition

4. Inconvénients : utilisez deux ensembles de menus, l'un est le menu affiché sur le Écran du PC, un ensemble est un menu de navigation du téléphone mobile affiché sur le terminal mobile. Ce défaut est relativement évident Il génère des balises non pertinentes et est simple et facile à accepter

Disposition de la barre de navigation bootstrap

    <!--手机导航栏-->
    <p id="mobile-menu" class="mobile-nav visible-xs visible-sm">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">Java</a></li>
            <li><a href="#">SVN</a></li>
            <li><a href="#">iOS</a></li>
        </ul>
    </p>
    <!--pc导航栏-->
    <nav class="navbar-inverse visible-lg visible-md" role="navigation">
        <p class="container">
            <p class="navbar-header">
                <a class="navbar-brand" href="#">菜鸟教程</a>
            </p>
            <p>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">iOS</a></li>
                    <li><a href="#">SVN</a></li>
                    <li><a href="#" class="dropdown-toggle" data-toggle="dropdown">Java</a></li>
                </ul>
            </p>
        </p>
    </nav>
    <!--手机导航栏侧滑-->
    <p class="nav-btn visible-xs visible-sm">
        <a href="#" class="mobile-nav-taggle" id="mobile-nav-taggle">
            <span class="glyphicon glyphicon-align-justify"></span>
        </a>
    </p>

La disposition d'une barre de navigation utilise deux menus de navigation, un pour PC et un pour téléphone mobile. Elle utilise la classe d'outils réactifs bootstrap visible-xs visible-sm pour masquer la bascule. bouton sur PC ; visible- lg visible-md réalise l'affichage de la barre de navigation sur le PC ; visible-xs visible-sm réalise l'affichage de la barre de navigation mobile sur le téléphone mobile.

css pour implémenter les effets de mise en page et de glissement latéral (transformation et transition des attributs CSS3 clés pour le glissement latéral)

Pas beaucoup de code, seulement 10 lignes

         * {margin:0;padding:0;}         
         #mobile-menu {position:fixed;top:0;left:0;
         width:220px;height:100%;
         background-color:#373737;z-index:9999;}         
         a:hover ,a:focus{text-decoration:none}
        .mobile-nav ul li a {color:gray;display:block;padding:1em 5%;    
        border-top:1px solid #4f4f4f;
        border-bottom:1px solid #292929;
        transition:all 0.2s ease-out;
        cursor:pointer;
        #mobile-menu {position:fixed;top:0;left:0;width:220px;height:100%;
        background-color:#373737;z-index:9999;transition:all 0.3s ease-in;}}        
        .mobile-nav ul li a:hover {background-color: #23A1F6;color: #ffffff;}        
        .show-nav {transform:translateX(0);}        
        .hide-nav {transform:translateX(-220px);} 
        /*侧滑关键*/
        .mobile-nav-taggle {height:35px;line-height:35px;
        width:35px;background-color:#23A1F6;color:#ffffff;
        display:inline-block;text-align:center;cursor:pointer}
        .nav.avbar-inverse{position:relative;}        
        .nav-btn {position:absolute;right:20px;top:20px;}

Obligatoire Il est à noter qu'il existe deux attributs de css3 :

transform : rotation div, prise en charge de la rotation 2D ou 3D des éléments, la valeur de l'attribut translateX (X) est la distance de déplacement de Xpx sur l'axe X
et l'effet d'animation du glissement latéral est Utilisez l'attribut de transition pour définir l'effet de l'animation de transition de l'attribut. Syntaxe
transition : délai de la fonction de synchronisation de la propriété

Cliquez sur l'événement pour basculer sur le glissement latéral ; 🎜>

Résumé

        $("#mobile-nav-taggle").click(function () {
            var mobileMenu = $("#mobile-menu");            
            if (mobileMenu.hasClass("show-nav")) {
                setTimeout(function () {
                    mobileMenu.addClass("hide-nav").removeClass("show-nav");
                }, 100)
            }            else {
                setTimeout(function (){
                    mobileMenu.addClass("show-nav").removeClass("hide-nav");
                }, 100)
            }
        })

Il n'est pas recommandé d'utiliser deux barres de navigation dans les menus. Les inconvénients sont évidents. C'est juste pour obtenir l'effet. En fait, cela peut aussi. être réalisé avec une seule barre de navigation de menu. Essayez les médias et cela peut être réalisé.

Recommandations associées :

Comment implémenter la navigation latérale pliable dans Bootstrap

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!