bootstrap3のoffcanvasについて質問です。タブレットでも常時メニューが出てくるのではなく、ボタンを押したときのみメニューが出るようにするにはどうすれば良いでしょうか?(PCでは常時表示にしたいと考えています。)

ボタンの表示は、ボタンにvisible-smを追加すれば良いだけでしたが、肝心のメニュー表示切り替えがうまくいかず悩んでいます。
なおタブレットの定義は、横解像度を768px以上992px未満の機器とします。
宜しくお願いいたします。

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2015/07/25 13:10:46
  • 終了:2015/08/01 13:15:04

回答(0件)

回答はまだありません

  • id:a-kuma3
    この質問って、スマホの場合(横幅が 768px 以下)と同じ動作をタブレットでもやりたい、ということですよね。

    bootstrap3 のソースをちょっと読んでみました。
    あのメニューを表示するハンバーガーアイコンのあたりは navbar-* というクラス名がついてます。
    ひとつのボタンや要素だけを見せる・見せないといった単純な話では済まなくて、たくさんの要素が絡んでいます。
    それらのスタイルを @media で幅を見て切り替えています。

    例えば、ハンバーガーアイコンがスマホだと表示されるのは、bootstrap 3.3.5 の圧縮してない bootstrap.css の 4366行目あたりにある以下の記述です。
    >|css|
    @media (min-width: 768px) {
    .navbar-toggle {
    display: none;
    }
    }
    ||<
    こういった所が山のように(と言っても、両手両足の指の本数くらいかな)あって、
    navbar-* なクラスを囲んでいる @media (min-width: 768px) の 768px を
    992px に書き換えていけば、期待するような動作になるんじゃないかと思います。


  • id:halohalolin
    a-kuma3さん、わざわざbootstrapのコードまで読んでいただいてありがとうございます。
    また今度検討してみます。

    offcanvas.js と offcanvas.css を読んでわからないと悩んでいたのですが、bootstrap.cssを改造する方法は発想にありませんでした。
  • id:a-kuma3
    Bootstrap3 のメニュー周りの質問が別に出てて、ちょうど似たような辺りの話だったので、ついでです :-)

    offcanvas.css の方が後に読み込まれているので、bootstrap3.css の該当箇所をコピって min-width を書き直したものを追記していく、という方法でも対応できそうな気はします。
    でも、かなりの量をコピらなきゃいけないので、bootstrap3.css をいじってなくても、そのバージョンアップについていくのは結構大変かな、と思います。
    だったら bootstrap3.css の方をいじった方が、まだ修正量が少ないかなあ、と。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません