我正在使用 topcoat (topcoat.io)、backbone.js 和 Phonegap 构建移动应用程序。我想创建一个 Facebook 风格的滑出式菜单。这是教程的链接:http://outof.me/navigation-drawer-pattern-with-topcoat-css-library/
这是工作正常的 jsfiddle:http://jsfiddle.net/webintelligence/vPef6/1/
基本上它看起来像:
<body>
<div class="topcoat-navigation-bar">
...
</div>
<nav class="side-nav">
...
</nav>
<div class="main-content">In the content</div>
</body>
重要的CSS是:
body{
font-family: source-sans-pro, sans-serif;
position: relative;
width: 100%;
height:100%;
overflow: hidden;
-webkit-font-smoothing: antialiased;
}
.side-nav {
display:block;
position:absolute;
top:0;
left:0;
width:320px;
height:100%;
background-color:#353535;
}
.main-content {
position: absolute;
background: inherit;
left: 0;
padding-top:4rem;
width:100%;
height:100%;
transition: left 0.2s ease-out;
-webkit-transition: left 0.2s ease-out;
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
-moz-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.57);
-webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.57);
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.57);
}
因为我的应用程序包含许多过渡进出的模板(在这个简单的库的帮助下:https://github.com/ccoenraets/PageSlider)，我需要在正文之后和内容周围有一个标签。但是，当我这样做时，可以在主要内容后面看到菜单。这是 jsfiddle:http://jsfiddle.net/webintelligence/TLNyY/
我为 div 添加了 css(复制主体 css):
div.current-page{
margin:0;
padding:0;
height: 100%;
font-family: source-sans-pro, sans-serif;
position: relative;
width: 100%;
height:100%;
overflow: hidden;
-webkit-font-smoothing: antialiased;
}
菜单现在通过内容显示的任何想法？
最佳答案
关于CSS 滑出式菜单问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19812339/