Animierte Symbol " X " für bootstrap toggle

Ich bin versucht zu animieren, die horizontalen Linien in der Navigationsleiste, um ein "X", wenn die Seite in der Größe reduziert.

Meine navbar code ist wie folgt:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <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">Company</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">About<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="about.html">About Us</a>
                            </li>
                            <li>
                                <a href="certification.html">Certification</a>
                            </li>
                            <li>
                                <a href="downloads.html">Download PDF</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="products.html">Products</a>
                    </li>
                    <li>
                        <a href="inquiry.html">Inquiry</a>
                    </li>
                    <li>
                        <a href="events.html">Events</a>
                    </li>
                    <li>
                        <a href="contact.html">Contact</a>
                    </li>
                    <li>
                        <a href="#">Login</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

Wenn ich Versuch mit der CSS-gezeigt hier es funktioniert nicht. Gibt es etwas, was ich ändern muss für meine navbar speziell? Ich merke auch, dass ich beim hinzufügen der css, die :

 &:hover {
    background: transparent !important;
  }

der schließenden geschweiften Klammer erkennt nicht die Eröffnung eines. Was bin ich?

Sie müssen passen Sie Ihre HTML, so dass es ist wie das Beispiel, das Sie geschrieben.

InformationsquelleAutor machinebit | 2016-06-11

  1. 13

    Es ist, weil der Lehrgang mit Weniger, eine CSS-pre-processor, Erweiterung der CSS-Sprache.

    Jedoch, Sie müssen nur verwenden Sie die kompilierte CSS, und machen ein paar änderungen.

    In den html-Code, fügen Sie einige Klassen in die Kneipen, um zu unterscheiden, jede von Ihnen :

    <span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>

    Auch, init dein button mit der Klasse collapsed oder wird es erste render als 'X'.

    Dann fügen Sie die CSS kompiliert :

    .navbar-toggle {
  border: none;
  background: transparent !important;
}
.navbar-toggle:hover {
  background: transparent !important;
}
.navbar-toggle .icon-bar {
  width: 22px;
  transition: all 0.2s;
}
.navbar-toggle .top-bar {
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}
.navbar-toggle .middle-bar {
  opacity: 0;
}
.navbar-toggle .bottom-bar {
  transform: rotate(-45deg);
  transform-origin: 10% 90%;
}
.navbar-toggle.collapsed .top-bar {
  transform: rotate(0);
}
.navbar-toggle.collapsed .middle-bar {
  opacity: 1;
}
.navbar-toggle.collapsed .bottom-bar {
  transform: rotate(0);
}

    Und jetzt sollte es funktionieren wie ein Charme.

    Hier ein JsFiddle : Demo

    Möchten Sie wissen, warum das "X" scheint aus von mir? Wie bei den zwei bars treffen sich nicht in Ihrer Mitte.
    Warum funktioniert es nur mit der Breite 22px? Wechselte ich auf 16px, und die Suche nach schwer zu überqueren, die zwei Zeilen...!!

    InformationsquelleAutor Mathieu Schaeffer

Schreibe einen Kommentar