Javascript 移动设备上的Bootstrap 3滑入菜单动画方向_Javascript_Jquery_Html_Css_Twitter Bootstrap

Javascript 移动设备上的Bootstrap 3滑入菜单动画方向

javascript jquery html css twitter-bootstrap

Javascript 移动设备上的Bootstrap 3滑入菜单动画方向,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,按下切换图标（“汉堡图标”）时，如何更改导航菜单方向的默认幻灯片我想实现一个类似于www.shopify.com在他们网站的移动版上使用的效果：（这里是一个简短的视频演示，介绍我试图实现的目标）提前非常感谢。以下是打造这种风格的方法 JS 我已经重新更新了演示，你想要的效果我已经得到了你之前发布的方式以下是构建这种风格的方法 JS 我已经重新更新了演示，你想要的效果我已经得到了你之前发布的方式这是你的小提琴如果您花费更多的时间，代码可以优化到最少的行数 <div class="n

按下切换图标（“汉堡图标”）时，如何更改导航菜单方向的默认幻灯片

我想实现一个类似于www.shopify.com在他们网站的移动版上使用的效果：（这里是一个简短的视频演示，介绍我试图实现的目标）

提前非常感谢。

以下是打造这种风格的方法

我已经重新更新了演示，你想要的效果我已经得到了你之前发布的方式

以下是构建这种风格的方法

我已经重新更新了演示，你想要的效果我已经得到了你之前发布的方式

这是你的小提琴如果您花费更多的时间，代码可以优化到最少的行数

<div class="navbar navbar-inverse 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="#">Project name</a>
        </div>
        <div id="slidemenu">
            <a class="close">X</a>
            <ul class="nav navbar-nav">
                <li class="active">
                    <a href="#">Menu</a>
                </li>
                <li>
                    <a href="#">Menu</a>
                </li>
                <li>
                    <a href="#">Menu</a>
                </li>

            </ul>

        </div>
    </div>
</div>
<div id="page-content">
    <div class="container">
        <h1 class="no-margin-top">Left Sidebar menu</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!
        </p>
    </div>
</div>

$（文档）.ready（函数（）{
$（'#滑动导航条反转'）。在（$（''）之后；
$（'#滑动导航.navbar默认值'）。在（$（''）之后；
var slidewidth='20%'；
var navbarneg='-'+滑动宽度；
如果（$（窗口）.width（）<767）{
$（“#导航栏高度列”）.css（“宽度”，滑动宽度）；
$（'#navbar height col'）.css（“左”，navbarneg）；
$（'slidenav#slidemenu'）.css（“宽度”，slidewidth）；
$（'slidenav#slidemenu'）.css（“左”，navbarneg）；
}
$（'slidemenu.close'）。在（'click'，function（）上{
所选变量=$（'slidemenu'）。hasClass（'slide-active'）；
$（'#slidemenu、.navbar toggle、.navbar header'）.toggleClass（'slide-active'）；
$（“#slidemenu”）.stop（）.animate({
左：选中？导航栏如：“0px”
});
$（'.inverse'）.stop（）.animate({
左：选中？导航栏如：“0px”
});
//警报（1）；
});
$（“#滑动导航”）。打开（“单击”，“导航栏切换”，功能（e）{
//滑块处于活动状态
所选变量=$（this）.hasClass（'slide-active'）；
//设置滑块宽度
$（“#slidemenu”）.stop（）.animate({
左：选中？导航栏如：“0px”
});
//设置导航栏宽度
$（“#导航栏高度列”）.stop（）.animate({
左：选中？导航栏如：“0px”
});
$（this）.toggleClass（'slide-active'，！selected）；
$（'slidemenu'）。toggleClass（'slide-active'）；
$（'.navbar，.navbar header'）.toggleClass（'slide-active'）；
});
所选变量='#slidemenu.navbar，.navbar标题'；
$（窗口）.on（“调整大小”，函数（）{
如果（$（window.width（）>767&&$（'.navbar toggle'）。是（':hidden'））{
$（选定）.removeClass（'slide-active'）；
}
});
});

这是你的小提琴如果您花费更多的时间，代码可以优化到最少的行数

<div class="navbar navbar-inverse 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="#">Project name</a>
        </div>
        <div id="slidemenu">
            <a class="close">X</a>
            <ul class="nav navbar-nav">
                <li class="active">
                    <a href="#">Menu</a>
                </li>
                <li>
                    <a href="#">Menu</a>
                </li>
                <li>
                    <a href="#">Menu</a>
                </li>

            </ul>

        </div>
    </div>
</div>
<div id="page-content">
    <div class="container">
        <h1 class="no-margin-top">Left Sidebar menu</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!
        </p>
    </div>
</div>

$（文档）.ready（函数（）{
$（'#滑动导航条反转'）。在（$（''）之后；
$（'#滑动导航.navbar默认值'）。在（$（''）之后；
var slidewidth='20%'；
var navbarneg='-'+滑动宽度；
如果（$（窗口）.width（）<767）{
$（“#导航栏高度列”）.css（“宽度”，滑动宽度）；
$（'#navbar height col'）.css（“左”，navbarneg）；
$（'slidenav#slidemenu'）.css（“宽度”，slidewidth）；
$（'slidenav#slidemenu'）.css（“左”，navbarneg）；
}
$（'slidemenu.close'）。在（'click'，function（）上{
所选变量=$（'slidemenu'）。hasClass（'slide-active'）；
$（'#slidemenu、.navbar toggle、.navbar header'）.toggleClass（'slide-active'）；
$（“#slidemenu”）.stop（）.animate({
左：选中？导航栏如：“0px”
});
$（'.inverse'）.stop（）.animate({
左：选中？导航栏如：“0px”
});
//警报（1）；
});
$（“#滑动导航”）。打开（“单击”，“导航栏切换”，功能（e）{
//滑块处于活动状态
所选变量=$（this）.hasClass（'slide-active'）；
//设置滑块宽度
$（“#slidemenu”）.stop（）.animate({
左：选中？导航栏如：“0px”
});
//设置导航栏宽度
$（“#导航栏高度列”）.stop（）.animate({
左：选中？导航栏如：“0px”
});
$（this）.toggleClass（'slide-active'，！selected）；
$（'slidemenu'）。toggleClass（'slide-active'）；
$（'.navbar，.navbar header'）.toggleClass（'slide-active'）；
});
所选变量='#slidemenu.navbar，.navbar标题'；
$（窗口）.on（“调整大小”，函数（）{
如果（$（window.width（）>767&&$（'.navbar toggle'）。是（':hidden'））{
$（选定）.removeClass（'slide-active'）；
}
});
});

请在一篇文章中发布您的代码（不是外部链接）（HTML/CSS/JS）的最小工作示例。请参阅和。当我想从左/右而不是从上/下滑动某些内容时，我通常会设置宽度的动画。您可以将菜单设置为位置：绝对；右：0；宽度：0；然后切换一个将宽度设置为100%的类。查看我的演示，你将从中学习。请在一个页面中发布你的代码（不是外部链接）（HTML/CSS/JS）的最小工作示例。请参阅和。当我想从左/右而不是从上/下滑动某些内容时，我通常会设置宽度的动画。您可以将菜单设置为位置：绝对；右：0；宽度：0；然后切换一个将宽度设置为100%的类。查看我的演示，你将从中学习。嗨，Fliido93，非常感谢你的回复，这正是我想要的！；）将它添加到我的项目中，一切似乎都很顺利！嗨，Fliido93，非常感谢您的回复，这正是我想要的！；）将它添加到我的项目中，一切似乎都很顺利！

body.slide-active {
    overflow-x: hidden
}
#page-content {
    position: relative;
    padding-top: 70px;
    left: 0;
}
#page-content.slide-active {
    padding-top: 0
}
#slide-nav .navbar-toggle {
    cursor: pointer;
    position: relative;
    line-height: 0;
    float: left;
    margin: 0;
    width: 30px;
    height: 40px;
    padding: 17px 0 0 0;
    border: 0;
    background: transparent;
}
#slide-nav .navbar-toggle.slide-active .icon-bar {
    background: #CC0F0F;
    color: #CC0F0F;
}
.navbar-header {
    position: relative
}
.navbar.navbar-fixed-top.slide-active {
    position: relative
}
@media (max-width: 767px) {
    #slide-nav .container {
        margin: 0 !important;
        padding: 0 !important;
        height: 100%;
    }
    #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%;
        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;
        margin-top: 40px;
    }
    #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: #333
    }
    #navbar-height-col {
        position: fixed;
        top: 0;
        height: 100%;
        bottom: 0;
        background: #f7f7f7;
    }
    #navbar-height-col.inverse {
        background: #333;
        z-index: 1;
        border: 0;
    }
    #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%
    }
    #slidemenu .close {
        color: white;
        margin: 10px;
    }
}
@media (min-width: 768px) {
    #page-content {
        left: 0 !important
    }
    .navbar.navbar-fixed-top.slide-active {
        position: fixed
    }
    .navbar-header {
        left: 0 !important
    }
}

$(document).ready(function() {
    $('#slide-nav.navbar-inverse').after($('<div class="inverse" id="navbar-height-col"></div>'));
    $('#slide-nav.navbar-default').after($('<div id="navbar-height-col"></div>'));

    var slidewidth = '20%';
    var navbarneg = '-' + slidewidth;

    if ($(window).width() < 767) {
        $('#navbar-height-col').css("width", slidewidth);
        $('#navbar-height-col').css("left", navbarneg);
        $('#slide-nav #slidemenu').css("width", slidewidth);
        $('#slide-nav #slidemenu').css("left", navbarneg);
    }
    $('#slidemenu .close').on('click', function() {
        var selected = $('#slidemenu').hasClass('slide-active');
        $('#slidemenu, .navbar-toggle, .navbar-header').toggleClass('slide-active');
        $('#slidemenu').stop().animate({
            left : selected ? navbarneg : '0px'
        });
        $('.inverse').stop().animate({
            left : selected ? navbarneg : '0px'
        });

        //alert(1);
    });

    $("#slide-nav").on("click", '.navbar-toggle', function(e) {

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

        // set slidemenu width
        $('#slidemenu').stop().animate({
            left : selected ? navbarneg : '0px'
        });

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

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

        $('.navbar,  .navbar-header').toggleClass('slide-active');
    });

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

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