40

Bootstrap を使用してナビゲーション バーにドロップ シャドウを追加しようとしていますが、理解できないようです。たぶん、誰かが私を正しい方向に向けることができます。同様のトピックについて尋ねられた他のすべての質問には、厄介なコードの信じられないほど長い応答がありますが、それを行う簡単な方法が必要です。結局のところ、それがBootstrapの要点ではありません.

私のナビゲーションに関連するHTMLは次のとおりです。

<div class="navbar navbar-inverse navbar-fixed-top" id="custom-nav">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="index.html">eService</a>
      <div class="nav-collapse">
        <ul class="nav pull-right">
          <li><a href="index.html">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="contact.html">Contact</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  Services
                  <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li><a href="#">Stage Design & Build</a></li>
              <li><a href="#">Event Planning & Management</a></li>
              <li><a href="#">Video Production</a></li>
              <li><a href="#">Audio Production</a></li>
              <li><a href="#">Lighting Production</a></li>
            </ul>
          </li><!-- dropdown -->
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  Events
                  <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li><a href="#">Corporate Events</a></li>
              <li><a href="#">Civic Events</a></li>
              <li><a href="#">Charity Events</a></li>
              <li><a href="#">Grand Openings</a></li>
              <li><a href="#">Concerts</a></li>
            </ul>
          </li><!-- dropdown -->
        </ul><!-- /.nav -->
      </div><!--/.nav-collapse -->
    </div><!-- /.container -->
  </div><!-- /.navbar-inner -->
</div><!-- /.navbar -->

そして、これがnavbarに関連する私のCSSです:

#custom-nav {
    -webkit-box-shadow: 20px 20px 20px #FC0;
    -moz-box-shadow:    20px 20px 20px #FC0;
    box-shadow:         20px 20px 20px #FC0;
    z-index:999;
}

影に設定した現在の px 寸法では、塗りつぶされたブロックのように見えることを認識しています。このダンシングを機能させることができたら、調整する予定です。ヘルプやポインタをありがとう。

ムチョラブ。

4

3 に答える 3

73

css で、以下を .navbar クラス ルールに追加します。

.navbar {
    -webkit-box-shadow: 0 8px 6px -6px #999;
    -moz-box-shadow: 0 8px 6px -6px #999;
    box-shadow: 0 8px 6px -6px #999;

    /* the rest of your styling */
}

編集

ボックス シャドウ コードを生成する素晴らしいオンライン ツールがあります ( cssmatic.comの方々に感謝します)。シャドウの外観を調整すると、必要なすべてのコードと特定のブラウザー プレフィックス (webkit、mozilla など) が生成されます。その後、コードを CSS にコピーできます。

http://www.cssmatic.com/box-shadow

同じサイトで他の CSS 効果も見つけることができます。

于 2015-05-26T18:19:55.437 に答える
5

ナビゲーションバーで影を維持するには、box-shadow プロパティを調整するだけです

.navbar{
    box-shadow: 0px 8px 8px -6px rgba(0,0,0,.5);
    }

ここで最初0pxは、中央の影を調整して、左右の影を取得することです

次に、8pxは影の高さ

その後8px、-6px影の硬さと不透明度のためのものです

(0,0,0,0.5)単純な rgba(red,green,blue,alpha) の色とアルファです。影の透明度を維持するために、 0.0 (完全に透明) から1.0 (完全に不透明) になります。

于 2020-06-06T18:18:29.653 に答える
2

navbar マークアップは、デフォルトの Bootstrap navbar マークアップとは少し異なります。たとえば、

navbar-innerトグルとブランドをクラス内にラップする代わりに、ナビゲーションバー全体を名前付きのクラスにラップし、navbar-headerその後に折りたたみ可能なメニュー項目を配置しました。

マークアップは次のようになります。

<div class="navbar navbar-inverse navbar-fixed-top" id="custom-nav" role="navigation">
   <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" 
         data-target="#example-navbar-collapse">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">eService</a>
   </div>
   <div class="collapse navbar-collapse" id="example-navbar-collapse">
      <ul class="nav navbar-nav">
         <li><a href="index.html">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="contact.html">Contact</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  Services
                  <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li><a href="#">Stage Design & Build</a></li>
              <li><a href="#">Event Planning & Management</a></li>
              <li><a href="#">Video Production</a></li>
              <li><a href="#">Audio Production</a></li>
              <li><a href="#">Lighting Production</a></li>
            </ul>
          </li><!-- dropdown -->
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  Events
                  <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li><a href="#">Corporate Events</a></li>
              <li><a href="#">Civic Events</a></li>
              <li><a href="#">Charity Events</a></li>
              <li><a href="#">Grand Openings</a></li>
              <li><a href="#">Concerts</a></li>
            </ul>
          </li><!-- dropdown -->
        </ul><!-- /.nav -->
   </div>
</div>

上記のコードを使用した jsfiddle は次のとおりです: https://jsfiddle.net/AndrewL32/e0d8my79/36/

また、

ブートストラップのデフォルトのスタイリングによってスタイルが上書きされないように、カスタム css ファイルをブートストラップ css ファイルの下に置いてください。

<link rel="stylesheet" type="text/css" href="bootstrap.css"> <!--call your bootstrap first-->
<link rel="stylesheet" type="text/css" href="mystyle.css"><!-- followed by your custom css after-->
于 2015-03-31T19:44:24.150 に答える