个人中心
gpt4 book ai didi

CSS 滑出式菜单问题

转载 作者：太空宇宙 更新时间：2023-11-04 04:16:42 25 4
gpt4 key购买 nike

我正在使用 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;
}

菜单现在通过内容显示的任何想法？

最佳答案

从 .main-content 更改背景

例如:

background: inherit;

到

background: white;

演示: Fiddle

关于CSS 滑出式菜单问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19812339/

25 4 0
文章推荐： php - 将十六进制数据从 PHP 传递到外部程序
文章推荐： python - zmq.Context() 在启动几分钟后挂起
文章推荐： python - Anaconda Navigator 无法创建新环境
文章推荐： javascript - 当我第二次单击以将其删除时，Jquery 背景较暗保持黑暗