用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滑出导航

回答

相关问题