İstediği budur

off canvas menu kullanarak CSS ve JavaScript kullanıyorum. Kapalı tuval menü amaçlandığı gibi çalışıyor. Ekranın sol ve menü tetiklendiğinde birlikte hareket eden bir kenar çubuğu menü istiyorum. Fikri 100px arasında 0 bir yüksekliğe sahip bir menü tetik var ve her zaman ekranın sol. Pozisyon tüm tarayıcılarda yüksekliği ile ilgili sorunlar vardı mutlak kullanarak, sabit pozisyon Firefox kullanarak gayet iyi çalışıyor ama sorunları aşağıda belirtilen karşılaşır.

Hatalar

Firefox Sorunları:Yok, anladığım kadarıyla.

Chrome Sorunları:Kenar Çubuğu aşağı birkaç piksel kaydırma sonra menü tetik sayfanın tamamını esneme yapmaz.

Internet Explorer:Kenar Çubuğu Kenar Çubuğu menü tetiklendiğinde tamamen yok gibi görünüyor.

jsFiddle

Benim kodu, HTML, CSS ve JavaScript üzerinde ağır olduğu için jsFiddle bir yer var. Lütfen sorun sadece Chrome ve Internet Explorer üzerinde bildiğim kadarıyla oluştuğunu unutmayın. Sayfayı aşağı kaydırma sorunu biraz çoğaltmak ve daha sonra sol taraftaki menü düğmesi yan tıklayarak yapabilirsiniz.

Ekran görüntüleri

LAYIK HTML KODU (Keman Tam Kod) NOT

<div id="sbContainer" class="sbContainer">
    <div class="sbPush">
        <header class="contain-to-grid sbMenu sbFX">
            <nav class="top-bar" data-topbar>
                <ul class="title-area show-for-small-only"><!--SITENAME--></ul>
                <section class="top-bar-section"><!--LINKS--></section>
            </nav>
        </header>
        <div class="sbContent-one">
            <div class="sbContent-two">
                <div class="sbMenuTrigger" data-effect="sbFX"><!--SIDEBAR TRIGGER--></div>
                <div class="sbMainContent" role="document"><!--PAGE CONTENT--></div>
            </div>
        </div>
    </div>
</div>

DEĞERLİ CSS KODU (Keman Tam Kod) NOT

html, body, .sbContainer, .sbPush, .sbContent-one {
    height:100%
}
.sbContent-one {
    overflow-x:hidden;
    background:#fff;
    position:relative
}
.sbContainer {
    position:relative;
    overflow:hidden
}
.sbPush {
    position:relative;
    left:0;
    z-index:99;
    height:100%;
    -webkit-transition:-webkit-transform .5s;
    transition:transform .5s
}
.sbPush::after {
    position:absolute;
    top:0;
    right:0;
    width:0;
    height:0;
    background:rgba(0,0,0,0.2);
    content:'';
    opacity:0;
    -webkit-transition:opacity 0.5s,width .1s 0.5s,height .1s .5s;
    transition:opacity 0.5s,width .1s 0.5s,height .1s .5s
}
.sbMenu-open .sbPush::after {
    width:100%;
    height:100%;
    opacity:1;
    -webkit-transition:opacity .5s;
    transition:opacity .5s
}
.sbMenu {
    position:absolute;
    top:0;
    left:0;
    z-index:100;
    visibility:hidden;
    width:244px;
    height:100%;
    background:#872734;
    -webkit-transition:all .5s;
    transition:all .5s
}
.sbMenu::after {
    position:absolute;
    top:0;
    right:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.2);
    content:'';
    opacity:1;
    -webkit-transition:opacity .5s;
    transition:opacity .5s
}
.sbMenu-open .sbMenu::after {
    width:0;
    height:0;
    opacity:0;
    -webkit-transition:opacity 0.5s,width .1s 0.5s,height .1s .5s;
    transition:opacity 0.5s,width .1s 0.5s,height .1s .5s
}
.sbFX.sbMenu-open .sbPush {
    -webkit-transform:translate3d(300px,0,0);
    transform:translate3d(244px,0,0)
}
.sbFX.sbMenu {
    -webkit-transform:translate3d(-100%,0,0);
    transform:translate3d(-100%,0,0)
}
.sbFX.sbMenu-open .sbFX.sbMenu {
    visibility:visible;
    -webkit-transition:-webkit-transform .5s;
    transition:transform .5s
}
.sbFX.sbMenu::after {
    display:none
}
.no-csstransforms3d .sbPush,.no-js .sbPush {
    padding-left:244px
}
.sbMenuTrigger {
    background-color:#b23445;
    cursor:pointer;
    height:100%;
    width:100px;
    position:fixed;
    left:0;
    top:0
}
.sbMainContent {
    margin-left:100px;
    width:calc(100% - 100px);
    top:0;
    padding-top:50px;
    position:absolute;
    height:100%
}

Burada çok küçük değişiklikler gerektiren bir iş çevresinde bir.

Sürekli FF son sürüm, Chrome, ve/10 İE11 çalışır.

Updated Example

.sbContent-one {
  overflow: visible;       /* Or remove overflow-x: hidden */
}
.sbMainContent {
  overflow-x: hidden;
}
.sbMenuTrigger {
  position: static;        /* Or remove position: fixed */
}

Chrome sorunu gidermek için en kolay yolu sadece .sbMainContent .sbContent-one overflow hareket etmektir. Bunu yaparken, aslında .sbMainContent kardeş bir madde olduğu .sbMenuTrigger eleman sorunu çözer) son ilerleyebilirsiniz.

Şu anda many inconsistencies fixed elementler transformed using translate3d positioned relative to elements nasıl etrafında tarayıcınıza vardır. YANİ sorunu fixed elemanları pencereye göre hesap translate3d kullanarak değişime uğrayan unsurlar almadan yerleştirilmiş olması nedeniyle oldu. Bu sabit konumlandırma tamamen önlemek çözmek için, ve öğe .sbMenuTrigger position: fixed kaldırarak normal akışına Ekle (veya position: static varsayılan bu geçersiz kılma). Bunu yaparken, kenar çubuğunu beklendiği gibi genişler.

Diğer bir deyişle:

• .sbContent-one overflow-x: hidden (ya da overflow: visible ile onu devreden çıkarın.
• .sbMainContent 21 *ekleyin.
• .sbMenuTrigger position: fixed (ya da position: static ile onu devreden çıkarın.