I am working on my first Rails project, and I am really struggling with trying to get a sliding menu working the Bourbon / Neat. My most recent attempt has revolved around attempting to use CSS :target and the Shift() mixin for Neat. Where I am breaking down is in where / how to include the mixin and where / how to instantiate the actual shift. This is where I am in with the pure CSS attempt...
#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
This describes the positioning of the two elements ( nav and holder ). In theory, nav is positioned almost entirely off canvas and slides in on hover. However, this is not happening at all. What is happening is that nav is being displayed directly about holder, with holder being dropped down below nav. Nothing is off canvas, and nothing transforms. Below I will post the CSS for the transforms and the html that is generated.
#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%
And..
<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>
I've looked at the Shift() mixin for Neat, but there is precious little documentation on it. I honestly can't tell if this would even work for me, or how to implement it if that were the case. There are literally like 3 lines total in the Neat Documentation for it. Any help, tips, or, really, anything not terribly insulting will be greatly appreciated.
@Blind Fish - here's an example of many components, including a sliding nav built by the creators of bourbon:
http://refills.bourbon.io/
Sorry not to address your question, specifically, but this might be a good starting point for you to customize further.