移動導航菜單的左側和右側

我在計算我的移動導航時遇到了一些麻煩。我有一個在左邊，一個在右邊，他們應該滑出去。左邊的工作正常，但正確的只是彈出，沒有過渡。移動導航菜單的左側和右側

我一直在盯着過去4個小時的CSS，搞亂了一些轉換。我不確定它爲什麼沒有順利出現，但其他所有方面都起作用。

下面是一些代碼的jsfiddle：http://jsfiddle.net/Etn6q/

我開始使用本教程： http://coding.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/

<div id="outer-wrap"> 
    <div id="inner-wrap"> 

     <div id="top_mobile_bar" class="clearfix"> 
      <a class="nav-btn" id="nav-open-btn" href="#nav">Menu</a> 
      <a class="nav-btn" id="info-open-btn" href="#info">Info</a> 
     </div>

而且我有一定的style.css樣式和調整移動彈出菜單。 CSS。這就是我所有的轉折點：

.csstransforms3d.csstransitions.js-ready #info .block { 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 
    opacity: 1; 
    transition: all 0.2s ease 0s; 

    -webkit-transition:   opacity 300ms 100ms, -webkit-transform 500ms ease; 
    -webkit-transition-delay: ease, 0s; 
    -moz-transition:   opacity 300ms 100ms ease, -moz-transform 500ms ease; 
    -o-transition:    opacity 300ms 100ms ease, -o-transform 500ms ease; 
    transition:     opacity 300ms 100ms ease, transform 500ms ease; 

    -webkit-transform: translate3d(15%, 0, 0) scale3d(0.9, 0.9, 0.9); 
    -moz-transform: translate3d(15%, 0, 0) scale3d(0.9, 0.9, 0.9); 
    -ms-transform: translate3d(15%, 0, 0) scale3d(0.9, 0.9, 0.9); 
    -o-transform: translate3d(15%, 0, 0) scale3d(0.9, 0.9, 0.9); 
    transform: translate3d(15%, 0, 0) scale3d(0.9, 0.9, 0.9); 

    -webkit-transform-origin:0; 
    -moz-transform-origin:0; 
    -ms-transform-origin:0; 
    -o-transform-origin:0; 
    transform-origin:0; 
}

我不確定這是否是問題代碼。這可能是JavaScript，我把它附加到我的jsFiddle。任何幫助，將不勝感激！

來源

2014-03-28 amandathewebdev

嗨Antu，你想要的東西就像當你點擊菜單時，它的相應塊會滑落，當你點擊信息時，它的相應塊會滑下來嗎？你想要int與CSS或jQuery對你很好嗎？ –

嗨普拉文，我有菜單設置滑出，不下來，但它推動主要內容（內部包裝）放在一邊，並顯示出來。我的問題是右滑動菜單。 CSS是可取的，但如果它修復它，jQuery是好的。謝謝！ – amandathewebdev

以及這可能不完全相似於你的設計，但幾乎在那裏 - http://jsfiddle.net/nicooprat/Aahqh/ ans類似的一步一步教程 - http://www.webdesignermag.co.uk/tutorials/create-quick -css3-only-menus-for-mobile /希望它有幫助！ –

我花了一段時間，但我明白了。對於任何可能在將來遇到同樣問題的人而言，我不得不將我的JavaScript分成兩部分（main-L.js和main-R.js），其中一個用於左側，另一個用於右側菜單。我還必須爲新的JavaScript文件添加另一個換行。基本上我只是在類的最後添加了一個R，它應用於js和CSS中的右菜單。

<div id="outer-wrap"> 
<div id="inner-wrap"> 
<div id="inner-wrapR"><!--added wrap here--> 

    <div id="top_mobile_bar" class="clearfix"> 
     <a class="nav-btn" id="nav-open-btn" href="#nav">Menu</a> 
     <a class="nav-btn" id="info-open-btn" href="#info">Info</a> 
    </div>

這是我無法識別控制平滑動畫的CSS位。當我嘗試在菜單本身上進行轉換時，它是需要樣式的＃內部包裝。

 .csstransforms3d.csstransitions.js-navR #inner-wrap { 
      -webkit-transform: translate3d(-38%, 0, 0) scale3d(1, 1, 1); 
      -moz-transform: translate3d(-38%, 0, 0) scale3d(1, 1, 1); 
      -ms-transform: translate3d(-38%, 0, 0) scale3d(1, 1, 1); 
      -o-transform: translate3d(-38%, 0, 0) scale3d(1, 1, 1); 
      transform: translate3d(-38%, 0, 0) scale3d(1, 1, 1); 
     }

來源

2014-03-28 22:10:50 amandathewebdev

移動導航菜單的左側和右側

回答

相關問題