Question

ShareThis是一个网站的社交分享窗口小部件，其中每个说法的“侧边栏”都是在页面的最边缘创建的，当点击它时，它会向外滚动并显示共享选项菜单。我需要找到一个jQuery插件或一个允许我模拟这个功能的JavaScript。

我可以在此处找到我想要做的一个示例：页面最左侧的http://support.sharethis.com/customer/portal/articles/475260#sthash.iBn1ZGqT.dpbs。

有没有人知道一个jQuery插件，允许我用我选择的div做这个？当然我必须自己添加一些样式，但启动的库/脚本/插件会有所帮助。

编辑：我已经制作了自定义js解决方案，但现在我想在再次点击时关闭该元素。下面是我的JS在点击时打开元素：

jQuery(function() {
    jQuery('.contact-flyout').bind('click', function() {
        jQuery('.contact-flyout-menu').animate({ marginRight: '0px'}, 500);
        jQuery('.contact-flyout').animate({ marginRight: '150px'}, 500);
    });
});

Answer 1

你可以直接用css做到这一点。基于这篇文章：http://dbushell.github.io/Responsive-Off-Canvas-Menu/step2.html

通过一些修改，您可以实现此目的：http://jsfiddle.net/SrTH4/1/

<!-- I am collapsed by default -->
<nav id="main-navigation" class="navigation">
    <a href="#">Nav Links</a>
    <a href="#">Nav Links</a>
    <a href="#">Nav Links</a>
    <br><br>
    <a href="#">Close</a>
   <!-- more -->
</nav>

<!-- I am full width by default -->
<div class="page-wrap">
  <header>
    <a href="#main-navigation">Menu</a>
    <h1>Title</h1>

    <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>

    <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>

    <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
  </header>

  <!-- content -->
</div>

的CSS：

.navigation {
  background: #ccc;
  width: 60px;
  overflow: hidden;
  position: fixed;
  top: 200px;
  left: -60px;
  height: auto;
  -webkit-transition: left 1s ease;
  transition: left 1s ease;
  z-index: 2;
}

.page-wrap {
  width: 100%;
  float: right;
}

.page-wrap a {
    background: black;
    color: white;
    padding: 5px;
    position: fixed;
    top: 210px;
    left: -10px;
    text-decoration: none;
    z-index: 1;

    -webkit-transform:rotate(90deg);
    transform:rotate(90deg);
}

#main-navigation:target {
  left: 0;
}

Answer 2

我创建了一个自定义jQuery函数来执行此操作。这是我的最终工作结果：

jQuery(function() {
    jQuery('.contact-flyout').bind('click', function() {

        if(jQuery('.contact-flyout-menu').css('margin-right') == "-152px") {
            jQuery('.contact-flyout-menu').animate({ marginRight: '0px'}, 500);
            jQuery('.contact-flyout').animate({ marginRight: '150px'}, 500);
        } else {
            jQuery('.contact-flyout-menu').animate({ marginRight: '-152px'}, 500);
            jQuery('.contact-flyout').animate({ marginRight: '0px'}, 500);
        }

    });
});

像ShareThis这样的粘性弹出侧边栏

2 个答案: