创建offcanvas菜单Jquery的

我试图创建一个移动菜单offcanvas我设法使菜单滑出并滑动内容然而走滑作用似乎被关闭，因为是当它的缝隙滑入和滑出。创建offcanvas菜单Jquery的


 

 
    function openNav() { 
 
     $("#mySidenav").addClass('shifty-show').removeClass('shifty-hidden'); 
 
     $("#main").addClass('shifty-content').removeClass('main'); 
 
    } 
 
function closeNav() { 
 
    $("#mySidenav").removeClass('shifty-show').addClass('shifty-hidden'); 
 
    $("#main").removeClass('shifty-content').addClass('main'); 
 
}

.main { 
 
    left: 0; 
 
} 
 
.shifty-hidden { 
 
    left: -220px; 
 
} 
 
.shifty-show { 
 
    left: 0; 
 
    transition: 0.5s; 
 
} 
 
.shifty-content { 
 
    transition: 0.5s; 
 
    position: relative; 
 
    left: 198px; 
 
    top: 0; 
 
}

来源

2016-04-22 MrNew

变化中，如下所示.shifty隐藏类留下的价值：

.shifty-hidden{ 
    left: -198px; 
}

希望帮助

来源

2016-04-22 08:44:37

编织：http://kodeweave.sourceforge.net/editor/#7439e1585a705f4a0033ccc54124cd89

You can actually do this is Pure CSS!

这其实很简单。

你有一个复选框开始......

<input id="menu" type="checkbox">

这会把我们的菜单。

然后你使用一个标签，你给它一个用于属性，它的价值将是复选框的ID。这样当标签被点击时，它会切换复选框。

<a href="javascript:void(0)"> 
    <label class="fa fa-bars" for="menu"></label> 
</a>

在这种情况下，我想在检查时移动标题。所以首先我要在它被检查之前定位它的位置。 NOTE:transition: all ease-in 300ms;就是创建幻灯片动画。

header { 
    position: absolute; 
    top: 7px; 
    left: 0; 
    transition: all ease-in 300ms; 
}

然后我告诉菜单，当它被选中滑动标题时。

#menu:checked ~ header { 
    left: 50%; 
}

就这么简单！我已经添加了这个片段，所以你可以更多地玩这个游戏。

body { 
 
    font: 15px arial; 
 
    background: #545454; 
 
} 
 
a { 
 
    text-decoration: none; 
 
} 
 
.pointer, a, label { 
 
    cursor: pointer; 
 
} 
 
.fr { 
 
    float: right; 
 
} 
 
header a { 
 
    color: #000; 
 
    font-size: 30px; 
 
    padding: 0 0 0 12px; 
 
} 
 
header a:hover { 
 
    color: #999; 
 
} 
 

 
.navbar a { 
 
    color: #7c7c7c; 
 
    text-decoration: underline; 
 
} 
 
.navbar a:hover { 
 
    color: #b5b5b5; 
 
} 
 

 
/* The menubar */ 
 
input[type=checkbox], 
 
#menu { 
 
    display: none; 
 
} 
 
header { 
 
    position: absolute; 
 
    top: 7px; 
 
    left: 0; 
 
    transition: all ease-in 300ms; 
 
} 
 
.navbar { 
 
    position: absolute; 
 
    top: 0; 
 
    left: -50%; 
 
    right: 100%; 
 
    padding: 1.04em; 
 
    bottom: 0; 
 
    color: #b2b2b2; 
 
    background: #3f3f3f; 
 
    transition: all ease-in 300ms; 
 
    overflow: hidden; 
 
} 
 
#menu:checked ~ .navbar { 
 
    left: 0; 
 
    right: 50%; 
 
} 
 
#menu:checked ~ header { 
 
    left: 50%; 
 
}

<link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet"/> 
 

 
<input id="menu" type="checkbox"> 
 

 
<header> 
 
    <a href="javascript:void(0)"> 
 
    <label class="fa fa-bars" for="menu"></label> 
 
    </a> 
 
    <a href="javascript:void(0)"> 
 
    <i class="fa fa-book"></i> 
 
    </a> 
 
</header> 
 

 
<div class="navbar"> 
 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae vel nihil sed, fuga, ad natus magni beatae! Velit, ducimus unde quis necessitatibus, veniam cum fuga libero neque, fugit dolorem, id! 
 
    </p> 
 
    <a href="javascript:void(0)" class="fr"> 
 
    <label for="menu">Close</label> 
 
    </a> 
 
</div>

来源

2016-04-22 11:14:19

创建offcanvas菜单Jquery的

回答

相关问题