在悬停时创建扩展导航栏答案

【问题标题】：Create Extended Navigation Bar on Hover在悬停时创建扩展导航栏
【发布时间】：2016-09-06 15:01:29
【问题描述】：

我正在尝试复制导航栏以匹配此网站的：http://sincerelyjules.com/

我想要做的是将鼠标悬停在导航块上时，它会展开以显示菜单项（请查看上面的网站以获取示例）。

我使用过 Bootstrap 和 CSS，但都无法正常工作。如果有人可以提供一些建议或材料，将不胜感激！为令人难以置信的草率编码道歉。

代码如下：

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 body {
  margin: 0px;
  padding: 0px;
}
.nav-bar-block {
  padding: 9px;
  overflow: hidden;
  background-color: #F8F8F8;
  background-size: cover;
  border-bottom: 1px solid #ebebeb;
  display: block;
}
.nav-bar-block h1 {
  text-align: center;
  font-family: 'Raleway', sans-serif;
  color: #4b4b4b;
  font-size: 60px;
  padding: 0px 200px;
}
.nav-bar-menu {
  list-style-type: none;
}

<html>
<head>
  <!-- css -->
  <link href="https://fonts.googleapis.com/css?family=Raleway:300" rel="stylesheet">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <nav class="navbar-fixed-top">
    <div class="nav-bar-block">
      <h1>Navbar Title</h1>
    </div>
  </nav>
</body>
</html>

【问题讨论】：

标签： jquery html css twitter-bootstrap

【解决方案1】：

您可以通过为导航栏和 CSS 转换设置高度来轻松创建类似的内容.....

body {
     margin: 0;
     padding: 0;       
}


 .nav-bar-block {
   padding: 9px;
   overflow: hidden;
   background-color: #F8F8F8;
   background-size: cover;
   border-bottom: 1px solid #ebebeb;
   display: block;
   height: 100px;
  transition: all 1s ease;
}

.nav-bar-block:hover {
  height: 160px; 
  transition: all 1s ease;
  }

.nav-bar-block h1 {
      text-align: center;
      font-family: 'Raleway', sans-serif;
      color: #4b4b4b;
      font-size: 60px;
      padding: 0px 50px;
      margin: 10px 0 20px 0;
}

.nav-bar-menu {
        list-style-type: none;
      margin: 20px auto;
}

.nav-bar-menu li { 
    display: inline-block;
    margin: 0 10px; }

<link href="https://fonts.googleapis.com/css?family=Raleway:300" rel="stylesheet">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">



<nav class="navbar-fixed-top">
        <div class="nav-bar-block">
            <h1>Navbar Title</h1>
          <ul class="nav-bar-menu">
            <li>Nav item</li>
            <li>Nav item</li>
            <li>Nav item</li>
            <li>Nav item</li>
            <li>Nav item</li>
            <li>Nav item</li>
            <li>Nav item</li>
           </ul>
        </div>
      </nav>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

_{我不是引导用户，所以我不知道引导特定的类}

【讨论】：

谢谢！对此，我真的非常感激。但是，当我将它添加到我的主页时，它并没有居中。目前，显示：inline-block；但这不会使元素居中。此外，我在每个“导航项”上添加了悬停效果，以增加悬停时的字体大小。但是，当悬停在每个“导航项”上时，元素会增加大小并将其他导航项推出其位置。有没有办法以某种方式“修复”导航项目的位置，这样当悬停在每个项目上时它不会破坏导航的流程？感谢大家的帮助！
您想做的一切皆有可能，但我无法在 cmets 中为您构建您的网站。