web-dev-qa-db-ja.com

マテリアライズを使用して、中央揃えのリンクを含むナビゲーションバーを作成するにはどうすればよいですか？

マテリアライズを使用して、上部にナビゲーションバーがある1ページの垂直スクロールWebサイトを構築しようとしています。現在、マテリアライズには、リンクを左または右に揃えるクラスしかありません。ロゴは中央に揃えることができますが、リンク自体はできません。

ULとラッパーdivにcenter-alignクラスとcenterクラスを追加してきましたが、グリッドを使用しようとしても成功しませんでした。コードは次のとおりです。

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>

私のCSSには、リンクのホバリング動作と背景色の下線のみがあります。

htmlcssmaterialize
7
Juan

マテリアライズには、すべてのfloat: left要素にnav ul liが付属しています。標準 Helper でそれらを中央に配置しようとすると、機能しません。したがって、text-align: centerに加えて、そのfloatをnoneに設定する必要があります。ただし、これにより、すべてのボタンが互いに重なり合うようになります。これを解決するには、<li>要素をインラインで表示し、<a>要素をインラインブロックで表示するだけです。

そのように新しいクラスを作成することをお勧めします。

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

上記の<nav>クラスで標準のMaterialize.nav-centerコンポーネントを使用します。

<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>
16
Niko Kovacevic

公式の回答では、マテリアルデザインのガイドラインに従って、機能を示すためにナビゲーションバーのリンクを左揃えまたは右揃えにする必要があります。 https://material.google.com/layout/structure.html#structure-app -bar

ただし、これはややハックな方法で回避できます。

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

ナビゲーションバーをクラスbrand-logoとcenterのdivでラップすることにより、メニューがロゴであり、リンクを中央に配置できるようになります。

そのようなメニューは十分に小さい画面では消えてしまい、思い通りに動作しない可能性があると思います。

代わりにマテリアライズタブを使用できます。

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

これには、各リンクと同じ幅を与えるという利点がありますが、少し余分なスタイルを設定する必要があり、モバイルに関心がある場合はさらに作業が必要になる可能性があります。

3
Alfred Young

そこで、UL要素に次の変換を追加することでこれを解決しました。

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

私のリンクは画面の約13分の1を占めるので、変換はそれらをちょうど13分の1左に移動することです。

1
Juan