CSS, Rails, Bourbon 및 Neat으로 슬라이드 탐색

첫 번째 Rails 프로젝트에서 작업 중이며 Bourbon/Neat을 사용하는 슬라이딩 메뉴를 얻으려고 애 쓰고 있습니다. 가장 최근의 시도는 CSS : target과 Shift() 믹스 인을 Neat으로 사용하려는 시도를 중심으로 진행되었습니다. 내가 분해 할 곳은 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

여기에는 두 요소 (nav 및 holder)의 위치가 설명되어 있습니다. 이론 상으로는 nav는 캔버스에서 거의 벗어나 위치하며 슬라이드가 진행됩니다. 그러나 이것은 전혀 일어나지 않습니다. 무슨 일이 일어나고있는 지 nav가 홀더 아래에 떨어 뜨린 상태에서 nav가 홀더에 대해 직접 표시되고 있다는 것입니다. 아무것도 캔버스에서 벗어나지 않으며 아무것도 변형되지 않습니다. 아래는 변환을위한 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>

만에 귀중한 작은 문서가있다. 솔직히 말해서 이것이 나를 위해 일할 수 있는지, 또는 그런 경우 구현하는 방법을 알 수 없습니다. 말 그대로 Neat Documentation에는 총 3 줄의 문자가 있습니다. 어떤 도움, 조언, 또는 정말로, 모욕적 인 모욕이 아닌 어떤 것도 크게 감사 할 것입니다.

http://refills.bourbon.io/

이 가

가 해결하지 죄송합니다 귀하의 질문에 구체적으로하지만,이 좋은 수 있습니다 : -

출처

2013-08-21 Blind Fish

이 질문은 StackOverflow에 적합하지 않습니다. 메뉴와 관련된 ** 특정 ** 문제를 보여주는 코드를 포함하도록 수정하는 것이 좋습니다. "그래, 세상의 누군가가 CSS 프레임 워크에서 일종의 슬라이딩 메뉴를 사용하고있을 것"이라고 말할 때를 제외하고는 당신을 정말로 도울 수 없습니다. – deefour

충분히 정교합니다. 문제는 20 페이지의 실패한 코드를 게시 할 수있는 다양한 변형을 시도한 것입니다. 가장 최근의 시도에 대해 더 자세하게 설명하겠습니다. 편집하고 다른 것을 실행 해 보겠습니다. –

@BlindFish는 아직 알지 못했지만 Bourbon을 사용하기 전에 만들어진 Nav의 슬라이드입니다. http://codepen.io/michaellee/pen/ntsjb – michaellee

@Blind 물고기는 여기 버번의 제작자에 의해 만들어진 슬라이딩 탐색 등 많은 구성 요소의 예 당신이 더 커스터마이징 할 수있는 출발점.

출처

2014-04-19 00:31:45

CSS, Rails, Bourbon 및 Neat으로 슬라이드 탐색

답변

관련 문제