Bootstrap活跃菜单箭头设置背景

时间:2016-05-11 22:27:06

标签: css twitter-bootstrap-3

我正在尝试在活动菜单项上添加箭头,我已经使箭头工作但我无法设置箭头的背景。

请参阅下面的演示链接。

演示链接: https://jsfiddle.net/afjrhLwq/

CSS

   .navbar-default {
        background: #fff;;
        border-bottom: 0;
        font-size: 1em;
        padding-top: 20px;
    }

    .navbar-default .navbar-nav {
        font-weight: bold;
    }

    .navbar-default .navbar-nav > .active {
        color: #000;
    }

    .navbar-default .navbar-nav > .active > a,
    .navbar-default .navbar-nav > .active > a:hover,
    .navbar-default .navbar-nav > .active > a:focus {
        color: #000;
        background: transparent;
    }

    .navbar-nav > li.active:before,
    .navbar-nav > li.active:after {
        content: "";
        bottom: -14px;
        position: absolute;
        border-top: 13px solid #fff;
        border-bottom: 3px solid #00b4f0;
        margin: 0 8px;
        left: 50%;
        width: 9999px;
    }

    .navbar-nav > li.active:after {
        left: auto;
        right: 50%;
    }

    .navbar-nav > li.active a:after {
        content: "";
        width: 13px;
        height: 14px;
        position: absolute;
        top: solid #00b4f0;
        border: solid #00b4f0;
        border-width: 3px 3px 0 0;

        top: 100%;
        left: 0;
        right: 0;
        margin: 5px auto 0;
        -moz-transform: rotate(310deg);
        -webkit-transform: rotate(310deg);
        -ms-transform: rotate(310deg);
    }

感谢您寻找:)

1 个答案:

答案 0 :(得分:0)

我已经改变了我的解决方案

现在箭头非常透明。我已经纠正了一些属性,并在解决方案中添加了两个白角:

.navbar-nav > li.active a:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 0;
  height: 0;
  margin: 0 auto;
  border-left:    9px solid white;
  border-right:   9px solid white;
  border-bottom: 11px solid transparent; 
}

在此代码中,箭头有一个透明的三角形:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.navbar-brand {
  font-size: 1.7em;
  color: #000;
}
.navbar-brand span {
  color: #00b4f0;
  font-weight: bold;
}

.navbar-default {
  background: #fff;
  border-bottom: 0;
  font-size: 1em;
  padding-top: 20px;
}
.navbar-default .navbar-nav {
  font-weight: bold;
}
.navbar-default .navbar-nav > .active {
  color: #000;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #000;
  background: transparent;
}

.navbar-nav > li.active:before,
.navbar-nav > li.active:after {
  content: "";
  bottom: -13px;
  position: absolute;
  border-top: 11px solid #fff;
  border-bottom: 3px solid #00b4f0;
  margin: 0 9px;
  left: 50%;
  width: 9999px;
}
.navbar-nav > li.active:after {
  left: auto;
  right: 50%;
}

.navbar-nav > li.active a:before,
.navbar-nav > li.active a:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
}
.navbar-nav > li.active a:before {  /* Two white triangles. */
  width: 0;
  height: 0;
  margin: 0 auto;
  border-left:    9px solid white;
  border-right:   9px solid white;
  border-bottom: 11px solid transparent; 
}
.navbar-nav > li.active a:after { /* Two blue borders. */ 
  width: 14px; /* Now the width is equal to the height. */
  height: 14px;
  margin: 4px auto 0;
  border: solid #00b4f0;
  border-width: 3px 3px 0 0;
  -webkit-transform: rotate(315deg); /* 315 instead of 310 */
     -moz-transform: rotate(315deg);
      -ms-transform: rotate(315deg);
          transform: rotate(315deg);
}

.jumbotron {
  margin-top: 36px;
}
<!-- Fixed navbar -->
<div class="page-body">
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <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="#"><span>dashboard</span></a>
      </div>
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a>
          </li>
          <li><a href="#about">About</a>
          </li>
          <li><a href="#contact">Contact</a>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a>
              </li>
              <li><a href="#">Another action</a>
              </li>
              <li><a href="#">Something else here</a>
              </li>
              <li role="separator" class="divider"></li>
              <li class="dropdown-header">Nav header</li>
              <li><a href="#">Separated link</a>
              </li>
              <li><a href="#">One more separated link</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
  </nav>

  <!-- Main jumbotron for a primary marketing message or call to action -->
  <div class="jumbotron bluebg">
    <div class="container">
      <h1>Hello, world!</h1>
      <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
      <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
      <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
      <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a>
      </p>
    </div>
  </div>

  <!-- Begin page content -->
  <div class="container">
    <div class="page-header">
      <h1>Sticky footer with fixed navbar</h1>
    </div>
    <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
    <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
    <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
    <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
    <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
    <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
    <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
    <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
    <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
    <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
    <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
    <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
  </div>

  <footer class="footer">
    <div class="container">
      <p class="text-muted">Place sticky footer content here.</p>
    </div>
  </footer>

https://jsfiddle.net/glebkema/jwn695s9/

之前的版本有一个灰色的不透明三角形

我用过

.navbar  {
  border-bottom: 3px solid #00b4f0;
}

而不是

.navbar-nav > li.active:before,
.navbar-nav > li.active:after {
  content: "";
  bottom: -14px;
  position: absolute;
  border-top: 13px solid #fff;
  border-bottom: 3px solid #00b4f0;
  margin: 0 8px;
  left: 50%;
  width: 9999px;
}
.navbar-nav > li.active:after {
  left: auto;
  right: 50%;
}

我用过

.navbar-nav > li.active a:after {
  width: 14px;
  height: 14px;
  margin: -6px auto 0;
  -moz-transform: rotate(315deg);  /* 315 instead of 310 */
  -webkit-transform: rotate(315deg);
  -ms-transform: rotate(315deg);
  background: linear-gradient(225deg, #eee 0%, #eee 55%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%);
  /* #eee = background-color of .jumbotron */
}

而不是

.navbar-nav > li.active a:after {
  width: 13px;
  height: 14px;
  margin: 5px auto 0;
 -moz-transform: rotate(310deg);
 -webkit-transform: rotate(310deg);
 -ms-transform: rotate(310deg);
}

在此代码中,箭头有一个灰色的不透明三角形:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.navbar-brand {
  font-size: 1.7em;
  color: #000;
}
.navbar-brand span {
  color: #00b4f0;
  font-weight: bold;
}
.navbar-default {
  background: #fff;
  border-bottom: 0;
  font-size: 1em;
  padding-top: 20px;
}
.navbar-default .navbar-nav {
  font-weight: bold;
}
.navbar-default .navbar-nav > .active {
  color: #000;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #000;
  background: transparent;
}
.navbar {
  border-bottom: 3px solid #00b4f0;
}
.navbar-nav > li.active a:after {
  content: "";
  width: 14px;
  height: 14px;
  position: absolute;
  top: solid #00b4f0;
  border: solid #00b4f0;
  border-width: 3px 3px 0 0;
  top: 100%;
  left: 0;
  right: 0;
  margin: -6px auto 0;
  -moz-transform: rotate(315deg);  /* 315 instead of 310 */
  -webkit-transform: rotate(315deg);
  -ms-transform: rotate(315deg);
  background: linear-gradient(225deg, #eee 0%, #eee 55%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%);
  /* #eee = background-color of .jumbotron */
}
<!-- Fixed navbar -->
<div class="page-body">
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <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="#"><span>dashboard</span></a>
      </div>
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a>
          </li>
          <li><a href="#about">About</a>
          </li>
          <li><a href="#contact">Contact</a>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a>
              </li>
              <li><a href="#">Another action</a>
              </li>
              <li><a href="#">Something else here</a>
              </li>
              <li role="separator" class="divider"></li>
              <li class="dropdown-header">Nav header</li>
              <li><a href="#">Separated link</a>
              </li>
              <li><a href="#">One more separated link</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
  </nav>

  <!-- Main jumbotron for a primary marketing message or call to action -->
  <div class="jumbotron bluebg">
    <div class="container">
      <h1>Hello, world!</h1>
      <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
      <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
      <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
      <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a>
      </p>
    </div>
  </div>

  <!-- Begin page content -->
  <div class="container">
    <div class="page-header">
      <h1>Sticky footer with fixed navbar</h1>
    </div>
    <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
    <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
    <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
    <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
    <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
    <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
    <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
    <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
    <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
    <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
    <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
    <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
  </div>

  <footer class="footer">
    <div class="container">
      <p class="text-muted">Place sticky footer content here.</p>
    </div>
  </footer>

https://jsfiddle.net/glebkema/ovLggjt9/