左右滑动和使用jQuery或CSS

请看看演示网站：

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;

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

如何让文本向左滑动？

来源

2015-10-24 user782104

使用。 'animate' – Tushar

您可以创建一个 “面具” 使用

#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; 
      });

我觉得这就像espected

来源

2015-10-24 16:56:07 cesare

感谢您的帮助，使用保证金比以前好得多 – user782104

也许你应该.hide()侧边栏崩溃时的文字。希望这可以帮助。

来源

2015-10-24 16:51:55 karva

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

我实际上为我的幻灯片菜单添加了overflow-x: hidden到我的身体标记。然后，我将该菜单放置在页面的外部，因此我将它的CSS值设置为right: 0，以将其置于页面左侧外侧。

这是什么让我做的是，当用户点击菜单按钮，你可以动画菜单中通过简单地改变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; 
       });

来源

2015-10-24 17:03:22

只需使用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");

或者也可以使用自定义时间延迟毫秒单位使用。

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

来源

2015-10-24 17:12:24

左右滑动和使用jQuery或CSS

回答

相关问题