Question

我正在制作幻灯片菜单，

请查看演示网站：

kotechweb.com/new_focus/

在左侧有一个主菜单，当切换时，现在的单词是挤压和隐藏，这是我的实现方式：

 var is_closed = false;
                $("#menu_btn").on("click", function () {
                    if (is_closed) {
                        $(".nav_bar ul").css("width", "75%");
                    } else {
                        $(".nav_bar ul").css("width", "0");
                    }
                    is_closed = !is_closed;
                });

CSS：

transition: all 1s;

所以逻辑是使用转换来实现幻灯片动画，但是，这种方法在宽度较小时会挤压文本。

如何使文本向左滑动？

Answer 1

您可以使用

创建“面具”

#menu_right{
 overflow:hidden;
   ... 
}

以这种方式移动菜单：

var is_closed = false;
            $("#menu_btn").on("click", function () {
                if (is_closed) {
                    $(".nav_bar ul").css("margin-left", "-100%");
                } else {
                    $(".nav_bar ul").css("margin-left", "-0%");
                }
                is_closed = !is_closed;
            });

我认为这就像预期的

Answer 2

首先，在JQuery中使用animate代替使用CSS转换，因为它允许更多功能。

我实际为幻灯片菜单做的是将overflow-x: hidden添加到我的body标签中。然后我将菜单放在页面之外，所以我给它设置了right: 0的CSS值，将它放在页面左侧的外面。

这使我能够做的是，当用户点击菜单按钮时，只需更改right值即可为菜单设置动画，以便最终代码看起来像这样

$("#menu_btn").on("click", function () {
          if (is_closed) {
                        $("#slideoutMenu").animate({right:"[insert width of nav menu]"}, 1000);
                    } else {
                        $("#slideoutMenu").animate({right:"0"}, 1000);
                    }
                    is_closed = !is_closed;
                });

Answer 3

仅使用jquery和jquery ui：Here 在顶部参考下面的代码。

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

在剧本中只添加：

 $(".nav_bar ul").toggle( "slide");

或者也可以使用定制的延时ms单位。

 $( ".nav_bar ul" ).toggle( "slide",2000 );

Answer 4

当侧边栏崩溃时，也许你应该.hide()文字。希望这会有所帮助。

向左滑动并使用jquery或CSS隐藏效果

4 个答案: