web-dev-qa-db-ja.com

Bootstrap折りたたまれたメニューは展開時にコンテンツを押し下げない

Twitter Bootstrap=を使用して、Webサイトのレスポンシブな側面をいじくり回します。押し下げます。

この例を使用してナビゲーションを作成しました。

http://getbootstrap.com/examples/navbar-fixed-top/

例を見ると、コンテンツをプッシュダウンすることもありません。

私は体にパディングを使用するためにこれに対するいくつかの答えを見ましたが、これは私のために機能しませんでした。また、いくつかの要素にオーバーフローを試みましたが、違いはありませんでした。

ナビゲーションのコードは次のとおりです。

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

        <h1 class="logo-title">
            <a href="index.html"><span>Logo</span></a>
        </h1>

      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="index.html">item1</a></li>
          <li><a href="#">item2</a></li>
          <li><a href="#">item3</a></li>
          <li><a href="#">item4</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>

私はレスポンシブデザインを初めて使用し、折りたたまれたメニューがコンテンツを押し下げている多くのWebサイトを見てきました。このようなメニューを折りたたむのは良い習慣ですか、それとも純粋な好みのものですか？

私の主な質問は、折りたたみメニューがアクティブなときにコンテンツをプッシュする方法です。

助けてくれてありがとう。

csstwitter-bootstrapnavigationresponsive-design
19
thairish

知りません。これはうまくいくようです...（ハッキングのようなものです）。

.navbar-fixed-top {
  top: -70px; /* you'll have to figure out the exact number here */
}

.navbar-fixed-top, .navbar-fixed-bottom {
  position: relative; /* this can also be static */
}
7
Bruno

fixed navbarを使用している場合、メニューを展開してもコンテンツはプッシュダウンされません。そのためには、staticヘッダー自体を使用する必要があります。参照として指定したbootstrap=リンク例を確認してください。

<nav class="navbar navbar-light bg-light navbar-expand-lg static-top">
10
James

それを行うには多くの方法があります。

1つは、.containerまたはナビゲーションの下でコンテンツをラップする要素でクラスを切り替えることです。

例えば：

.container {
  transition: padding 500;
}

.container-is-open {
  padding-top:200px;
}
2
mbrrw

パート1：移動したいすべての要素をラップしました

var icon = document.getElementsByClassName("icon-bars");
var pushDown = document.getElementById("Push");

$(document).ready(function(){
  $(icon[0]).click(function(){
    if($(pushDown).hasClass("Push")){
      pushDown.className = "pushUp";
    }
    else{
      pushDown.className = "Push";
    }
  })
});
form {
  max-width: 500px;
  margin: 0px auto;
  text-align: center;
}

input, textarea {
  border: 3px solid #f47909;
  padding-bottom: 10px;
}

input:focus, textarea:focus {
  outline: none;
  border: 3px solid #f2a25a;
}

label {
  display: block;
  margin-bottom: 20px;
}

span {
  display: block;
}

textarea {
  max-height: 200px;
  height: 200px;
  width: 300px;
  max-width: 300px;
}


/*rest same as index.css*/

*{
  font-family: 'futura';
}

.navvy {
  border-radius: 0px;
  margin: 0px;
  height: 70px;
  padding-top: 5px;
}

@media screen and (min-width: 768px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
    }
    li{
      padding-right: 30px;
      font-size: 19px;
    }
}

@media screen and (max-width: 767px) {
    .navbar-collapse {
      margin-top: 15px;
      background-color: #FAFAFA;
    }
    li {
      font-size: 17px;
    }
}

.icon-bar {
  background-color: #337ab7;
}

.icon-bar-light {
  background-color: #23527C;
}

#li-back:hover {
  background-color: #FAFAFA;
  font-size: 20px;
  font-weight: bolder;
}

.navbar-brand {
  font-size: 25px;
  color: #1d78c6;
}

#footer {
  margin-top: 50px;
  padding-top: 30px;
  border-top: 2px dotted #8bc771;
  text-align: center;
}

#description {
  margin-top: 20px;
  text-align: center;
  font-size: 30px;
}

.Push{
  transition: transform 0.5s;
  transform: translate(0px, 160px);
}

.pushUp{
  transition: transform 0.5s;
  transform: translate(0px, 0px);
}
<!doctype html>
<html lang="en">
<head>
    <title>VirusFun</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <link href="https://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet">

    <link rel="stylesheet" href="/css/contacts.css" type="text/css">

</head>
<body>
  <div class="introPic">

  </div>
  <nav class="navbar navbar-default navbar-static-top navvy">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed icon-bars" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="index.html">Virus Fun</a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse text-center" id="bs-example-navbar-collapse-1" role="navigation">
        <ul class="nav navbar-nav">
          <li><a id="li-back" href="index.html">Home</a></li>
          <li><a id="li-back" href="gallery.html">Gallery</a></li>
          <li><a id="li-back" href="#">About</a></li>
          <li><a id="li-back" href="contacts.html">Contacts</a></li>
          </li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>

  <div id="Push" class="">
    <!--The blurb -->
    <p id="description">Ask whatever you want!</p>

    <!-- The body -->
    <div class="container-fluid">
      <form action="https://formspree.io/[email protected]"
        method="POST">

        <div class="row">
          <div class="col-sm-6 col-xs-6">
            <label id="name">
              <span>Your Name</span>
              <input tabindex="1" placeholder="John Smith" type="text" name="name">
            </label>
          </div>
          <div class="col-sm-6 col-xs-6">
            <label id="email">
              <span>Your Email</span>
              <input tabindex="2" placeholder="[email protected]" type="email" name="Sender">
            </label>
          </div>
        </div>

        <label>
          <span>Your Message</span>
            <textarea tabindex="3" name="message"></textarea>
        </label>
        <div class="send">
            <input tabindex="4" type="submit" value="Send">
        </div>
      </form>
    </div>
    <footer id="footer">
        <p>© 2017 VIRUS FUN ALL RIGHTS RESERVED</p>
    </footer>
  </div>

    <!--need this code to be declared before javascript-->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <script src="/javascript/javascript.js"></script>

    <script src="jquery/jquery-3.1.1.min.js"></script>

</body>
</html>

次にdivを使用してidを指定し、後でjavascriptを使用してidで要素を取得します。その後、同じdivに空のクラスを作成します

パート2：CSSに移動して、トランジションを追加します。私がここにソースコードを持っていることがわからなくても心配しないでください--->

.Push{
    transition: transform 0.5s;
    transform: translate(0px, 160px);
}

このクラスはまだidのdivにありませんが、javascriptはすぐにこれを処理します。ヒント：要素が元の位置に戻る方法に興味がある場合は、元に戻るタイミングに別のトランジションを追加します--->

.pushUp{
  transition: transform 0.5s;
  transform: translate(0px, 0px);
}

翻訳の測定値は、Twitter bootstrap内部に4つの要素があるメニューを折りたたみます。

パート3：javascript！折りたたみメニューのボタンを見つけます。このように見えるはずです->

<button type="button" class="navbar-toggle collapsed icon-bars" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">'

ご覧のとおり、getbootstrap.comの例とは何かが異なります。アイコンバークラスを追加しました。これは私がそれを見つけることができるように->

var icon = document.getElementsByClassName("icon-bars");

また、プッシュダウンする必要がある要素をラップするdivを見つける必要があります。

var pushDown = document.getElementById("Push");

これがジューシーな部分です！

Jqueryでそれを行う方法を紹介します。ここにコードがあり、説明は下部にあります--->

$(document).ready(function(){
  $(icon[0]).click(function(){
    if($(pushDown).hasClass("Push")){
      pushDown.className = "pushUp";
    }
    else{
      pushDown.className = "Push";
    }
  })
});

説明：-まず、これがjqueryであることを宣言します。

-次に、アイコンリストの最初の要素にクリックのイベントハンドラーを追加して、トグル折りたたみボタンがクリックされたかどうかを確認します。アイコンバークラスを1つだけ作成したため、リストの最初の要素は常にターゲットにしたものになります。

-次に、クラスが条件ステートメントに一致するかどうかに応じて、要素を上下にスライドさせる必要があるかどうかを確認します。 hasClass funcを試したことがない場合でも、ロジックを説明する必要はありません。

それでおしまい。

バット.......まだ良くない。トグルボタンをダブルクリックしても、折りたたみメニューの遷移がまだ完了していないため、プッシュ遷移が元に戻り、順序が逆になるバグがあります。ここで試してみてください。いくつかの助けがあることを願っています。

追伸スニペットのすべてのスタイリングを無視する

-Jack初心者フロントエンドWeb開発者

2
AwesomeJackify

navbar-fixed-top。

これにより、アコーディオンのプッシュダウンネイティブプロパティが防止されます。独自のjavascriptまたはcssでマッサージする必要があります。

1
Callat

また、navbarの下に空白が作成されないように、navbarの後の最初の「div」に次の行を追加します。例：jumborton

.jumbotron {
    margin-top: -20px;
}
1
mn128b

私の場合、これはこれを変えて働いた

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

このため

<!-- Update using navbar-static-top -->
<nav class="navbar navbar-default navbar-static-top" role="navigation">

これから私のCSSを編集します：

.wrapper {
    min-height: 100%;
    height: auto !important;
    margin: 0 auto -30px;
    padding: 70px 0 30px 0px;
}

これに：

.wrapper {
    min-height: 100%;
    height: auto !important;
    margin: 0 auto -30px;
    padding: 0 0 30px 0px;   /* new padding */
}
1
Jorge Casariego

data-targetの1つの "id"に言及し、折りたたみnavbarコードを持つ "div"にその "id"を追加します。以下のように：

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <h1 class="logo-title">
                <a href="index.html"><span>Logo</span></a>
            </h1>
          </div>
          <div class="collapse navbar-collapse" id="navbar">
            <ul class="nav navbar-nav">
              <li class="active"><a href="index.html">item1</a></li>
              <li><a href="#">item2</a></li>
              <li><a href="#">item3</a></li>
              <li><a href="#">item4</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>

このdata-targetは特定の「id」を呼び出し、そのベースでnavbarが切り替わります。

0
Khyati Agola Chandak

この作品!!

同じ問題があり、ここでのすべての答えは、あなたが探しているものではない静的なナビゲーションバーに戻ります。

ナビゲーションバーの後、コンテンツの開始前に、空のdivタグ（高さ）をスローします。この空のdivはコンテンツを押し下げ、ナビゲーションバーの後ろに隠れたままになります。 javascript/jqueryを使用して、2つのモバイル幅のdivを切り替えます。

HTML

</nav>
<div class="container main">
<div id="pushContent"></div>

CSS

@media (max-width: 767px) {
    #pushContent {
    height: 222.5px;
    width:100%;
    display: none;
    }
}

@media (max-width: 480px) {
    #pushContent {
    height: 222.5px;
    width:100%;
    display: none;
    }
}

Javascript/jquery

$('.navbar-toggle').on("click", function(){
    $('#pushContent').slideToggle();
});
0
MattyIce