我有一个展开的导航栏，每当展开的导航打开时，我一直难以实现叠加，就像幻灯片导航打开时youtube的叠加层的显示方式一样。请帮忙。 代码得到了很好的评论。
这是下面扩展导航的javascript代码，我使用了jquery
'use strict';
// Open offsite navigation.
$('#nav-expander').on('click', function(e) {
e.preventDefault();
$('nav').toggleClass('nav-expanded');
});
// Close offsite navigation.
$('.menu .close').on('click', function(e) {
e.preventDefault();
$('nav').toggleClass('nav-expanded');
});
// Close offsite navigation after user click on an link in navigation.
$('.menu a').on('click', function(e) {
//se.preventDefault();
$('nav').removeClass('nav-expanded');
});
$('.body').on('click', function(e) {
//e.preventDefault();
$('nav').removeClass('nav-expanded');
});
$('.body2').on('click', function(e) {
//e.preventDefault();
$('nav').removeClass('nav-expanded');
});
$('.btn').on('click', function(e) {
//e.preventDefault();
$('nav').removeClass('nav-expanded');
});
//ending of offsite navigation/************************************
*************************************
*************************************
GENERAL STYLING
*************************************
*************************************
************************************/
body{
background-color: #F2F3F4;
}
/************************************
GENERAL STYLING ENDING
************************************/
/************************************
*************************************
*************************************
HEADER STYLING
*************************************
*************************************
************************************/
header{
height: 57px;
border-bottom: 1px #DDDDDD solid;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.main__header{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
flex-grow: 1;
}
.header__content__left{
display: flex;
flex-direction: row;
flex-grow: 1;
align-items: center;
}
.header__content__right{
display: inline-flex;
flex-direction: row;
flex-grow: 1;
justify-content: flex-end;
align-items: center;
}
.header__content__right a{
font-weight: 600;
}
.header__margin__right{
margin-right: .5rem;
}
.header__margin__left{
margin-left: 1rem;
}
/************************************
*************************************
*************************************
SLIDE-OUT NAVIGATION STYLING
*************************************
*************************************
************************************/
.menu{
position: relative;
width: 280px;
display: block;
height: 100%;
top: 0;
left:-300px; /*was originally t right when the nav bar was on the right side*/
position: fixed;
z-index: 100;
text-align: center;
transition: left 0.1s; /** default on the right **/
overflow-y: auto; /* makes the expanding nav scrollable */
}
.menu.nav-expanded{
left: 0; /* was at right before, for nav bar to expand from left */
}
.menu .close{
font-size: 30px;
margin-right: 10px;
margin-top:10px;
}
.navbar__header{
height: 50px;
padding: 15px 30px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.nav__items__extra{
padding: 7px 30px 7px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.menu .nav__items{
padding-left: 0;
margin-top: 20px;
margin-bottom: 20px;
}
.menu ul{
list-style: none;
}
.nav__items li{
height: 44px;
}
.menu h4 a{
text-decoration: none;
}
.nav__items a{
text-decoration: none;
font-weight: 500;
}
/************************************
COLORING IN THE NAVBAR
************************************/
.navbar__default {
background: #f4f4f4;
}
.navbar__white {
background: #fff;
}
.navbar__black {
background: #000;
color: #fff;
}
.navbar__header__green{
color: #28B463;
}
.navbar__header__green:hover{
color: #28B463;
}
this is the html code for the expanding navbar.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>bootstrap homepage</title>
<link href="https://fonts.googleapis.com/css?family=Droid+Sans|Droid+Serif|Noto+Sans" rel="stylesheet">
<script src="https://use.fontawesome.com/ebcec35828.js"></script>
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/style.css">
</head>
<body class="">
<!--- This is for the header content -
------------------------------------->
<header class="container-fluid main__header color__white">
<div class="header__content__left">
<a href="#" class="menu-toggle" id="nav-expander"><i class="fa fa-bars header__margin__right" style="font-size:20px;"></i></a>
<div class="color__logo__default">
<a href="#"></a>
<a href="#" class="desktop__responsive__logo"><h4>spaces</h4></a>
</div>
</div>
<div class="header__content__right">
<a href="#" class="fa fa-search"></a>
<a href="#" class="header__margin__left">Log In</a><i class="pl-1"></i>
<a href="#" class="btn btn-post-green text-white header__margin__left">Post</a>
</div>
</header>
<!--- Ending of the header content -
----------------------------------->
<!--- Slide-out navigation - - - - -
----------------------------------->
<nav class="menu navbar__white">
<a href="#" class="close"> <i class="fa fa-close pt-1 pl-2 pr-2 pb-2"></i></a>
<h4><a href="" class="navbar__header navbar__header__green">spaces</a></h4><hr style="margin-top:0px;">
<ul class="nav__items">
<li class="nav__li__style"><a href="#" class="nav__items__extra"> Explore</a></li>
<hr>
<li class="nav__li__style"><a href="#" class="nav__items__extra">About</a></li>
<li class="nav__li__style"><a href="#" class="nav__items__extra">Guidelines</a></li>
<li class="nav__li__style"><a href="#" class="nav__items__extra">Help and Support</a></li>
<li class="nav__li__style"><a href="#" class="nav__items__extra">Contact Us</a></li>
</ul>
</nav>
<!--- Ending of navigation - - - - -
----------------------------------->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
答案 0 :(得分：3)
这样的东西？
您必须添加一个overlay div，其固定位置将覆盖整个屏幕，然后您必须将其z-index设置为低于导航面板但高于其他所有在您的案例设置z-index: 99中，您的css中的元素效果很好。
最后，由于您使用的是jquery，因此您可以show()和hide()与导航栏一起使用。
'use strict';
// Open offsite navigation.
$('#nav-expander').on('click', function(e) {
e.preventDefault();
$('nav').toggleClass('nav-expanded');
$('.overlay').show();
});
// Close offsite navigation.
$('.menu .close').on('click', function(e) {
e.preventDefault();
$('nav').toggleClass('nav-expanded');
$('.overlay').hide();
});
// Close offsite navigation after user click on an link in navigation.
$('.menu a').on('click', function(e) {
//se.preventDefault();
$('nav').removeClass('nav-expanded');
$('.overlay').hide();
});
$('.body').on('click', function(e) {
//e.preventDefault();
$('nav').removeClass('nav-expanded');
$('.overlay').hide();
});
$('.body2').on('click', function(e) {
//e.preventDefault();
$('nav').removeClass('nav-expanded');
$('.overlay').hide();
});
$('.btn').on('click', function(e) {
//e.preventDefault();
$('nav').removeClass('nav-expanded');
$('.overlay').hide();
});
//ending of offsite navigation/************************************
*************************************
*************************************
GENERAL STYLING
*************************************
*************************************
************************************/
body{
background-color: #F2F3F4;
}
.overlay{
position: fixed;
display: none;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(0,0,0,0.8);
z-index: 99;
}
/************************************
GENERAL STYLING ENDING
************************************/
/************************************
*************************************
*************************************
HEADER STYLING
*************************************
*************************************
************************************/
header{
height: 57px;
border-bottom: 1px #DDDDDD solid;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.main__header{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
flex-grow: 1;
}
.header__content__left{
display: flex;
flex-direction: row;
flex-grow: 1;
align-items: center;
}
.header__content__right{
display: inline-flex;
flex-direction: row;
flex-grow: 1;
justify-content: flex-end;
align-items: center;
}
.header__content__right a{
font-weight: 600;
}
.header__margin__right{
margin-right: .5rem;
}
.header__margin__left{
margin-left: 1rem;
}
/************************************
*************************************
*************************************
SLIDE-OUT NAVIGATION STYLING
*************************************
*************************************
************************************/
.menu{
position: relative;
width: 280px;
display: block;
height: 100%;
top: 0;
left:-300px; /*was originally t right when the nav bar was on the right side*/
position: fixed;
z-index: 100;
text-align: center;
transition: left 0.1s; /** default on the right **/
overflow-y: auto; /* makes the expanding nav scrollable */
}
.menu.nav-expanded{
left: 0; /* was at right before, for nav bar to expand from left */
}
.menu .close{
font-size: 30px;
margin-right: 10px;
margin-top:10px;
}
.navbar__header{
height: 50px;
padding: 15px 30px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.nav__items__extra{
padding: 7px 30px 7px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.menu .nav__items{
padding-left: 0;
margin-top: 20px;
margin-bottom: 20px;
}
.menu ul{
list-style: none;
}
.nav__items li{
height: 44px;
}
.menu h4 a{
text-decoration: none;
}
.nav__items a{
text-decoration: none;
font-weight: 500;
}
/************************************
COLORING IN THE NAVBAR
************************************/
.navbar__default {
background: #f4f4f4;
}
.navbar__white {
background: #fff;
}
.navbar__black {
background: #000;
color: #fff;
}
.navbar__header__green{
color: #28B463;
}
.navbar__header__green:hover{
color: #28B463;
}
this is the html code for the expanding navbar.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>bootstrap homepage</title>
<link href="https://fonts.googleapis.com/css?family=Droid+Sans|Droid+Serif|Noto+Sans" rel="stylesheet">
<script src="https://use.fontawesome.com/ebcec35828.js"></script>
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/style.css">
</head>
<body class="">
<div class="overlay">
</div>
<!--- This is for the header content -
------------------------------------->
<header class="container-fluid main__header color__white">
<div class="header__content__left">
<a href="#" class="menu-toggle" id="nav-expander"><i class="fa fa-bars header__margin__right" style="font-size:20px;"></i></a>
<div class="color__logo__default">
<a href="#"></a>
<a href="#" class="desktop__responsive__logo"><h4>spaces</h4></a>
</div>
</div>
<div class="header__content__right">
<a href="#" class="fa fa-search"></a>
<a href="#" class="header__margin__left">Log In</a><i class="pl-1"></i>
<a href="#" class="btn btn-post-green text-white header__margin__left">Post</a>
</div>
</header>
<!--- Ending of the header content -
----------------------------------->
<!--- Slide-out navigation - - - - -
----------------------------------->
<nav class="menu navbar__white">
<a href="#" class="close"> <i class="fa fa-close pt-1 pl-2 pr-2 pb-2"></i></a>
<h4><a href="" class="navbar__header navbar__header__green">spaces</a></h4><hr style="margin-top:0px;">
<ul class="nav__items">
<li class="nav__li__style"><a href="#" class="nav__items__extra"> Explore</a></li>
<hr>
<li class="nav__li__style"><a href="#" class="nav__items__extra">About</a></li>
<li class="nav__li__style"><a href="#" class="nav__items__extra">Guidelines</a></li>
<li class="nav__li__style"><a href="#" class="nav__items__extra">Help and Support</a></li>
<li class="nav__li__style"><a href="#" class="nav__items__extra">Contact Us</a></li>
</ul>
</nav>
<!--- Ending of navigation - - - - -
----------------------------------->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>