如何自定义导航栏中悬停的大小？

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在学习引导 我正在尝试创建一个导航栏，当我们向下滚动时，它会缩小，并且还想让我在全尺寸的链接上进行悬停，但我尝试了太多但我无法完成。请帮助我使这个导航栏全高度悬停在链接上。以下是代码中，我写道：如何自定义导航栏中悬停的大小？

HTML代码

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container-fluid" id="fullheader"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span>       
     </button> 
     <a class="navbar-brand" href="#">WebSiteName</a> 
    </div> 
    <div> 
     <div class="collapse navbar-collapse navbar-right" id="myNavbar"> 
     <ul class="nav navbar-nav"> 
      <li><a href="#section1">Section 1</a></li> 
      <li><a href="#section2">Section 2</a></li> 
      <li><a href="#section3">Section 3</a></li> 
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#section41">Section 4-1</a></li> 
       <li><a href="#section42">Section 4-2</a></li> 
      </ul> 
      </li> 
     </ul> 
     </div> 
    </div> 
    </div> 
</nav>

CSS代码

.navbar{ 
    width: 100%; 
    padding: 40px 0; 
    background-color:#FFf; 
    border-bottom: 1px solid #e1e1e1; 
    /* animation magic */ 
    transition: all 0.4s ease-in-out; 
    -webkit-transition: all 0.4s ease-in-out; 
    -moz-transition: all 0.4s ease-in-out ; 
    z-index: 9999; 
    top: 0; 
    position: fixed; 
    } 
.navbar-default{ 
background-color:#fff !important;} 
.shrink{ 
    padding: 10px 0; 
} 
.navbar-default .navbar-brand{ 
    font-size: 30px; 
    -webkit-transition: all 0.4s ease-out; 
    transition: all 0.4s ease-out; 
} 
.navbar-default .navbar-brand,.navbar-default .navbar-brand:hover{ 
    color: #646464; 
    margin-left: 80px !important; 
} 
.shrink .navbar-brand{ 
    font-size: 20px; 
} 
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>.active>a{ 
    background-color: #00CCFF!important; 
    display:block; 
} 
.navbar-default .navbar-nav>li>a{ 
    color: #FF0000 !important; 
    font-size: 16px; 
    font-weight: 500; 
}

js代码

$(document).ready(function(){ 
     $('body').scrollspy({target: ".navbar", offset: 50}); 
     $("#myNavbar a").on('click', function(event) { 
     if (this.hash !== "") { 
      event.preventDefault(); 
      var hash = this.hash; 
      $('html, body').animate({ 
      scrollTop: $(hash).offset().top 
      }, 800, function(){ 
      window.location.hash = hash; 
      }); 
     } 
     }); 
    }); 
$(window).scroll(function(){ 
      $scrol=$(document).scrollTop(); 
      //console.log($scrol); 
      if($scrol > 100){ 
       $(".navbar").addClass("shrink"); 
      } 
      else 
      { 
       $(".navbar").removeClass("shrink"); 
      } 
     });

回答：

你的意思是这样的吗？ codepen.io

.navbar{ 
    width: 100%; 
    background-color:#FFf; 
    border-bottom: 1px solid #e1e1e1; 
    /* animation magic */ 
    transition: all 0.4s ease-in-out; 
    -webkit-transition: all 0.4s ease-in-out; 
    -moz-transition: all 0.4s ease-in-out ; 
    z-index: 9999; 
    top: 0; 
    position: fixed; 
    } 
.navbar-default{ 
background-color:#fff !important; 
min-height: auto;} 
.navbar-default .navbar-nav>li>a { 
    margin: 0 10px; 
    padding: 40px 0; 
    -webkit-transition: all 0.4s ease-in-out; 
    -moz-transition: all 0.4s ease-in-out ; 
} 
.shrink.navbar-default .navbar-nav>li>a, 
.shrink.navbar-default .navbar-brand { 
    padding: 10px 0; 
    height: 40px; 
} 
.navbar-default .navbar-brand{ 
    padding: 40px 0; 
    font-size: 30px; 
    -webkit-transition: all 0.4s ease-out; 
    transition: all 0.4s ease-out; 
    min-height: auto; 
height: auto; 
} 
.navbar-default .navbar-brand,.navbar-default .navbar-brand:hover{ 
    color: #646464; 
    margin-left: 80px !important; 
} 
.shrink .navbar-brand{ 
    font-size: 20px; 
} 
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>.active>a{ 
    background-color: #00CCFF!important; 
    display:block; 
} 
.navbar-default .navbar-nav>li>a{ 
    color: #FF0000 !important; 
    font-size: 16px; 
    font-weight: 500; 
}

回答：

好的，我认为@尼古拉·科斯托夫的回答在滚动右侧缩小了。这是你想要悬停全尺寸，这样的东西？

body {height: 2000px;} 
.navbar{ 
    width: 100%; 
    background-color:#FFf; 
    border-bottom: 1px solid #e1e1e1; 
    /* animation magic */ 
    transition: all 0.4s ease-in-out; 
    -webkit-transition: all 0.4s ease-in-out; 
    -moz-transition: all 0.4s ease-in-out ; 
    z-index: 9999; 
    top: 0; 
    position: fixed; 
    } 
.navbar-default{ 
background-color:#fff !important; 
min-height: auto;} 
.navbar-default .navbar-nav>li>a { 
    margin: 0 10px; 
    padding: 40px 0; 
    -webkit-transition: all 0.4s ease-in-out; 
    -moz-transition: all 0.4s ease-in-out ; 
} 
.shrink.navbar-default .navbar-nav>li>a, 
.shrink.navbar-default .navbar-brand { 
    padding: 10px 0; 
    height: 40px; 
} 
.navbar-default .navbar-brand{ 
    padding: 40px 0; 
    font-size: 30px; 
    -webkit-transition: all 0.4s ease-out; 
    transition: all 0.4s ease-out; 
    min-height: auto; 
height: auto; 
} 
.navbar-default .navbar-brand,.navbar-default .navbar-brand:hover{ 
    color: #646464; 
    margin-left: 80px !important; 
} 
.shrink .navbar-brand{ 
    font-size: 20px; 
} 
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>.active>a{ 
    background-color: #00CCFF!important; 
    font-size: 30px; 
    display:block; 
} 
.navbar-default .navbar-nav>li>a{ 
    color: #FF0000 !important; 
    font-size: 16px; 
    font-weight: 500; 
}

以上是 如何自定义导航栏中悬停的大小？ 的全部内容， 来源链接： utcz.com/qa/265307.html

回到顶部