web-dev-qa-db-fra.com

Bootstrap menu réduit ne poussant pas le contenu vers le bas une fois développé

J'utilise Twitter Bootstrap pour jouer avec le côté réactif d'un site Web. J'ai cependant un problème avec les plus petites largeurs où le menu réduit va sur le contenu de la page, plutôt que le pousser vers le bas.

J'ai utilisé cet exemple pour construire ma navigation:

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

En regardant l'exemple, cela ne fait pas non plus baisser le contenu.

J'ai vu quelques réponses à cela pour utiliser un rembourrage sur le corps, mais cela n'a pas fonctionné pour moi. J'ai également essayé de mettre un débordement sur certains éléments, mais cela n'a fait aucune différence.

Mon code pour la navigation est:

<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>

Je suis nouveau sur le Responsive Design et j'ai vu de nombreux sites Web avec le menu réduit réduire le contenu. Est-ce une bonne pratique d'avoir des menus réduits comme celui-ci ou est-ce une pure préférence?

Ma question principale est de savoir comment puis-je obtenir le contenu à pousser lorsque le menu réduit est actif?

Merci d'avance pour votre aide.

csstwitter-bootstrapnavigationresponsive-design
19
thairish

Je ne sais pas. Cela semble fonctionner ... (une sorte de hack cependant).

.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

Si vous utilisez une barre de navigation fixed, développer le menu ne fera pas baisser le contenu. Pour cela, vous devez utiliser l'en-tête static lui-même. Vérifiez le bootstrap exemple de lien que vous avez donné comme référence.

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

Il y a plusieurs façons de procéder.

L'une serait de basculer une classe sur .container ou tout élément enveloppant votre contenu sous la navigation.

Par exemple:

.container {
  transition: padding 500;
}

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

partie 1: ce que j'ai fait, c'est d'envelopper tous les éléments que vous voulez déplacer

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>

avec un div Puis donnez-lui un id dont nous obtiendrons les éléments par id plus tard avec javascript Après cela, faites une classe vide dans le même div

partie 2: Accédez à votre CSS et ajoutez une transition. Ne vous inquiétez pas, si vous ne savez pas que j'ai le code source ici --->

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

Bien que cette classe ne soit pas encore dans la div avec l'ID, javascript s'en chargera bientôt. astuce: si vous voulez avoir une idée de la façon dont les éléments reviendront à leur position d'origine, ajoutez une autre transition pour le moment où ils reviendront --->

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

Les mesures de traduction sont basées sur Twitter bootstrap menu réduit avec 4 éléments à l'intérieur.

partie 3: Le javascript! Recherchez le bouton du menu de réduction. Devrait ressembler à ceci ->

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

Comme vous pouvez le voir, quelque chose est différent de l'exemple getbootstrap.com. J'ai ajouté une classe de barres d'icônes. C'est pour que je puisse le trouver avec ->

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

Vous devrez également trouver le div qui enveloppe les éléments nécessaires pour être poussé vers le bas.

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

Maintenant, c'est la partie juteuse!

Je vais vous montrer comment le faire en jquery. Voici le code et l'explication est en bas --->

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

Explication: -D'abord, nous déclarons que c'est jquery.

-Puis je vais vérifier si le bouton de bascule à bascule est cliqué, en ajoutant le gestionnaire d'événements de clic au premier élément de la liste des icônes. Comme je n'ai créé qu'une seule classe de barres d'icônes, le premier élément de la liste sera toujours celui que je visais.

-Puis, je vais vérifier si je dois faire glisser les éléments vers le haut ou vers le bas selon que les classes correspondent aux instructions conditionnelles. Pas besoin de beaucoup d'explications sur la logique car c'est assez simple même si vous n'avez jamais essayé la fonction hasClass.

C'est ça.

Butt ....... Ce n'est pas encore bon. Il y a un bug où si vous double-cliquez sur le bouton bascule, la transition du menu de réduction n'est pas encore terminée, donc notre transition Push revient en inversant l'ordre. Essayez-le ici. J'espère qu'il y aura de l'aide.

ps. Ignorer tout le style de mon extrait

-Jack développeur web frontal débutant

2
AwesomeJackify

navbar-fixed-top.

Cela empêche la propriété native de refoulement de l'accordéon. Vous devez le masser avec votre propre javascript ou css.

1
Callat

Pour éviter également l'espace blanc créé sous la barre de navigation, ajoutez la ligne suivante au premier "div" après la barre de navigation, par exemple: jumborton

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

Dans mon cas, cela a fonctionné

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

pour ça

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

et éditer mon css à partir de ceci:

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

pour ça:

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

Mentionnez un "id" dans data-target et ajoutez cet "id" dans le "div" qui ont un code de barre de navigation réduit. Comme ci-dessous:

<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>

Cette data-target appelle un "id" particulier et sur la base de cela, votre barre de navigation bascule.

0
Khyati Agola Chandak

CELA MARCHE!!

Avait le même problème et toutes les réponses ici reviennent à une barre de navigation statique qui n'est pas ce que vous recherchez.

Jetez une balise vierge (avec la hauteur) après la barre de navigation mais avant le début de votre contenu. Cette div vide pousse le contenu vers le bas et reste caché derrière la barre de navigation. Utilisez javascript/jquery pour basculer sur le div pour les deux largeurs mobiles.

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