web-dev-qa-db-de.com

Semantisches UI-zentriertes nicht-flüssiges Menü?

Ich habe zwei Menüs, eines unten und eines oben. Mein Problem ist zweifach. Ich möchte, dass sie in der Mitte des Bildschirms angezeigt werden und nur die Breite ihres Inhalts haben (anstatt standardmäßig flüssig zu sein).

Ich habe in der Dokumentation nichts gefunden, was darauf hindeutet, dass dies möglich ist. Ist es also wahrscheinlich die Lösung, es mit CSS zu modifizieren?

Jede Hilfe wäre sehr dankbar.

14
1vasari

Verwenden Sie die semantische UI-Klasse "compact" für Ihre UI-Menüs, um sich an den Inhalt anzupassen, und verwenden Sie dann Raster und Spalten für die Zentrumsausrichtung. So zum Beispiel:

<div class="ui centered grid">
    <div class="center aligned column">
        <div class="ui compact menu">
          <a class="active item">
            <i class="home icon"></i> Home
          </a>
          <a class="item">
            <i class="mail icon"></i> Messages
          </a>
        </div>        
    </div>
</div>

JSFiddle-Link: http://jsfiddle.net/pLskpufp/2/

20
MTran

Sie können auch nur einen mittig ausgerichteten Container verwenden:

<div class="ui center aligned container">
    <div class="ui compact menu">
        <a class="active item">
            <i class="home icon"></i> Home
        </a>
        <a class="item">
            <i class="mail icon"></i> Messages
        </a>
    </div>        
</div>

JSFiddle-Link: http://jsfiddle.net/377v6ect/1/

2
Bonnici

Ich weiß, es ist keine reine Semantic-UI-Lösung, aber für diejenigen, die nach einem Weg suchen, dies mit einem festen Menü in Semantic-UI zu tun, ist die beste Lösung, die ich bisher gefunden habe, sie in ein Div einzubinden, mit ein wenig Sitte CSS.

<div className="fixed bottom">
  <div className="ui centered grid">
    <div className="center aligned column">
        <!-- Your Semantic UI menu here, but not fixed. -->
    </div>
  </div>
</div>

Zusammen mit dieser Css ...

div.fixed {
  width: 100%;
  position: fixed;
}
div.fixed.bottom {
  bottom: 0;
}
div.fixed.top {
  top: 0;
}
0
ihake

Ich habe in den semantischen Foren und anderen Orten gesucht; Meine erstellt .. Die Hoffnung funktioniert auch für Sie.

   <div class="ui center aligned container">
    <div class="ui" style="background-color: #009999;">
      <!-- <a href="https://semantic-ui.com/examples/fixed.html#" class="header item"> -->
        <div class="ui centered small image" >
            <a href="#">
            <img class="logo" src="./logo_white.png">
            </a>
        </div>
    <!-- </a> -->
    </div>
</div>
0
Musa Toktaş