web-dev-qa-db-fra.com

Comment puis-je créer une barre de navigation avec des liens centrés à l'aide de Materialise?

J'essaie de construire un site Web de défilement vertical d'une page avec une barre de navigation en haut à l'aide de matérialiser. Désormais, matérialiser a seulement des classes pour aligner les liens à gauche ou à droite, un logo peut être aligné au centre mais pas les liens eux-mêmes,

J'ai ajouté des classes center-align et center à UL et un div wrapper. De plus, j'ai essayé d'utiliser la grille sans succès, voici mon code:

HTML

   <div class="navbar-fixed"  >
    <nav id="nav_f" class="transparent z-depth-0" role="navigation" >
        <div class="container">



            <div class="nav-wrapper"  >

             <div class="row s12">

            <div>
                  <ul class="hide-on-med-and-down navbar " >
                      <li><a id="desk-about-us" href="#about-us">ABOUT US</a></li>
                      <li><a href="#how-it-works">HOW IT WORKS</a></li>
                      <li><a href="#comments">COMMENTS</a></li>
                  </ul>
                </div>
              </div>

                <ul id="nav-mobile" class="side-nav side-nav-menu ">
                    <li><a href="#about-us">ABOUT US</a></li>
                    <li><a href="#how-it-works">HOW IT WORKS</a></li>
                    <li><a href="#comments">COMMENTS</a></li>
                </ul>
            <a href="#" data-activates="nav-mobile" class="button-collapse right"><i class="material-icons">menu</i></a>
            </div>

       </div>
    </nav>
</div>

Sur mon css, il y a seulement un soulignement pour le comportement de survol des liens et la couleur de fond,

htmlcssmaterialize
6
Juan

Materialise est livré avec un float: left sur tous les éléments nav ul li. Si vous essayez de les centrer avec le standard Helper , cela ne fonctionnera pas. Donc, en plus de text-align: center, vous devrez définir float sur none. Cependant, tous vos boutons s’empileront les uns sur les autres; pour résoudre ce problème, il suffit que les éléments <li> affichent inline et que les éléments <a> s'affichent inline-block.

Je suggère de créer une nouvelle classe en tant que telle:

nav.nav-center ul {
    text-align: center;
}
nav.nav-center ul li {
    display: inline;
    float: none;
}
nav.nav-center ul li a {
    display: inline-block;
}

Utilisez le composant Materialize <nav> standard avec la classe .nav-center ci-dessus:

<nav class="nav-center" role="navigation">
    <div class="nav-wrapper container">
        <ul>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact</a></li>
            <li><a href="/help">Help</a></li>
        </ul>
    </div>
</nav>
12
Niko Kovacevic

La réponse officielle est probablement que les liens de la barre de navigation doivent être alignés à gauche ou à droite pour indiquer les fonctionnalités, conformément aux instructions de conception du matériel: https://material.google.com/layout/structure.html#structure-app-bar

cependant, vous pouvez contourner cela d'une manière quelque peu hacky:

<div class="naxbar-fixed">
    <nav>   
        <div class="brand-logo center">
            <ul>
                <li class="active"><a href="/page1">page1</a></li>
                <li><a href="/page2">page2</a></li>
            </ul>
        </div>
    </nav>
</div>

en enveloppant votre barre de navigation dans une div avec le logo de la marque de classes et le centre que vous incitez se matérialise en pensant que le menu est un logo et qu'il permettra aux liens d'être centrés.

Je crois qu'un tel menu disparaîtrait sur un écran suffisamment petit et ne se comporterait peut-être pas comme vous le souhaitez.

Vous pouvez utiliser les onglets de matérialisation à la place:

<div class="naxbar-fixed">
    <nav>
        <div class="white-text">
            <ul class="tabs center" style="width:20em;">
                <li class="tab col s6 active>
                    <a href="/page1">page1a>
                </li>
                <li class="tab col s6">
                    <a href="/page2">page2</a>
                </li>
            </ul>
        </div>
    </nav>
</div>

Cela a l'avantage de donner à chaque lien une largeur égale, mais vous obligera probablement à faire un peu plus de style et peut nécessiter plus de travail si vous êtes concerné par le mobile.

3
Alfred Young

Donc, j'ai résolu ce problème en ajoutant la transformation suivante à mon élément UL:

nav ul{
  transform: translateX(32%);
  webkit-transform: translateX(-32%);
}

Puisque mes liens occupent environ 1 tiers de l'écran, la transformation consiste à les déplacer d'un tiers à gauche.

1
Juan