使用CSS、Rails、Bourbon和Neat进行滑出式导航
我正在做我的第一个Rails项目,我真的在努力让一个滑动菜单可以使用波旁威士忌/纯威士忌。我最近的一次尝试是使用CSS:target和Shift()mixin来实现niat。我要分解的是在何处/如何包含mixin以及在何处/如何实例化实际的移位。这就是我尝试纯CSS的地方使用CSS、Rails、Bourbon和Neat进行滑出式导航,css,bourbon,neat,Css,Bourbon,Neat,我正在做我的第一个Rails项目,我真的在努力让一个滑动菜单可以使用波旁威士忌/纯威士忌。我最近的一次尝试是使用CSS:target和Shift()mixin来实现niat。我要分解的是在何处/如何包含mixin以及在何处/如何实例化实际的移位。这就是我尝试纯CSS的地方 #nav @include span-columns(1) position: fixed left: -240px top: 0 bottom: 0 background-color: #654
#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%
和
- 第一环节
- 第二环节
- 第三环节
- 第四环
我已经查看了Shift()mixin的整洁性,但是关于它的文档很少。老实说,我不知道这是否对我有效,或者如果是这样的话,如何实施它。在整洁的文档中总共有3行。任何帮助、提示,或者实际上没有太大侮辱性的东西,我们都将不胜感激。@Blind Fish-以下是许多组件的示例,包括波旁威士忌的创造者建造的滑动导航:
很抱歉没有明确回答您的问题,但这可能是您进一步自定义的一个良好起点。此问题不适合StackOverflow。我建议对其进行修改,以包含说明菜单中存在的特定问题的代码。我们真的帮不了你,除了说“是的,世界上有人可能在那些CSS框架中使用了某种滑动菜单”就够了。问题是我尝试了太多不同的变体,以至于我可以发布20页失败的代码。让我试着更具体地谈谈我最近的尝试。我会编辑它,然后再运行一次。@BlindFish不确定你是否已经弄明白了,但这是我在使用波旁威士忌之前制作的滑出导航。
<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>