ブートストラップサイドナビゲーションバーの実装方法（コード）

この記事の内容はブートストラップサイドナビゲーションバーの実装方法(コード)についてです。必要な方は参考にしていただければ幸いです。

はじめに

ブートストラップに付属のレスポンシブナビゲーションバーは下にスライドする場合がありますが、AndroidのdrawerLayoutに似た横スライドメニューを作成する必要があります。カスタム横スライドメニューは、多くの公式 Web サイトの横スライドを指します。実装方法は異なり、利点と欠点も非常に明白です。一部の公式 Web サイトのホームページでは、横スライド効果を実現するために使用されます。 owl.carousel スライディング スクリーン プラグインは、個人的にはモグラ塚から山を作っているような気がします。このブートストラップのサイド スライド メニューのより専門的な名前は、モバイル ナビゲーション バーと呼ばれます。また、ブートストラップの特性により一致するこの名前も比較します。そこで、この記事では初心者でも受け入れやすい簡単な方法を紹介します。

ブートストラップサイドナビゲーションバーの実装原則

1. サイドスライドバーは固定位置を使用します

2. ブートストラップ応答ツールクラスvisible-smvisible-xshidden-xshidden-smを使用して、さまざまな画面に適応します

3. サイドスライドバーのサイドスライドエフェクトは、jqueryメソッドを使用しません。pを移動するためにcss3のtransforms属性を使用します。サイドスライドアニメーションエフェクトは、css属性のtransitionを使用します

4. 欠点: 2セットのメニューを使用します。 1 つは PC 画面に表示されるメニューで、もう 1 つはモバイル端末に表示されるモバイル ナビゲーション メニューです。利点は、コードが少なく、シンプルで受け入れやすいことです。

   ブートストラップ ナビゲーション バーのレイアウト

    <!--手机导航栏-->
    <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>

ナビゲーション バーのレイアウトでは、PC 用と携帯電話用の 2 つのナビゲーション メニューが使用され、ブートストラップの応答性を使用し、PC のトグル ボタンを非表示にするツール クラスvisible-xsvisible-smを使用します。 ;visible-lgvisible-mdはPC側のナビゲーションバーの表示を実現し、visible-xsvisible-smは携帯電話側のナビゲーションバーの表示を実現します。

CSS は、レイアウトとサイドスライド効果を実装します (CSS3 の重要な属性である、サイドスライドの変換とトランジション)

コードはそれほど多くなく、わずか 10 行です

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

CSS3 には 2 つのプロパティがあることは注目に値します:

transform:回転 div、要素の 2D または 3D 回転をサポートします。属性値 translationX (X) は、関数遅延で Xpx によって移動される距離です。

サイドスライドを切り替えるためのクリックイベント

        $("#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)
            }
        })

概要
の使用は推奨されません。 2 つのメニュー ナビゲーション バーがあることは明らかですが、実際には 1 つのメニュー ナビゲーション バーでも実現できます。

関連する推奨事項:

Bootstrap を使用して折りたたみ可能なサイド ナビゲーションを実装する方法

以上がブートストラップサイドナビゲーションバーの実装方法（コード）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。