好吧...我卡住了...又...
(仅供引用，这是我自己编写的第一个网站(不是模板)，所以不要以为我什么都知道。)
我正在努力使我的主页更具移动性/屏幕尺寸更小。最大的问题之一是我的导航栏在移动设备上太大，以至于为了看到完整的导航栏，您必须向右滚动，这确实破坏了网站的美感。我已尽力在我的网站中实现 flexnav 之类的功能，但未能成功:
一个。成为移动设备上的滑出/推出菜单，由汉堡菜单触发(最好像本教程中的样式 2 一样动画:http://callmenick.com/post/animating-css-only-hamburger-menu-icons)
B.汉堡包菜单和导航栏的背景都是透明的。 B1.保留我的导航栏的配色方案
C.当屏幕宽度小于 1200 像素时，从完整导航栏切换到汉堡菜单。
我知道我的要求很多，但希望有人能够帮助我。当我在 JSBin 中提交我的代码时，如果你能做同样的事情(或者如果你更喜欢 Codepen 或 JSFiddle 或其他)，那将非常有帮助。而且我确信这种适应屏幕尺寸的导航栏的时尚方法会受到许多发现自己处于与我相同情况的人的赞赏。另外，对于困惑的代码，我们深表歉意。
JSFBin:http://jsbin.com/jefosiweci/edit?html,css,js,output
代码:
<meta name="robots" content="noindex">
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<link rel="stylesheet" href="CSS/main.css">
<link rel="stylesheet" href="CSS/animate.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<title>Lor emIp sumDo lorSita</title>
<link rel="stylesheet" href="CSS/lightbox.min.css">
<script src="https://use.typekit.net/pzl7njn.js"></script>
<link href="CSS/flexnav.css" rel="stylesheet" type="text/css" / >
</script>
<script>
try {
Typekit.load({
async: false
});
} catch (e) {}
</script>
<script src="JS/wow.min.js"></script>
<script>
new WOW().init();
</script>
<style id="jsbin-css">
/*----- Responsive Nav Start Credit - http://tinyurl.com/qepfqon -----*/
.clearfix:after {
display: block;
clear: both;
}
/*----- Menu Outline -----*/
.menu-wrap {
width: 100%;
background: #DAE6EB;
margin: 0px auto
}
.menu {
width: 1200px;
margin: 0px;
margin-bottom: -55px;
opacity: 5;
}
.menu li {
margin: 0px;
list-style: none;
font-family: 'industry';
font-size: 18px;
}
.menu a {
transition: all linear 0.15s;
color: #98a1a4;
font-size: 18px;
}
.menu li:hover > a,
.menu li:active > a,
.menu .current-item > a {
text-decoration: none;
color: #414546;
font-size: 18px;
}
.menu .arrow {
font-size: 11px;
line-height: 0%;
}
/*----- Top Level -----*/
.menu > ul > li {
float: left;
display: inline-block;
position: relative;
font-size: 18px;
}
.menu > ul > li > a {
padding: 10px 40px;
display: inline-block;
}
.menu > ul > li:hover > a,
.menu > ul > li:active > a,
.menu > ul > .current-item > a {
background: #98a1a4;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu,
.menu li:active {
z-index: 1;
opacity: 1;
}
.sub-menu {
width: 160%;
padding: 5px 0px;
position: absolute;
top: 100%;
left: 0px;
z-index: -1;
opacity: 0;
transition: opacity linear 0.15s;
background: #98a1a4B;
text-align: left;
}
.sub-menu li {
display: block;
font-size: 18px;
}
.sub-menu li a {
padding: 10px 10px;
display: block;
font-size: 18px;
}
.sub-menu li a:hover,
.sub-menu li a:active,
.sub-menu .current-item a {
background: #98a1a4;
}
/*Jumbotron. Ignore*/
.jumbotron {
background-image: url('https://images.unsplash.com/photo-1450849608880-6f787542c88a?crop=entropy&fit=crop&fm=jpg&h=1000&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925');
background-repeat: no-repeat;
background-position: center top;
margin-top: 0px;
margin-bottom: -0px;
}
.jumbotron .container {
position: relative;
left: auto;
right: auto;
height: 100vh;
width: 100vw;
padding: 100px 0;
text-align: center;
}
.jumbotron h1 {
color: #fff;
font-size: 84px;
font-family: "industry", sans-serif;
font-style: normal;
font-weight: 900;
text-shadow: 3px 3px #000;
}
.jumbotron p {
font-size: 24px;
font-family: "industry", sans-serif;
font-style: italic;
font-weight: 1000;
color: #f7f7f7;
}
</style>
</head>
<section id="Top">
</section>
</div>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix" data-breakpoint="1200">
<li class="current-item wow fadeInDown"><a href="#"><i class="fa fa-home fa"></i> Lore</a></li>
<li class="wow fadeInDown delay05"><a href="#"><i class="fa fa-user fa"></i> mIpsu mD</a></li>
<li class="wow fadeInDown delay05"><a href="#"><i class="fa fa-map fa"></i> olorS</a></li>
<li class="wow fadeInDown delay15"><a href="#"><i class="fa fa-bolt fa"></i> itAmet.L</a></li>
<li class="wow fadeInDown delay2"><a href="#"><i class="fa fa-paint-brush fa"></i> or emIps</a></li>
<li class="wow fadeInDown delay25"><a href="#"><i class="fa fa-envelope fa"></i> umDolor</a></li>
<li class="wow fadeInDown delay3"><a href="/blog/index.html"><i class="fa fa-pencil fa"></i> Sita</a></li>
</ul>
</nav>
</div>
<div class="jumbotron">
<div class="container">
<h1 class="wow fadeInLeft Big">Lor emIp sumDo lorSitA</h1>
<p class="wow fadeInRight delay1">metLorem Ip sumDo lorSitAm.</p>
<div class="container">
<ul class="actions">
<li class="wow fadeInUp Big delay2"><a href="#one" class="button special scrolly"><i class="fa fa-chevron-down fa"></i></a></li>
</ul>
</div>
</div>
</div>
最佳答案
我看到您已经在使用 Bootstrap。 Bootstrap 让你很容易做到这一点，因为他们已经内置了它，你只需要使用他们的结构。下面我将他们的导航栏结构放入您现有的代码中。我已经取出了您拥有的菜单 css，并添加了几行 css 来帮助您入门。您可以乱用 css 并根据自己的喜好进行更改，但它看起来应该与您的设置几乎相同。在这段代码中，nav 将有一个 navbar-default 类，我给它设置了一个 none 背景和一个绝对顶部的位置，以保持它在页面的顶部和 100% 的宽度。它的内部是一个导航栏标题和一个导航栏折叠。在 navbar-header 中是你的菜单汉堡包，bootstrap 已经设置了样式并给了 javascript 以 767px 的最大宽度打开。然后 navbar-collapse 是你有你的链接的地方，我已经给出了透明黑色的媒体查询样式背景。所以当你到达 767 像素时，它将被隐藏，直到你点击汉堡包。这一切都内置在 Bootstraps 框架中，使开发人员可以很容易地开始他们的网站。我希望这有帮助。这是您修改后的代码，您应该可以按原样复制和粘贴它:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<link rel="stylesheet" href="CSS/main.css">
<link rel="stylesheet" href="CSS/animate.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<title>Lor emIp sumDo lorSita</title>
<link rel="stylesheet" href="CSS/lightbox.min.css">
<script src="https://use.typekit.net/pzl7njn.js"></script>
<link href="CSS/flexnav.css" rel="stylesheet" type="text/css" / >
</script>
<script>
try {
Typekit.load({
async: false
});
} catch (e) {}
</script>
<script src="JS/wow.min.js"></script>
<script>
new WOW().init();
</script>
<style id="jsbin-css">
/*----- Responsive Nav Start Credit - http://tinyurl.com/qepfqon -----*/
.clearfix:after {
display: block;
clear: both;
}
.navbar-default {
background:none;
margin:0;
position:absolute;
top:0;
left:0;
width:100%;
border:none;
z-index:1;
}
.navbar-default .navbar-nav>li>a {
font-size:18px;
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a.active{
background:#98a1a4;
color:#333;
}
@media screen and (max-width: 767px){
.navbar-collapse{background:rgba(0,0,0,0.8);}
}
/*Jumbotron. Ignore*/
.jumbotron {
background-image: url('https://images.unsplash.com/photo-1450849608880-6f787542c88a?crop=entropy&fit=crop&fm=jpg&h=1000&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925');
background-repeat: no-repeat;
background-position: center top;
margin-top: 0px;
margin-bottom: -0px;
}
.jumbotron .container {
position: relative;
left: auto;
right: auto;
height: 100vh;
width: 100vw;
padding: 100px 0;
text-align: center;
}
.jumbotron h1 {
color: #fff;
font-size: 84px;
font-family: "industry", sans-serif;
font-style: normal;
font-weight: 900;
text-shadow: 3px 3px #000;
}
.jumbotron p {
font-size: 24px;
font-family: "industry", sans-serif;
font-style: italic;
font-weight: 1000;
color: #f7f7f7;
}
</style>
</head>
<section id="Top">
</section>
<nav role="navigation" class="navbar navbar-default">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="wow fadeInDown"><a class="active" href="#"><i class="fa fa-home fa"></i> Lore</a></li>
<li class="wow fadeInDown delay05"><a href="#"><i class="fa fa-user fa"></i> mIpsu mD</a></li>
<li class="wow fadeInDown delay05"><a href="#"><i class="fa fa-map fa"></i> olorS</a></li>
<li class="wow fadeInDown delay15"><a href="#"><i class="fa fa-bolt fa"></i> itAmet.L</a></li>
<li class="wow fadeInDown delay2"><a href="#"><i class="fa fa-paint-brush fa"></i> or emIps</a></li>
<li class="wow fadeInDown delay25"><a href="#"><i class="fa fa-envelope fa"></i> umDolor</a></li>
<li class="wow fadeInDown delay3"><a href="/blog/index.html"><i class="fa fa-pencil fa"></i> Sita</a></li>
</ul>
</div>
</nav>
<div class="jumbotron">
<div class="container">
<h1 class="wow fadeInLeft Big">Lor emIp sumDo lorSitA</h1>
<p class="wow fadeInRight delay1">metLorem Ip sumDo lorSitAm.</p>
<div class="container">
<ul class="actions">
<li class="wow fadeInUp Big delay2"><a href="#one" class="button special scrolly"><i class="fa fa-chevron-down fa"></i></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
关于javascript - 当屏幕太小时，将导航栏变成汉堡推出/滑出菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34755547/