文章/答案/技术大牛

发布

社区首页 >问答首页 >使用CSS、Rails、Bourbon和Neat滑出导航

问使用CSS、Rails、Bourbon和Neat滑出导航
EN

Stack Overflow用户

提问于 2013-08-22 03:20:44

回答 1查看 1.7K关注 0票数 0

我正在做我的第一个Rails项目，我真的在努力尝试让一个滑动菜单工作在Bourbon / Neat上。我最近的尝试围绕着尝试使用CSS :target和用于整洁的Shift()混合。我要分析的地方是在哪里/如何包含mixin，以及在哪里/如何实例化实际的移位。这就是我尝试纯CSS的地方……

#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

这描述了两个元素( nav和holder )的定位。理论上，导航几乎完全脱离画布，并在悬停时滑入。然而，这根本没有发生。正在发生的事情是，导航直接显示在持有者的周围，持有者被放在导航下方。没有任何东西脱离画布，也没有任何东西转换。下面我将发布转换的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行。任何帮助，小贴士，或者，真的，任何不是非常无礼的事情都将非常感谢。

css

bourbon

neat

回答 1

Stack Overflow用户

发布于 2014-04-19 08:31:45

@Blind Fish -以下是许多组件的示例，包括波旁酒的创建者构建的滑动导航：

http://refills.bourbon.io/

很抱歉没有具体回答你的问题，但这可能是一个很好的起点，让你进一步定制。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/18365873

复制

相似问题

问使用CSS、Rails、Bourbon和Neat滑出导航
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用CSS、Rails、Bourbon和Neat滑出导航EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用CSS、Rails、Bourbon和Neat滑出导航
EN