ブートストラップでサイド ナビゲーション バーのスタイルをカスタマイズする方法についての簡単な説明

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

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

• サイド スライド バーの位置を固定

• ブートストラップを使用する応答性は、さまざまな画面に適応するために、ツール クラスvisible-sm、visible-xs hidden-xs hidden-smなどを使用します。

• 横スライド バーの横スライド効果は次のとおりです。 jquery メソッドを使用して実装されていません。p の移動には css3 変換属性が使用され、サイド スライド アニメーション効果には css 属性transition

• 欠点: 2 セットのメニューを使用します。 PC 画面に表示されるメニューと、携帯端末に表示される携帯電話のナビゲーション メニューの 2 つのセットです。この欠点は比較的明らかです。無関係なタグが生成されます。利点は、コードが少なく、シンプルで受け入れやすいです。

#[関連する推奨事項: 「

ブートストラップ チュートリアル ]」

##レンダリング

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

    <!--手机导航栏-->
    <p>
        </p>

            
• 首页
            
• Java
            
• SVN
            
• iOS
        

              

        

            

                菜鸟教程             

            

                

                    
• iOS
                    
• SVN
                    
• Java
                

                          

         

                                   

ナビゲーション バーのレイアウトでは、PC 用と携帯電話用の 2 つのナビゲーション メニューが使用され、ブートストラップ応答ツール クラスが表示されます。 PC上での非表示切り替えを実現する-xsvisible-sm. button;visible-lg Visual-mdはPC上でのナビゲーションバーの表示を実現します;visible-xsvisible-smは携帯電話上でのモバイルナビゲーションバーの表示を実現します。 ブートストラップ応答性ツール クラスの詳細については、https://www.runoob.com/bootstrap/bootstrap-sensitive-utilities.html

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:rotate p, support 要素が 2D または 3D で回転される場合、属性値 translationX (X) は、属性の遷移アニメーションを設定するために、transition 属性を使用して Xpx によって移動する距離です。構文

transition: プロパティ期間タイミング関数遅延;

http://www.w3school.com.cn/cssref/pr_transition.asp


クリック イベント スイッチ横スライド

        $("#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 つ使用することはお勧めできません。欠点は明らかです。効果を得るには以上です。気にしないでください。実際、これはメニュー ナビゲーション バーでも実現できます。メディアを試してみると実現できます。

##コードのダウンロード: http://download.csdn.net/detail/kebi007/9909725

##元のアドレス: http://blog.csdn.net /kebi007/article/details/76038251

著者: Zhang Lin

プログラミング関連の知識については、

プログラミング コース

をご覧ください。 ！

以上がブートストラップでサイド ナビゲーション バーのスタイルをカスタマイズする方法についての簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。