Добавить поле к границе нижней части активной навигационной ссылки, не затрагивая текст - PullRequest
Новая
       11

Добавить поле к границе нижней части активной навигационной ссылки, не затрагивая текст

0 голосов
/ 26 апреля 2018

Я работал над своим Bootstrap Nav и вроде как с этим справился, но каким-то образом боролся с этим, чтобы сделать нижнюю границу активной ссылки для определения ширины текста, а не контейнера, в котором она находится Таким образом, для этого возникла идея добавить некоторое поле к нижней части активной ссылки. После многочисленных усилий все, что я получаю, это испорченный пользовательский интерфейс. Мне нужна ваша помощь, ребята, было бы здорово узнать кое-что сегодня.

КОД

Попытка добавить фрагмент кода, но навигация Bootstrap не работает нормально.

HTML 

<!doctype html>
<html lang="en">
  <head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">    
  </head>
  <body>

     <!-- Just an image -->
     <nav class="navbar navbar-expand-lg navbar-light bg-light">
       <div class="container">
         <a class="navbar-brand" href="#home" style="border-bottom: none">HOME</a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
         </button>
         <div class="col-lg-3"></div>
         <div class="pt-lg-0 pt-3 collapse navbar-collapse" id="navbarNavAltMarkup">
         <div class="navbar-nav">
            <a class="nav-item nav-link" href="#section-1">SECOND PAGE</a>
            <a class="nav-item nav-link" href="#section-2">THIRD PAGE</a>
        </div>
       </div>
      </div>
    </nav>

    <section class="testimonial home-page" id="home">
      <div class="container">
        <h1>Bringing ease to<br>each home</h1>
        <div class="d-none d-sm-block" style="margin-top: 350px"></div>
      </div>
    </section>

   <section class="testimonial home-page" id="section-1">
      <div class="container">
        <h1>Second Page</h1>
        <div class="d-none d-sm-block" style="margin-top: 350px"></div>
      </div>
   </section>

   <section class="testimonial home-page" id="section-2">
     <div class="container">
        <h1>Third Page</h1>
        <div class="d-none d-sm-block" style="margin-top: 350px"></div>
     </div>
   </section>
</body>
</html>

CSS 

.navbar {
   top: 0px;
   width: 100%;
   z-index: 999;
   display: block;
   padding: 20px !important;
   position: fixed!important;
   -webkit-backface-visibility: hidden
 }

 .navbar-nav a {line-height: normal}
 .home-page H1 {padding-top: 219px;color: #616161}
 .active {color: grey!important; border-bottom: 5px solid #8ABE25}

JAVASCRIPT ДЛЯ АКТИВНОЙ ССЫЛКИ 

$(document).ready(function () {
  $('.navbar div a').click(function(event){
    //remove all pre-existing active classes
    $('.active').removeClass('active');

    //add the active class to the link we clicked
    $(this).addClass('active');
  });
});

То, что я пробовал из этого это это: 

.active { 
  position: fixed!important;
  content: '';
  border-bottom: 1px solid #d2d7da;
  width: 70%;
  transform: translateX(-50%);
  bottom: -15px;
  left: 50%;
}

испортил мой пользовательский интерфейс. Также попытался box-sizing: border-box, но не получилось в моем случае.

РЕЗУЛЬТАТ Я хочу вот так:

Design to be achieved

Это моя ссылка JsFiddle: Результат JsFiddle Если панель навигации не открывается, просим развернуть результат, чтобы вы могли увидеть другой вариант, не знаю, почему JsFiddle ведет себя странно. Любая помощь будет оценена.

1 Ответ

0 голосов
/ 26 апреля 2018 

$(document).ready(function () {
$('.navbar div a').click(function(event){
        //remove all pre-existing active classes
        $('.active').removeClass('active');

        //add the active class to the link we clicked
        $(this).addClass('active');
    });
});
.navbar {
  top: 0px;
  width: 100%;
  z-index: 999;
  display: block;
  padding: 20px !important;
  position: fixed!important;
  -webkit-backface-visibility: hidden
}

.navbar-nav a {line-height: normal}
.home-page H1 {padding-top: 219px;color: #616161}
.active span {color: grey!important; position: relative; display: inline-block;}

.active span:after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-4px;
    height: 5px;
    background-color: #8ABE25;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">    
  </head>
  <body>
  
    <!-- Just an image -->
    <nav class="navbar navbar-expand navbar-light bg-light">
      <div class="container">
        <a class="navbar-brand" href="#home" style="border-bottom: none">
          HOME
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="col-lg-3"></div>
        <div class="pt-lg-0 pt-3 collapse navbar-collapse" id="navbarNavAltMarkup">
          <div class="navbar-nav">
            <a class="nav-item nav-link" href="#section-1"><span>SECOND PAGE INFORMATION</span></a>
            <a class="nav-item nav-link" href="#section-2"><span>THIRD PAGE</span></a>
            <a class="nav-item nav-link" href="#section-2"><span>FOURTH PAGE</span></a>
            <a class="nav-item nav-link" href="#section-2"><span>FIFTH PAGE</span></a>
            <a class="nav-item nav-link" href="#section-2"><span>SIXTH PAGE</span></a>
          </div>
        </div>
      </div>
    </nav>
    
    <section class="testimonial home-page" id="home">
      <div class="container">
        <h1>Bringing ease to<br>each home</h1>
        <div class="d-none d-sm-block" style="margin-top: 350px"></div>
      </div>
    </section>
    
    <section class="testimonial home-page" id="section-1">
      <div class="container">
        <h1>Second Page</h1>
        <div class="d-none d-sm-block" style="margin-top: 350px"></div>
      </div>
    </section>
    
    <section class="testimonial home-page" id="section-2">
      <div class="container">
        <h1>Third Page</h1>
        <div class="d-none d-sm-block" style="margin-top: 350px"></div>
      </div>
    </section>
  </body>
</html>

оберните ваш текст span и задайте следующий стиль. 

.active span {color: grey!important; position: relative; display: inline-block;}

.active span:after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-4px;
    height: 5px;
    background-color: #8ABE25;
}
...