it-swarm.com.de

Bootstrap ausgeblendetes Menü, das den Inhalt beim Erweitern nicht nach unten drückt

Ich benutze Twitter Bootstrap um mit der reaktionsschnellen Seite einer Website herumzuspielen. Ich habe jedoch ein Problem mit den kleineren Breiten, bei denen das ausgeblendete Menü über den Inhalt der Seite geht, anstatt drück es runter.

Ich habe dieses Beispiel verwendet, um meine Navigation zu erstellen:

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

Betrachtet man das Beispiel, wird der Inhalt auch nicht nach unten verschoben.

Ich habe einige Antworten auf diese Frage für die Verwendung der Polsterung am Körper gesehen, aber das hat bei mir nicht funktioniert. Ich habe auch versucht, Überlauf auf einige Elemente zu setzen, aber es hat keinen Unterschied gemacht.

Mein Code für die Navigation ist:

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

Ich bin neu in Responsive Design und habe viele Websites gesehen, bei denen das reduzierte Menü den Inhalt nach unten drückt. Ist es eine gute Praxis, ausgeblendete Menüs wie diese zu haben, oder ist es eine reine Präferenzsache?

Meine Hauptfrage ist, wie ich den Inhalt übertragen kann, wenn das ausgeblendete Menü aktiv ist.

Vielen Dank im Voraus für die Hilfe.

19
thairish

Ich weiß es nicht. Dies scheint zu funktionieren ... (eine Art Hack).

.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

Wenn Sie eine fixed Navigationsleiste verwenden, wird der Inhalt durch Erweitern des Menüs nicht nach unten verschoben. Dazu müssen Sie den Header static selbst verwenden. Überprüfen Sie den Beispiellink bootstrap, den Sie als Referenz angegeben haben.

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

Es gibt viele Möglichkeiten, wie Sie das tun können.

Eine wäre, eine Klasse auf .container Umzuschalten, oder welches Element Ihren Inhalt unterhalb der Navigation einschließt.

Beispielsweise:

.container {
  transition: padding 500;
}

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

teil 1: Was ich getan habe, war, alle Elemente, die Sie verschieben möchten, zu verpacken

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>

with a div Dann gib ihm eine ID, die wir später mit Javascript erhalten. Danach mache eine leere Klasse in der gleichen Div

teil 2: Gehen Sie zu Ihrem CSS und fügen Sie einen Übergang hinzu. Keine Sorge, wenn Sie nicht wissen, dass ich den Quellcode hier habe --->

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

Obwohl diese Klasse noch nicht mit der ID in der Div ist, wird Javascript dies bald behandeln. tipp: Wenn Sie wissen möchten, wie die Elemente zur ursprünglichen Position zurückkehren, fügen Sie eine weitere Überblendung hinzu, damit diese wieder angezeigt wird --->

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

Die Umrechnungsmaße basieren auf Twitter bootstrap Menü mit 4 Elementen einklappen.

teil 3: Das Javascript! Suchen Sie die Schaltfläche für das Ausblendmenü. Sollte so aussehen ->

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

Wie Sie sehen, unterscheidet sich etwas vom getbootstrap.com-Beispiel. Ich habe eine Icon-Bars-Klasse hinzugefügt. Das ist so, dass ich es mit -> finden kann

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

Sie müssen auch das Div finden, das die Elemente umschließt, die nach unten gedrückt werden müssen.

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

Das ist der saftige Teil!

Ich werde Ihnen zeigen, wie es in jquery gemacht wird. Hier ist der Code und die Erklärung ist unten --->

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

Erklärung: - Zuerst erklären wir, dass dies eine Frage ist.

-Dann überprüfe ich, ob auf die Schaltfläche zum Umschalten des Reduzierens geklickt wurde, indem der Ereignishandler zum ersten Element in der Symbolliste hinzugefügt wird. Da ich nur eine Symbolleistenklasse erstellt habe, ist das erste Element der Liste immer dasjenige, auf das ich abzielte.

- Als nächstes werde ich prüfen, ob die Elemente nach oben oder unten gleiten sollen, je nachdem, ob die Klassen den bedingten Anweisungen entsprechen. Die Logik muss nicht viel erklärt werden, da sie ziemlich einfach ist, auch wenn Sie die hasClass-Funktion noch nie ausprobiert haben.

Das ist es.

Hintern ....... Es ist noch nicht gut. Es gibt einen Fehler, bei dem der Übergang zum Ausblenden-Menü noch nicht abgeschlossen ist, wenn Sie auf den Umschaltknopf doppelklicken, sodass der Push-Übergang in umgekehrter Reihenfolge wieder nach oben geht. Probieren Sie es hier aus. Hoffe, es wird etwas Hilfe geben.

ps. Ignoriere das gesamte Styling in meinem Snippet

-Jack Anfänger Front-End-Web-Entwickler

2
AwesomeJackify

navbar-fixed-top.

Dadurch wird die Pushdown-Eigenschaft des Akkordeons verhindert. Sie müssen es mit Ihrem eigenen Javascript oder CSS ausmassieren.

1
Callat

Fügen Sie nach der Navigationsleiste die folgende Zeile in das erste "div" ein, z

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

In meinem Fall hat es funktioniert, dies zu ändern

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

dafür

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

und Bearbeitung meiner CSS daraus:

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

dazu:

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

Erwähne eine "id" in data-target und füge diese "id" in das "div" ein, das einen reduzierten Navbarcode hat. Wie nachstehend:

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

Dies data-target ruft eine bestimmte "ID" auf und auf der Basis dieser wird Ihre Navigationsleiste umschalten.

DAS FUNKTIONIERT!!

Hatte das gleiche Problem und alle Antworten hier kehren zu einer statischen Navigationsleiste zurück, die nicht das ist, wonach Sie suchen.

Wirf ein leeres Div-Tag (mit Höhe) nach der Navigationsleiste, aber vor dem Beginn deines Inhalts. Diese leere Div verschiebt den Inhalt nach unten und bleibt hinter der Navigationsleiste verborgen. Verwenden Sie Javascript/jQuery, um das Div für die beiden mobilen Breiten umzuschalten.

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