用CSS，Rails，Bourbon和Neat滑出導航

我正在開發我的第一個Rails項目，並且我非常努力嘗試使用波旁/整潔的滑動菜單。我最近的嘗試圍繞嘗試使用CSS：target和Shift（）mixin來實現。我在哪裏打破了在哪裏/如何包含mixin，以及如何/如何實例化實際轉變。這是我在純粹的CSS嘗試...用CSS，Rails，Bourbon和Neat滑出導航

#nav 
    @include span-columns(1) 
    position: fixed 
    left: -240px 
    top: 0 
    bottom: 0 
    background-color: #654 
    border-right: 50px solid #765 
    box-shadow: 4px 0 5px rgba(0,0,0,0.2) 
    z-index: 1 
    cursor: pointer 

#nav:after 
    position: absolute 
    content: ' ' 
    width: 0 
    right: -70px 
    top: 50% 
    border-width: 15px 10px 
    border-style: solid 
    border-color: transparent transparent transparent #765 

#holder 
    @include span-columns(14) 
    position: fixed 
    left: 0 
    top: 0 
    right: 0 
    bottom: 0 
    overflow: auto 
    z-index: 0 
    -webkit-transform-origin: 0 50% 
    -moz-transform-origin: 0 50% 
    -ms-transform-origin: 0 50% 
    -o-transform-origin: 0 50% 
    transform-origin: 0 50% 

#holder:after 
    position: absolute 
    content: ' ' 
    left: 100% 
    top: 0 
    right: 0 
    bottom: 0 
    background-image: -webkit-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%) 
    background-image: -moz-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%) 
    background-image: -ms-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%) 
    background-image: -o-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%) 
    background-image: linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%) 
    pointer-events: none

這描述了兩個元素（導航和持有人）的定位。理論上，導航幾乎完全離開畫布，並在懸停時滑動。但是，這根本沒有發生。正在發生的事情是，導航直接顯示在持有者身上，持有者被拖到導航下。沒有什麼是畫布的，沒有任何變化。下面我將發佈轉換的CSS和生成的html。

#holder, #holder:after, #hav, #nav:after 
    -webkit-transition: all 600ms ease 
    -moz-transition: all 600ms ease 
    -ms-transition: all 600ms ease 
    -o-transition: all 600ms ease 
    transition: all 600ms ease 

#nav:hover 
    left: 0 

#nav:hover ~ #holder 
    -webkit-transform: translateX(16em) perspective(600px) rotateY(10deg) 
    -moz-transform: translateX(16em) perspective(600px) rotateY(10deg) 
    -ms-transform: translateX(16em) perspective(600px) rotateY(10deg) 
    -o-transform: translateX(16em) perspective(600px) rotateY(10deg) 
    transform: translateX(16em) perspective(600px) rotateY(10deg) 

#nav:hover ~ #holder:after 
    left: 60%

和..

 <body id="body"> 
    <div class="nav"> 
    <ul> 
    <li>First Link</li> 
    <li>Second Link</li> 
    <li>Third Link</li> 
    <li>Fourth Link</li> 
    </ul> 
</div> 
    <div class="holder"> 
    <div id="logo"> 
    <a href="index.html"><img alt="LoGo" src="/assets/etlogo.png" /></a> 
    </div> 
    <div id="tsol"> 
    </div>

我已經看過了Shift鍵（）混入了純淨，但它珍貴的小文件。我真的不知道這是否會對我有用，或者如果是這樣的話如何實施。在整理文檔中總共有3行。任何幫助，提示，或者，真的，不是非常侮辱的任何事情都將不勝感激。

來源

2013-08-21 Blind Fish

這個問題不太適合StackOverflow。我建議修改它以包含說明您使用菜單時遇到的**特定**問題的代碼。我們不能真正幫助你，除非說「是的，世界上有人可能使用某種滑動菜單與這些CSS框架」 – deefour

不夠公平。問題是我已經嘗試了很多不同的變體，我可以發佈20頁失敗的代碼。讓我試着更具體地瞭解我最近的嘗試。我會編輯並再次運行它。 –

@BindindFish不知道你是否已經知道了，但這裏是我在使用Bourbon之前創建的幻燈片導航。 http://codepen.io/michaellee/pen/ntsjb – michaellee

@Blind魚 - 這裏的許多部件，包括波本威士忌的創造者建立了一個滑動導航的例子：

http://refills.bourbon.io/

遺憾沒能解決您的問題，具體地講，但是這可能是一個很好的起點爲您進一步定製。

來源

2014-04-19 00:31:45

用CSS，Rails，Bourbon和Neat滑出導航

回答

相關問題