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

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

青灯夜游

リリース： 2021-07-01 11:20:14

転載

3362 人が閲覧しました

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

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

ナビゲーションバーのレイアウトでは、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