Question

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

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

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

以下代码：

＆＃13;

@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;
}

＆＃13;

<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>

＆＃13;

Answer 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>

_{我不是bootstrap用户所以我不知道bootstrap特定类}

在悬停上创建扩展导航栏

1 个答案: