Bootstrap 移动视图导航答案

【问题标题】：Bootstrap mobile view navigationBootstrap 移动视图导航
【发布时间】：2015-01-23 16:23:53
【问题描述】：

当在移动设备上查看页面时，我试图在页面右侧的幻灯片上显示导航。导航当前显示在左侧幻灯片上，但未正确显示。我希望将导航更改为显示在右侧。导航项也不完全可见。我想将幻灯片更改为右侧，并在移动设备上查看时正确显示所有项目。另一个问题是鼠标悬停在背景颜色和淡出效果上。我不想在移动设备上显示背景和淡出效果。在移动设备上查看页面时，搜索按钮和搜索文本框也无法正确显示。我希望按钮显示在左侧，并在按钮旁边放置文本框。

<script type="text/javascript">
$(document).ready(function () {
// calculating margin-left to align it to center;
var width = $('.justified').width();
$('.justified').css('margin-left', '-' + (width / 2) + 'px');

$(".dropdown").hover(
function () {
$('.dropdown-menu', this).stop(true, true).fadeIn("slow");
$(this).toggleClass('open');
$('b', this).toggleClass("caret caret-up");
},
function () {
$('.dropdown-menu', this).stop(true, true).fadeOut("fast");
$(this).toggleClass('open');
$('b', this).toggleClass("caret caret-up");
});

$(".dropdown-toggle").hover(
function () {
$('.dropdown-toggle', this).stop(true, true).fadeIn("slow");
$(this).toggleClass('open');
$('b', this).toggleClass("caret caret-up");
},
function () {
$('.dropdown-toggle', this).stop(true, true).fadeOut("fast");
$(this).toggleClass('open');
$('b', this).toggleClass("caret caret-up");
});


//stick in the fixed 100% height behind the navbar but don't wrap it
$('#slide-nav.navbar .container').append($('<div id="navbar-height-col"></div>'));

// Enter your ids or classes
var toggler = '.navbar-toggle';
var pagewrapper = '#page-content';
var navigationwrapper = '.navbar-header';
var menuwidth = '20%'; // the menu inside the slide menu itself
var slidewidth = '80%';
var menuneg = '-100%';
var slideneg = '-80%';

$("#slide-nav").on("click", toggler, function (e) {

var selected = $(this).hasClass('slide-active');

$('#slidemenu').stop().animate({
left: selected ? menuneg : '0px'
});

$('#navbar-height-col').stop().animate({
left: selected ? slideneg : '0px'
});

$(pagewrapper).stop().animate({
left: selected ? '0px' : slidewidth
});

$(navigationwrapper).stop().animate({
left: selected ? '0px' : slidewidth
});


$(this).toggleClass('slide-active', !selected);
$('#slidemenu').toggleClass('slide-active');


$('#page-content, .navbar, body, .navbar-header').toggleClass('slide-active');


});

var selected = '#slidemenu, #page-content, body, .navbar, .navbar-header';

$(window).on("resize", function () {

if ($(window).width() > 767 && $('.navbar-toggle').is(':hidden')) {
$(selected).removeClass('slide-active');
}

});

});
</script>

<style>
.navbar-back {
color: #fff;
-moz-box-shadow: 0 5px 10px #ccc;
-webkit-box-shadow: 0 5px 10px #ccc;
box-shadow: 0 5px 10px #ccc;
zoom: 1;
filter: progidXImageTransform.Microsoft.Shadow(color=#dddddd,dir ection=0,strength=1), progidXImageTransform.Microsoft.Shadow(color=#dddddd,dir ection=45,strength=1), progidXImageTransform.Microsoft.Shadow(color=#dddddd,dir ection=90,strength=2), progidXImageTransform.Microsoft.Shadow(color=#dddddd,dir ection=135,strength=3), progidXImageTransform.Microsoft.Shadow(color=#cccccc,dir ection=180,strength=10), progidXImageTransform.Microsoft.Shadow(color=#dddddd,dir ection=225,strength=3), progidXImageTransform.Microsoft.Shadow(color=#dddddd,dir ection=270,strength=2), progidXImageTransform.Microsoft.Shadow(color=#dddddd,dir ection=315,strength=1);
background: rgb(0,30,58);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3 N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0Jv eD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZS I+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2Vu ZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZS IgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgog ICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMW UzYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZz ZXQ9IjQyJSIgc3RvcC1jb2xvcj0iIzAwMzQ1ZSIgc3RvcC1vcG FjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc2JSIgc3Rv cC1jb2xvcj0iIzAwMzQ1ZSIgc3RvcC1vcGFjaXR5PSIxIi8+Ci AgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMw MDFlM2EiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3 JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEi IGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZX JhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(0,30,58,1) 0%, rgba(0,52,94,1) 42%, rgba(0,52,94,1) 76%, rgba(0,30,58,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,30,58,1)), color-stop(42%,rgba(0,52,94,1)), color-stop(76%,rgba(0,52,94,1)), color-stop(100%,rgba(0,30,58,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,30,58,1) 0%,rgba(0,52,94,1) 42%,rgba(0,52,94,1) 76%,rgba(0,30,58,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,30,58,1) 0%,rgba(0,52,94,1) 42%,rgba(0,52,94,1) 76%,rgba(0,30,58,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,30,58,1) 0%,rgba(0,52,94,1) 42%,rgba(0,52,94,1) 76%,rgba(0,30,58,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,30,58,1) 0%,rgba(0,52,94,1) 42%,rgba(0,52,94,1) 76%,rgba(0,30,58,1) 100%); /* W3C */
filter: progidXImageTransform.Microsoft.gradient( startColorstr='#001e3a', endColorstr='#001e3a',GradientType=0 ); /* IE6-8 */
border-bottom-color: #D9D4AC;
border-bottom-width: 4px;
}

.dropdown-menu > li > a:hover {
background-color: transparent;
color: rgba(0,52,94,1);
}

.navbar .nav > li > a {
color: #fff !important;
}

.navbar-default .navbar-nav > .open > a:hover {
background-color: transparent;
color: transparent;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:focus {
color: #fff;
background-color: transparent;
}


.justified {
position: absolute;
left: 50%;
}

.dropdown-toggle:hover {
background-color: transparent;
}
/* adjust body when menu is open */
body.slide-active {
overflow-x: hidden;
}
/*first child of #page-content so it doesn't shift around*/
.no-margin-top {
margin-top: 0px !important;
}
/*wrap the entire page content but not nav inside this div if not a fixed top, don't add any top padding */
#page-content {
position: relative;
padding-top: 70px;
left: 0;
}

#page-content.slide-active {
padding-top: 0;
}
/* put toggle bars on the left :: not using button */
#slide-nav .navbar-toggle {
cursor: pointer;
position: relative;
line-height: 0;
float: left;
margin: 0;
width: 30px;
height: 40px;
padding: 10px 0 0 0;
border: 0;
background: transparent;
}
/* icon bar prettyup - optional */
#slide-nav .navbar-toggle > .icon-bar {
width: 100%;
display: block;
height: 3px;
margin: 5px 0 0 0;
}

#slide-nav .navbar-toggle.slide-active .icon-bar {
background: orange;
}

.navbar-header {
position: relative;
color: #fff;
}

/* un fix the navbar when active so that all the menu items are accessible */
.navbar.navbar-fixed-top.slide-active {
position: relative;
}

.navbar .navbar-collapse {
text-align: center;
}
/* screw writing importants and shit, just stick it in max width since these classes are not shared between sizes */
@media (max-width:767px) {
#slide-nav .container {
margin: 0;
padding: 0 !important;
}

#slide-nav .navbar-header {
margin: 0 auto;
padding: 0 15px;
}

#slide-nav .navbar.slide-active {
position: absolute;
width: 80%;
top: -1px;
z-index: 1000;
}

#slide-nav #slidemenu {
background: #f7f7f7;
left: -100%;
width: 80%;
min-width: 0;
position: absolute;
padding-left: 0;
z-index: 2;
top: -8px;
margin: 0;
}

#slide-nav #slidemenu .navbar-nav {
min-width: 0;
width: 100%;
margin: 0;
}

#slide-nav #slidemenu .navbar-nav .dropdown-menu li a {
min-width: 0;
width: 80%;
white-space: normal;
}

#slide-nav {
border-top: 0;
}

#slide-nav.navbar-inverse #slidemenu {
background: #003159;
color: #fff;
}
/* this is behind the navigation but the navigation is not inside it so that the navigation is accessible and scrolls*/
#slide-nav #navbar-height-col {
position: fixed;
top: 0;
height: 100%;
width: 80%;
left: -80%;
background: #eee;
}

#slide-nav.navbar-inverse #navbar-height-col {
background: #003159;
color: #fff;
}

#slide-nav .navbar-form {
width: 100%;
margin: 8px 0;
text-align: center;
overflow: hidden;
/*fast clearfixer*/
}

#slide-nav .navbar-form .form-control {
text-align: center;
}

#slide-nav .navbar-form .btn {
width: 100%;
}

#searchbox {
width: 200px;
}
}

@media (min-width:768px) {
#page-content {
left: 0 !important;
}

.navbar.navbar-fixed-top.slide-active {
position: fixed;
}

.navbar-header {
left: 0 !important;
}
}
</style>

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
    <script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
  
    
    <meta charset=utf-8 />
    <title></title>
</head>
<body>
    <div id="header">
        <a href="#">
            <img id="home_img" class="logo" src="imgs/logo.png" alt="" style="padding-left:20px;" />
        </a>
        <form class="navbar-form navbar-right" role="form" style="padding-right:50px;padding-top:10px;">
            <div class="form-group">
                <button type="submit" class="btn btnSearch">Search</button>

                <input id="searchbox" type="search" class="form-control txtSearch">
            </div>

        </form>

    </div>
    <div>

    </div>
    <div class="navbar navbar-inverse navbar-back" 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>
            </div>
            <div id="slidemenu">

                <ul class="nav navbar-nav justified">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">ITEM A</a>
                        <ul class="dropdown-menu">
                            <li><a href="#">A1</a></li>
                            <li><a href="#">A2</a></li>
                            <li><a href="#">A3</a></li>
                            <li><a href="#">A4</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">ITEM B</a>
                        <ul class="dropdown-menu">
                            <li><a href="#">B1</a></li>
                            <li><a href="#">B2</a></li>
                            <li><a href="#">B3</a></li>
                            <li><a href="#">B4</a></li>
                            <li><a href="#">B5</a></li>

                        </ul>
                    </li>
                    <li><a href="#">ITEM C</a></li>
                    <li><a href="#">ITEM D</a></li>
                    <li><a href="#">ITEM E</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">ITEM F</a>
                        <ul class="dropdown-menu">
                            <li><a href="#">F1</a></li>
                            <li><a href="#">F2</a></li>
                            <li><a href="#">F3</a></li>
                            <li><a href="#">F4</a></li>
                        </ul>
                    </li>
                </ul>

            </div>
        </div>
    </div>

    <!--wrap the page content do not style this-->
    <div id="page-content">

        <div class="container">


        </div>
        <!-- /.container -->

    </div>
    <!-- /#page-content -->

</body>
</html>

【问题讨论】：

标签： html twitter-bootstrap

【解决方案1】：

你的 JS 应该如下改变

$('#navbar-height-col').stop().animate({
left: selected ? slideneg : '0px'
});

$(pagewrapper).stop().animate({
left: selected ? '0px' : slidewidth
});

$(navigationwrapper).stop().animate({
left: selected ? '0px' : slidewidth
});

您的 CSS 应该更改为；

#slide-nav #navbar-height-col {
    position: fixed;
    top: 0;
    height: 100%;
    width: 80%;
    right: -80%;
    background: #eee;
}
#slide-nav #slidemenu {
    background: #f7f7f7;
    right: -100%;
    width: 80%;
    min-width: 0;
    position: absolute;
    padding-left: 0;
    z-index: 2;
    top: -8px;
    margin: 0;
}

【讨论】：