如何隐藏导航条时,当覆盖出现
How to hide navbar when when overlay appears
使用W3schools 'Sidenav Overlay'的代码,我试图在Bootstrap中创建相同的效果。我有。navbar-toggle浮动在左边,当覆盖向右移动时,navbar toggle仍然显示。不知道如何隐藏导航栏切换时,覆盖出现。第一个帖子,谢谢
CSS .navbar {
webkit-box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.49);
moz-box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.49);
box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.49);
background-color: white;
padding: 5px;
}
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
top: 5px;
text-align: center;
margin: auto;
}
.navbar-toggle {
z-index:3;
border: none;
cursor: pointer;
float: left;
}
.navbar-toggle a:hover {
border: none;
background-color: none;
cursor: pointer;
}
/* The side navigation menu */
.sidenav {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0;
left: 0;
background-color: #111; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
transition: margin-left .5s;
padding: 20px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
HTML <header>
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="slide-nav">
<div class="container">
<div class="navbar-header">
<a class="navbar-toggle" onclick="openNav()">
<span class="sr-only" >Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="navbar-brand" href="#">Test Nav</a>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
</div>
</div>
</div>
</header>
Javascript /* Set the width of the side navigation to 250px */
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
/* Set the width of the side navigation to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
为.sidenav class添加z-index为99而不是1
.sidenav {
background-color: #111;
height: 100%;
left: 0;
overflow-x: hidden;
padding-top: 60px;
position: fixed;
top: 0;
transition: all 0.5s ease 0s;
width: 0;
z-index: 99;
}
它会帮助你的。试试这个
$(".navbar-toggle").click(function(e) {
e.preventDefault();
$("#mySidenav").toggleClass("activeclass");
});
$(".closebtn").click(function(e) {
e.preventDefault();
$("#mySidenav").removeClass("activeclass");
});
.navbar {
webkit-box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.49);
moz-box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.49);
box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.49);
background-color: white;
padding: 5px;
}
.sidenav.activeclass{width:250px;}
.sidenav{width:0px;}
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
top: 5px;
text-align: center;
margin: auto;
}
.navbar-toggle {
z-index:3;
border: none;
cursor: pointer;
float: left;
}
.navbar-toggle a:hover {
border: none;
background-color: none;
cursor: pointer;
}
/* The side navigation menu */
.sidenav {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0;
left: 0;
background-color: #111; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
transition: margin-left .5s;
padding: 20px;
}
/* On s
maller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="slide-nav">
<div class="container">
<div class="navbar-header">
<a 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>
</a>
<a class="navbar-brand" href="#">Test Nav</a>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
</div>
</div>
</div>
</header>
希望这对你有帮助!下面是工作示例
/*!
* Start Bootstrap - Simple Sidebar HTML Template (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
/* Toggle Styles */
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
@media(min-width:768px) {
#wrapper {
padding-left: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Simple Sidebar - Start Bootstrap Template</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Custom CSS -->
<link href="sidebar.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style media="screen">
/*body { padding-top: 70px; }*/
#connectLogo {
height: 60px;
padding: 15px 0 5px 0;
}
#logo {
height: 60px;
padding: 5px 0 5px 20px;
}
.share-link {
line-height: 60px;
padding: 0 1em;
font-size: 2em;
}
</style>
</head>
<body>
<nav class="navbar navbar-default NOnavbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed menu-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>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<span class="glyphicon glyphicon-share hidden-xs pull-right share-link" aria-hidden="true"></span>
<!-- Collect the nav links, forms, and other content for toggling -->
<img class="center-block" id="connectLogo" src="http://app.talkfusion.com/connect_r/images/title-videochat.svg" alt="">
<!-- <div id="btnShare" style="display: none;"><img src="share.svg" width="22" alt="share"></div> -->
</div>
<!--
<button type="button" class="share-link hidden-xs pull-right">
<span class="sr-only">Share link</span>
<span class="glyphicon glyphicon-link"></span>
</button> -->
</div>
</nav>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Start Bootstrap
</a>
</li>
<li>
<a href="#">Dashboard</a>
</li>
<li>
<a href="#">Shortcuts</a>
</li>
<li>
<a href="#">Overview</a>
</li>
<li>
<a href="#">Events</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>Simple Sidebar</h1>
<p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
<a href="#menu-toggle" class="btn btn-default menu-toggle">Toggle Menu</a>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- Menu Toggle Script -->
<script>
$(".menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
</html>
相关文章:
- 在循环中分配json值时,值被覆盖
- 谷歌地图固定位置覆盖
- 单击顶部导航时如何进行向下滚动效果(向下滑动).
- angular 1.5应用程序中的导航栏
- 只覆盖箭头键滚动事件
- 无法从jquery Mobile导航栏重定向到另一个页面
- 由视频覆盖的引导导航栏 - 如何用不透明背景覆盖它
- 覆盖默认选项卡导航
- 在 CSS 中覆盖 HTML 导航栏
- 无法使用我自己的 css 从引导程序上的导航栏覆盖底部边距
- 画布外导航:如何在不覆盖正文的情况下,在一级菜单的顶部滑入二级菜单
- 需要按钮来显示和隐藏覆盖导航
- 覆盖文字不隐藏,启动和关闭覆盖导航不工作
- 覆盖DHTMLX树形结构中的OOTB上下导航功能
- 如何隐藏导航条时,当覆盖出现
- 覆盖AngularJS输入字段中的关键导航
- 修正了当位置动态给定时导航条覆盖内容的问题
- Sencha Touch 2:如何覆盖导航视图上的后退按钮
- 是否可以找出函数导航器插件是否已被覆盖
- 自定义导航器在文档加载后被覆盖