web-dev-qa-db-fra.com

Menu non fluide centré sur l'interface utilisateur sémantique?

J'ai deux menus, l'un est fixé en bas et l'autre en haut. Mon problème est double. Je veux qu’ils apparaissent au centre de l’écran et ne soient que la largeur de leur contenu (au lieu d’être fluides, comme par défaut).

Je n'ai rien trouvé dans la documentation qui indique que cela est possible, donc la solution consiste probablement à le modifier avec CSS?

Toute aide serait grandement appréciée.

htmlcsssemantic-ui
14
1vasari

Utilisez la classe sémantique "compact" de votre interface utilisateur pour vos menus d’interface utilisateur, puis utilisez des grilles et des colonnes pour l’alignement central.

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

Lien JSFiddle: http://jsfiddle.net/pLskpufp/2/

20
MTran

Vous pouvez également simplement utiliser un conteneur centré:

<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

Je sais que ce n'est pas une solution d'interface utilisateur sémantique pure, mais pour ceux d'entre vous qui cherchent un moyen de le faire avec un menu fixe dans l'interface utilisateur sémantique, la meilleure solution que j'ai trouvée jusqu'à présent consiste à l'envelopper dans une div avec un peu de personnalisation 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>

Avec ce css ...

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

J'ai cherché sur les forums sémantiques et d'autres endroits; créé le mien .. espoir travaille pour vous aussi.

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