0

私はトップコート（topcoat.io）、backbone.js、およびPhonegapをモバイルアプリのIm builingに使用しています。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;
}

メニューがコンテンツを通して表示されるようになった理由はありますか?

4

1 に答える 1

2

背景を変更.main-content

例えば：

background: inherit;

に

background: white;

デモ: フィドル

于 2013-11-06T12:44:40.973 に答える