在导航栏中为li添加动画边框

时间：2017-05-24 10:00:22

标签： html css twitter-bootstrap

我尝试为li中的每个navbar项添加底部边框。但是，即使我在li标签中提供了li类，边框也会在div.nav-line项的实际内容下创建一个单独的行。

＆＃13;
＆＃13; 
   $(function() {
        $(".dropdown").hover(
            function() { $(this).addClass('open') },
            function() { $(this).removeClass('open') }
        );
    });
＆＃13; 
.navbar {
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
}

.navbar-default .navbar-nav {
  font-size: 15px;
}

.navbar-fixed-top {
  min-height: 80px;
}

.navbar-nav>li>a {
  padding-top: 0px;
  padding-bottom: 0px;
  line-height: 80px;
}

.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus {
  color: #ffffff;
  text-decoration: none;
  outline: 0;
  background-color: #b4a28f;
}

.navbar-nav>li>.nav-line {
  background-color: #3178b9;
  height: 2px;
  width: 0%;
  /*        -webkit-transition: all 100ms ease-out;
        -moz-transition: all 100ms ease-out;
        -o-transition: all 100ms ease-out;
        transition: all 100ms ease-out;*/
}

.navbar-nav>li:hover>.nav-line {
  background-color: #3178b9;
  height: 2px;
  width: 100%;
  -webkit-transition: all 150ms ease-in;
  -moz-transition: all 150ms ease-in;
  -o-transition: all 150ms ease-in;
  transition: all 150ms ease-in;
}
＆＃13; 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">

<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="#collapse" aria-expanded="false">
                        <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="">
        <!-- <img class="img img-responsive" src="www/images/srs-logo.jpg" alt="SRS Constructions"> -->
        SRS Constructions
      </a>
    </div>
    <div class="collapse navbar-collapse navbar-right" id="collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a class="main" href="#main">Home <span class="sr-only">(current)</span></a>
          <div class="nav-line"></div>
        </li>
        <li class="dropdown" id="nav-about">
          <a href="#about" class="dropdown-toggle main" role="button" aria-haspopup="true" aria-expanded="false">About
                            </a>
          <ul class="dropdown-menu" style="left:0;right: auto">
            <li><a href="about.html">The Founder</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="health-policy.html">HSE Policy</a></li>
            <li><a href="quality-policy.html">Quality Policy</a></li>
          </ul>
          <div class="nav-line"></div>
        </li>
        <li><a class="main" href="#services">Services</a>
          <div class="nav-line"></div>
        </li>
        <li><a class="main" href="#projects">Our Projects</a>
          <div class="nav-line"></div>
        </li>
        <li><a class="main" href="#whyus">Why Us</a>
          <div class="nav-line"></div>
        </li>
        <li><a class="main" href="#contact">Contact</a>
          <div class="nav-line"></div>
        </li>
      </ul>
    </div>
  </div>
</nav>
＆＃13;
＆＃13;
＆＃13;

  1. 我希望边框出现在li容器内，这样就没有额外的线条跨越整个导航栏（悬停时的背景颜色不会覆盖li项目的整个高度，因为存在2px的行。 ）。
  2. 我不想要active li项目的行。

    3. 请帮助我实现这一目标。

2 个答案:

答案 0 :(得分：0)

好的以下代码应该对你有用：

我添加了以下内容 - 相对定位到li，绝对定位到导航，然后是活动导航的透明背景

$(function() {
        $(".dropdown").hover(
            function() { $(this).addClass('open') },
            function() { $(this).removeClass('open') }
        );
    });
.navbar {
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
}

.navbar-default .navbar-nav {
  font-size: 15px;
}

.navbar-fixed-top {
  min-height: 80px;
}

.navbar-nav>li {
    position:relative;
}
.navbar-nav>li>a {
  padding-top: 0px;
  padding-bottom: 0px;
  line-height: 80px;
}

.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus {
  color: #ffffff;
  text-decoration: none;
  outline: 0;
  background-color: #b4a28f;
}

.navbar-nav>li>.nav-line {
  position:absolute; 
  bottom:-1px;
  left:0;
  background-color: #3178b9;
  height: 2px;
  width: 0%;
  /*        -webkit-transition: all 100ms ease-out;
        -moz-transition: all 100ms ease-out;
        -o-transition: all 100ms ease-out;
        transition: all 100ms ease-out;*/
}
.navbar-nav>li:hover>.nav-line {
  background-color: #3178b9;
  height: 2px;
  width: 100%;
  -webkit-transition: all 150ms ease-in;
  -moz-transition: all 150ms ease-in;
  -o-transition: all 150ms ease-in;
  transition: all 150ms ease-in;
}


.navbar-nav>li.active>.nav-line {
    background-color:transparent;
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">

<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="#collapse" aria-expanded="false">
                        <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="">
        <!-- <img class="img img-responsive" src="www/images/srs-logo.jpg" alt="SRS Constructions"> -->
        SRS Constructions
      </a>
    </div>
    <div class="collapse navbar-collapse navbar-right" id="collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a class="main" href="#main">Home <span class="sr-only">(current)</span></a>
          <div class="nav-line"></div>
        </li>
        <li class="dropdown" id="nav-about">
          <a href="#about" class="dropdown-toggle main" role="button" aria-haspopup="true" aria-expanded="false">About
                            </a>
          <div class="nav-line"></div>
          <ul class="dropdown-menu" style="left:0;right: auto">
            <li><a href="about.html">The Founder</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="health-policy.html">HSE Policy</a></li>
            <li><a href="quality-policy.html">Quality Policy</a></li>
          </ul>
        </li>
        <li><a class="main" href="#services">Services</a>
          <div class="nav-line"></div>
        </li>
        <li><a class="main" href="#projects">Our Projects</a>
          <div class="nav-line"></div>
        </li>
        <li><a class="main" href="#whyus">Why Us</a>
          <div class="nav-line"></div>
        </li>
        <li><a class="main" href="#contact">Contact</a>
          <div class="nav-line"></div>
        </li>
      </ul>
    </div>
  </div>
</nav>

答案 1 :(得分：0)

在CSS中添加。

.navbar-nav li.active a.main {     显示：无 }

相关问题
最新问题