1
我不确定我的功能是否错误，或者有什么我错过输入的地方，但每次打开我的html页面时，nav已打开。全屏叠加在页面加载时打开
该功能正确关闭，一旦在覆盖层上的任何位置点击就可以正确打开，但唯一的问题是，当我加载页面时，nav已经打开。
//Toggle of burgermenu
$(document).ready(function() {
$(".burger a").click(function() {
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
});
});
$('.overlay').on('click', function() {
$(".overlay").fadeToggle(200);
$(".burger a").toggleClass('btn-open').toggleClass('btn-close');
open = false;
});
//toggle transparency on scroll
$(window).scroll(function() {
if($(this).scrollTop() > 50) /*height in pixels when the navbar becomes non opaque*/
{
$('.navbar-default').addClass('opaque');
} else {
$('.navbar-default').removeClass('opaque');
}
});/* NAVBAR */
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 100%;
width: auto;
padding: 15px;
margin-top: 0px;
margin-left: 10px;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
z-index: 99;
border: none;
}
.navbar-default {
background-color: rgba(0, 0, 0, 0.0);
height: 50px;
transition: background-color .5s ease 0s;
}
.navbar-default .navbar-toggle {
border-color: rgba(221, 221, 221, 0);
}
.navbar-header {
float: none;
}
.navbar-default.opaque {
height: 50px;
background-color: rgba(51, 51, 61, 0.8);
transition: background-color .5s ease 0s;
border-radius: 0;
}
#nav-container {
padding: 0px;
}
#burgerimg {
margin: 0px;
margin-right: 10px;
margin-top: 10px;
}
/*Overlay*/
.overlay {
position: fixed;
top: 0;
height: 100%;
width: 100%;
background: #33333d;
z-index: 99;
}
a.headlink {
font-size: 26px;
opacity: 0.3;
}
a.headlink :hover {
opacity: 1;
}
.wrap {
color: #e9e9e9;
text-align: center;
max-width: 90%;
margin: 0 auto;
}
.wrap ul.wrap-nav {
text-transform: capitalize;
padding: 150px 0px 100px;
}
.wrap ul.wrap-nav li {
display: inline-block;
vertical-align: top;
width: 15%;
}
.wrap ul.wrap-nav li a {
color: #fff;
display: block;
text-decoration: none;
transition-property: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-webkit-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
}
.wrap ul.wrap-nav li a:hover {
opacity: 1;
}
.wrap ul.wrap-nav ul li {
display: block;
width: 100%;
color: #e9e9e9;
}
.wrap ul.wrap-nav ul li a {
font-size: 12px;
font-family: 'Roboto', sans-serif;
font-weight: 100;
}
.wrap ul.wrap-nav ul li a {
color: #fff;
opacity: 0.3;
}
.wrap ul.wrap-nav ul li a:hover {
color: #34B484;
opacity: 1;
}
.wrap img {
margin: 0px;
margin-bottom: 30px;
}
@media screen and (max-width:48em) {
.wrap ul.wrap-nav>li {
width: 100%;
padding: 20px 0;
border-bottom: 1px solid #575757;
}
.wrap ul.wrap-nav {
padding: 30px 0px 0px;
}
nav ul {
opacity: 0;
visibility: hidden;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container" id="nav-container">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="images/Logo.png" align="left" alt="logo"></a>
<div class="burger">
<a class="btn-open" href="#"><img id="burgerimg" align="right" src="images/burger.png"></a>
</div>
</div>
</div>
</nav>
<div class="overlay">
<div class="wrap">
<ul class="wrap-nav">
<li>
<a href="#" class="headlink"><img src="images/prod-icon.png">
<BR>Products</a>
<ul>
<li><a href="#">Product Brief</a></li>
<li><a href="#">Getting Started</a></li>
<li><a href="#">Technology</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!--END NAVBAR-->
<h1>WEBPAGE AND ETC</h1>
只需添加'显示：无;'你'.overlay'类 –
修复了片段，必须使用'https'，并且jquery缺失。 .. – kukkuz