我正在尝试使用flyout div构建一个布局，非常类似于此页面上的“你是谁”标签：http://www.fanshawec.ca/。
我发现的所有示例都是在幻灯片放映或屏幕错误时按下整个网站，如下所示：http://blog.themearmada.com/off-canvas-slide-menu-for-bootstrap/
有没有人为引导程序遇到类似这样的东西？
谢谢！
答案 0 :(得分：1)
您几乎需要将所有正确的CSS定位更改为左侧，将相同的位置更改为
所以，这样的事情
right: ?;
变为
left: ?;
以及类似的东西
transition: right 0.4s ease-in-out 0s; -webkit-transition: right 0.4s ease-in-out 0s; -moz-transition: right 0.4s ease-in-out 0s; -o-transition: right 0.4s ease-in-out 0s;
变为
transition: left 0.4s ease-in-out 0s;
-webkit-transition: left 0.4s ease-in-out 0s;
-moz-transition: left 0.4s ease-in-out 0s;
-o-transition: left 0.4s ease-in-out 0s;
请参阅下面修改过的代码修改版本（信用问题中提到的http://blog.themearmada.com/off-canvas-slide-menu-for-bootstrap/）。我已经评论了CSS /* changed ...
$(document).ready(function(){
//Navigation Menu Slider
$('#nav-expander').on('click',function(e){
e.preventDefault();
$('body').toggleClass('nav-expanded');
});
$('#nav-close').on('click',function(e){
e.preventDefault();
$('body').removeClass('nav-expanded');
});
// Initialize navgoco with default options
$(".main-menu").navgoco({
caret: '<span class="caret"></span>',
accordion: false,
openClass: 'open',
save: true,
cookie: {
name: 'navgoco',
expires: false,
path: '/'
},
slide: {
duration: 300,
easing: 'swing'
}
});
});/* SECTION 1 */
a.nav-expander {
background: none repeat scroll 0 0 #000000;
color: #FFFFFF;
display: block;
font-size: 15px;
font-weight: 400;
height: 50px;
margin-right: 0;
padding: 1em 1.6em 2em;
position: absolute;
left: 0; /* changed */
text-decoration: none;
text-transform: uppercase;
top: 0;
transition: left 0.3s ease-in-out 0s; /* changed */
width: 130px;
z-index: 12;
transition: left 0.3s ease-in-out 0s; /* changed for this and the 3 lines below */
-webkit-transition: left 0.3s ease-in-out 0s;
-moz-transition: left 0.3s ease-in-out 0s;
-o-transition: left 0.3s ease-in-out 0s;
}
a.nav-expander:hover {
cursor: pointer;
}
a.nav-expander.fixed {
position: fixed;
}
.nav-expanded a.nav-expander.fixed {
left: 20em; /* changed */
}
/* SECTION 2 */
nav {
background: #2d2f33;
display: block;
height: 100%;
overflow: auto;
position: fixed;
left: -20em; /* changed */
font-size: 15px;
top: 0;
width: 20em;
z-index: 2000;
transition: left 0.3s ease-in-out 0s; /* changed for this and the 3 lines below */
-webkit-transition: left 0.3s ease-in-out 0s;
-moz-transition: left 0.3s ease-in-out 0s;
-o-transition: left 0.3s ease-in-out 0s;
}
.nav-expanded nav {
left: 0; /* changed */
}
body.nav-expanded {
margin-left: 0em;
transition: left 0.4s ease-in-out 0s; /* changed for this and the 3 lines below */
-webkit-transition: left 0.4s ease-in-out 0s;
-moz-transition: left 0.4s ease-in-out 0s;
-o-transition: left 0.4s ease-in-out 0s;
}
#nav-close {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 300;
font-size: 24px;
padding-right: 10px;
}
/* SECTION 3 */
.main-menu {
padding-top: 12px;
}
.main-menu li {
border-bottom: 1px solid #323949;
margin-left: 20px;
font-size: 18px;
padding: 12px;
}
.main-menu li a {
color: #6F7D8C;
text-decoration: none;
}
.main-menu li a:hover {
color: #FFFFFF;
text-decoration: none;
}
.main-menu li .sub-nav {
border-bottom: 0px;
padding: 4px;
}
.main-menu a .caret {
width: 0;
height: 0;
display: inline-block;
vertical-align: top;
border-top: 4px solid #4f5963;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: "";
margin-top: 8px;
}
.main-menu a:hover .caret {
border-top-color: #4f5963;
}
.main-menu li.open > a > .caret {
border-top: none;
border-bottom: 4px solid #4f5963;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
.main-menu li.open > a:hover > .caret {
border-bottom-color: #4f5963;
}
.icon:before {
font-family: 'FontAwesome';
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1;
text-transform: none;
content: '\f105';
}
.main-menu li > a > span.icon {
float: right;
margin: 0.1em 1.7em -0.1em 0;
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.main-menu li > a:hover > span.icon {
float: right;
margin: 0.1em 0.8em -0.1em 0;
opacity: 1;
}<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.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav>
<ul class="list-unstyled main-menu">
<!--Include your navigation here-->
<li class="text-right"><a href="#" id="nav-close">X</a></li>
<li><a href="#">Menu One <span class="icon"></span></a></li>
<li><a href="#">Menu Two <span class="icon"></span></a></li>
<li><a href="#">Menu Three <span class="icon"></span></a></li>
<li><a href="#">Dropdown</a>
<ul class="list-unstyled">
<li class="sub-nav"><a href="#">Sub Menu One <span class="icon"></span></a></li>
<li class="sub-nav"><a href="#">Sub Menu Two <span class="icon"></span></a></li>
<li class="sub-nav"><a href="#">Sub Menu Three <span class="icon"></span></a></li>
<li class="sub-nav"><a href="#">Sub Menu Four <span class="icon"></span></a></li>
<li class="sub-nav"><a href="#">Sub Menu Five <span class="icon"></span></a></li>
</ul>
</li>
<li><a href="#">Menu Four <span class="icon"></span></a></li>
<li><a href="#">Menu Five <span class="icon"></span></a></li>
</ul>
</nav>
<div class="navbar navbar-inverse navbar-fixed-top">
<!--Include your brand here-->
<a class="navbar-brand" href="#">Off Canvas Menu</a>
<div class="navbar-header pull-right">
<a id="nav-expander" class="nav-expander fixed">
MENU <i class="fa fa-bars fa-lg white"></i>
</a>
</div>
</div>