Zurb Foundation - Top-Bar - Don ' T Zusammenbruch, um in das Menü

Ist es möglich, nicht die Obere Leiste in der Stiftung zum Einsturz zu Menü und die drei Linien. Wir nicht wirklich brauchen diese Funktion aber nicht sicher, wie Sie Sie zum deaktivieren der Zusammenbruch.

Erfordert das ändern der foundation.topbar.js?

Willkommen ALSO! Ich kann wirklich nicht verstehen, was Sie Fragen, gibt es irgendeine Weise können Sie klären Ihre Frage? Wenn möglich einen link zu einem screenshot von dem, was Sie wollen vs, was passiert ist und wir werden sehen, was wir tun können! (Als neue Benutzer können nur maximal 2 links in einem post.)
Dank Henrique! Sorry ich war nicht klar genug. Ich habe nicht alle screenshots auf mich jetzt aber was ich im Grunde versucht, zu tun mit der Stiftung war es, NICHT über meine Tasten auf der oberen rechten Seite der Navigationsleiste verschwinden, wenn die Breite des browser kollabiert zu sagen, tablet oder mobile Größe. Wir hatten genügend Breite in der oberen Leiste selbst in der mobilen für die beiden Tasten, die wir wollten und es hat keinen Sinn, zu kollabieren, um ein Dropdown-Menü, wie der Standard in der Stiftung.

InformationsquelleAutor Will Tang | 2013-07-17

5

Wenn Sie mit Stiftung via sass, es gibt einen noch besseren Weg, um darüber zu gehen.
Öffnen Sie einfach die _settings.scss-Datei und sucht diese Zeile:
```
//$topbar-breakpoint: emCalc(940px); //Change to 9999px for always mobile layout
```
Entfernen Sie die Kommentarzeichen und ändern Sie den Wert auf 0, oder was auch immer breaking point, den Sie verwenden möchten.

InformationsquelleAutor Arvid
2

Dinge haben sich geändert in der Stiftung 5.1.1 und dieses arbeitete für mich in der css: geändert
```
@media only screen and (min-width: 40.063em) {
  .top-bar {
```
zu
```
@media only screen and (min-width: 4.063em) {
  .top-bar {
```
- Ich sehe keine änderungen in deinem Beispiel-code aber...
- 40.063 em vs em 4.063
InformationsquelleAutor TrevTheDev
1

Ja, es ist möglich, zeigen nicht die Standard-nav-Menü für kleine Bildschirme mit der Menü-Ausklapp-Symbol ohne ändern der js-Dateien. Foundation 4 verwendet eine Reihe von Sichtbarkeit von Klassen zu zeigen und ausblenden von Elementen auf dem Bildschirm zusammen mit media queries.

Als ein Beispiel ist hier die Haupt navigation für Zurb demo-Website verlinkt oben:
```
<nav class="top-bar hide-for-small" style="">
  <ul class="title-area">
    
    <li class="name">
      <h1><a href="/">Foundation</a></h1>
    </li>
    
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>


<section class="top-bar-section">
    
    <ul class="right">
      <li class="divider"></li>
      <li class=""><a href="/grid.php">Features</a></li>
      <li class="divider"></li>
      <li class=""><a href="/templates.php">Add-ons</a></li>
      <li class="divider"></li>
      <li class=""><a href="/case-jacquelinewest.php">Case Studies</a></li>
      <li class="divider"></li>
      <li class=""><a href="/docs/">Docs</a></li>
      <li class="divider"></li>
      <li class=""><a href="/training.php">Training</a></li>
      <li class="divider"></li>
      <li class="has-form">
        <a href="http://foundation.zurb.com/docs" class="button">Getting Started</a>
      </li>
    </ul>
  </section></nav>
```
Wie Sie sehen können, es ist einfach zu entfernen die .menu-icon - Klasse oder auch die li; wenn du mal in Zeile 2816 des docs.css kann man sehen, dass eine minimale Bildschirm-Haltepunkt (58.75 em) ist für die .top-bar Klasse:
```
@media only screen and (min-width: 58.75em) {
.top-bar {
background: #111111;
*zoom: 1;
overflow: visible; }
.top-bar:before, .top-bar:after {
  content: " ";
  display: table; }
.top-bar:after {
  clear: both; }
.top-bar .toggle-topbar {
  display: none; }
.top-bar .title-area {
  float: left; }
.top-bar .name h1 a {
  width: auto; }
...
```
Da die F4-Taste ist mit einem mobile-first-design-Ansatz standardmäßig das Menü für kleine Bildschirme. Bei einer minimalen Breite von 58.75 em, der Haltepunkt festgelegt ist, ändern Sie das Standard .top-bar Blick für größere Bildschirme, so dass die Menü ul wird angezeigt, inline-und das Kind li Schwamm Links.

Können Sie überschreiben die .top-bar so, dass dies die Standard-Ansicht durch überschreiben der entsprechenden Zeilen css/scss oder auch die globalen Variablen.
- Vielen Dank für die tnog! Dass tatsächlich geholfen. Was ich in der Lage war zu tun, war schließlich so etwas wie dieses, um sicherzustellen, dass unsere sign up und sign in buttons zeigte sich sogar die Vergangenheit, die minimale Breite von 58.75 em <code> <li class="toggle-topbar menu-icon"> <a class="button" href="#" data-reveal-id="SignUp">Anmelden</a> <a class="button" href="#" data-reveal-id="LogIn">Anmelden</a> </li> </code> Sorry, das ist ziemlich schrecklich. Wie kommst du auf code, um zu zeigen, richtig?
InformationsquelleAutor tnog
1

Wenn du arbeitest direkt mit dem Foundation CSS sind, können Sie überschreiben die mobile-Modus des .top-bar-Menü durch ändern der Haltepunkte in den folgenden Zeilen CSS zu 0em:
```
.top-bar-js-breakpoint {
  width: 58.75em !important;
  visibility: hidden; }

.js-generated {
  display: block; }

@media only screen and (min-width: 58.75em) {
----- numerous lines below -------
```
Allerdings, wenn Sie arbeiten mit einem child theme in WordPress oder einem anderen CMS, kopieren Sie alle .top-bar Verwandte Selektoren unter der eigentlichen Medien-Abfrage, und fügen Sie Sie in Ihr Kind, CSS, und ändern Sie dann die Haltepunkte auf 0. Funktioniert wie ein Charme.

InformationsquelleAutor Lee Honeycutt

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.