web-dev-qa-db-ja.com

Bootstrapを使用して、上部に固定されたナビゲーションバーにドロップシャドウを追加します

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

これが私のnavに関連する私の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寸法では、ソリッドブロックのように表示されることを認識しています。このつまらないものが機能するようになったら、調整する予定です。ヘルプやポインタをお寄せいただきありがとうございます。

ムチョ愛。

htmlcsshtml5css3twitter-bootstrap
29
Brian

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効果を見つけることもできます。

58
moeabdol

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

navbar-innerクラスの内側にトグルとブランドをラップし、その後に折りたたみ可能なメニュー項目が続く代わりに、navbar-headerという名前のクラスでnavbar全体をラップしました。

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

<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ファイルbelowbootstrap= 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-->
2
AndrewL64