我正在尝试复制导航栏以匹配此网站的:http://sincerelyjules.com/
我想做的是，当鼠标悬停在导航 block 上时，它会展开以显示菜单项(查看上面的网站示例)。
我使用过 Bootstrap 和 CSS，但都不起作用。如果有人可以提供一些建议或 Material ，将不胜感激!为令人难以置信的草率编码道歉。
代码如下:
@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>最佳答案
通过为导航栏设置高度和 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 特定的类
关于jquery - 在悬停时创建扩展导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39337019/