Question

尝试创建类似于此处所见的效果：Wanda.net/uk 我在主要内容区域内有我的侧边栏div，触发器在外面，我使用jqPanels插件来移动这个区域。但是，凭借我令人难以置信的新手和笨拙的jQuery技能，我无法确定如何编辑脚本，以便在触发器激活推/显示时让侧边栏与内容区一起移动。

触发器/补充工具栏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

我喜欢你的问题，所以我做了一些工作。看看这个codepen：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-event。如果我们不那样做，那么在快速打开和关闭菜单时它会猛然晃动。

就是这样！没有插件（除了jQuery），代码非常少。享受！

Answer 2

你可以使用off-canvs菜单，它在bootstrap和基础中实现起来有点简单感谢

使用固定位置侧边栏创建显示推送菜单

2 个答案: