创建带有固定位置侧边栏的显示推送菜单

Question

正在尝试创建如下所示的效果：Wanda.net/uk 我的侧边栏 div 在主要内容区域内，触发器在外面，我正在使用 jqPanels 插件来移动这个区域。然而，以我难以置信的新手和笨手笨脚的 jQuery 技能，我无法确定如何编辑脚本以便在触发器激活 push/reveal 时让侧边栏与内容区域一起移动。

Trigger/Sidebar HTML:

<div id="triggerWrap">
    <div id="profile_trigger" class="hide-for-small">
        <div class="reveal"><i class="fi-torso large icon"></i></div>
    </div>
    <div class="revealp panel">
        <span class="close">Close</span> Reveal menu
    </div>
</div>
<div class="row site main">
    <!--Sidebar -->
    <div id="hedWrap" class="hide-for-small">
        <header id="header">
            <div class="sidebar">
                <h5>Juju Skincare</h5>
                <div class="side-nav">
                    <b></b>
                    <a href="#anchor1" id="scrollTo1">Buy Juju Products</a>
                    <a href="#anchor2" id="scrollTo2">Our Story</a>
                    <a href="#anchor3" id="scrollTo3">Ingredients Glossary</a>
                    <a href="#anchor4" id="scrollTo4">Contact Us</a>
                </div>
            </div>
        </header>
    </div>

相关 CSS：

    .site {
position: relative;
height: 100%;
}
#triggerWrap {
    width: 42px;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 101;
    cursor: pointer;
    background: $sand;
}
#profile_trigger {
    width: 42px;
    height: 100%;
    background: $sand;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 101;
    cursor: pointer;
    border-right: 1px solid $beachwood;
    webkit-transition: color .25s linear, background-color .25s ease-in-out;
    -moz-transition: color .25s linear, background-color .25s ease-in-out;
    -o-transition: color .25s linear, background-color .25s ease-in-out;
    transition: color .25s linear, background-color .25s ease-in-out;
}
#profile_trigger .reveal {
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
}
//reveal menu styles (2 rules)
.main.ractive {
    margin-left: 300px;
    width: 100%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
}
.revealp {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
}
#hedWrap {
    position: fixed;
    top: 0;
    left: 42px;
    z-index: 100;
    width: 100%;
    max-width: 280px;
    height: 100%;
    background-color: $sand;
}
#header {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    margin-top: -200px;
    display: block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-height: 100%;
    max-width: inherit !important;
    padding: 3rem 3rem 3rem;
}
.side-nav a {
    display: block;
    width: 100%;
    padding: .25rem;
    color: #A36A32;
}
.side-nav b {
    height: 1px;
    margin: 21px auto 17px auto;
}

jQuery

    $(function(){
var o=$('.overlayp'),r=$('.revealp'),p=$('.pushp'),ob=$('.overlay'),rb=$('.reveal'),pb=$('.push'),m=$('.main'),panel=$('.panel');
  panel.css('min-height',m.outerHeight());

ob.click(function(){
  o.toggleClass('active');
});
rb.click(function(){
  m.toggleClass('ractive');
});
  pb.click(function(){
  m.toggleClass('pactive');
  p.toggleClass('active');
});
  $('.close').click(function(){
    o.removeClass('active');
    p.removeClass('active'); m.removeClass('pactive').removeClass('ractive');
  });
});

我删除了我可怜的代码来为固定的侧边栏设置动画——我又从头开始了，所以任何能给我指明正确方向的见解或任何东西都将不胜感激。非常感谢。

Answer 1

您可以为此使用画布外菜单，在 bootstrap 和 foundation 中实现起来并不简单谢谢

Answer 2

我喜欢你的问题，所以我做了一些工作。查看此代码笔：http://codepen.io/anon/pen/pvRdbm

在我看来它完美无缺。让我知道行为是否不同。

让我们看一下代码：

HTML

<div class="controller inactive">
  <div id="preview" class="column">The reveal preview</div>
  <div id="menu" class="column">The revealed menu</div>
  <div id="content1" class="column">Content 1</div>
  <div id="content2" class="column">Content 2</div>  
</div>

这是一个非常简单的结构。魔术发生在控制器上——它在活动和非活动之间切换。 content2 无关紧要，存在只是为了突出与 wanda.com

的相似之处

CSS

还有很多css，所以我只看相关部分，完整的css在笔中。

.column { float: left; }

#menu { position: absolute; }

#preview {
  z-index: 2;
  position: absolute;
  transition: left 0.5s ease;
}
.inactive #preview { left: 0; }
.active #preview { left: -10%; }

#content1 {
  position: relative;
  z-index: 2;
  transition: margin-left 0.5s ease;
}
.inactive #content1 { margin-left: 10%; }
.active #content1 { margin-left: 20%; }

所有列都是浮动的，因此它们彼此相邻。使用 display: inline-block 应该也可以。

实际菜单有一个绝对位置，所以它只是停留在同一个位置，其他东西可以挂在上面。这也是为什么另一个有 z-index: 2

预览在偏移量 0（非活动）和 -10%（活动）之间切换。你总是需要使用它定义的宽度的负数，所以它会滑出视线。

content1 在定义的预览宽度（非活动）和定义的菜单宽度（活动）之间切换

jQuery（没有插件，使用经典 JS 很容易）

$('#preview').on('mouseover.revealMenu', function() {
  $('.controller').toggleClass('active inactive');

  $('#menu').on('mouseleave.revealMenu', function() {
    hideMenuTimer = setTimeout(hideMenu, 1000);
  });

  $('#menu').on('mouseenter.revealMenu', function() {
    clearTimeout(hideMenuTimer);
  });

});

function hideMenu() {
  $('#menu').off('mouseleave.revealMenu');
  $('.controller').toggleClass('active inactive');
}

首先，当我们鼠标悬停显示菜单时，它会立即在状态之间切换，显示菜单（在流畅的动画中，感谢css-transition！ ).

此外，当我们鼠标悬停时，我们向菜单注册了两个事件：Mouseleave 和mouseenter。当鼠标离开菜单时，我们等待 1 秒，然后隐藏它。如果它再次进入菜单，定时器将重置。

在hideMenu()中，我们也再次解绑mouseleave事件。如果我们不这样做，它会在快速打开和关闭菜单时跳动很多。

就是这样！没有插件（jQuery 除外），代码很少。享受吧！

创建带有固定位置侧边栏的显示推送菜单

Create reveal push menu with fixed position sidebar

html

css

jquery