사이드 바 (스켈레톤 포함) CSS

Question

960px 와이드 스켈레톤 컨테이너 바로 옆에 사이드 바를 배치하려고합니다. 나는 그것을 성공적으로 끝냈다. 그러나 컨테이너를 화면 중앙에 유지하면서 을 더 좋은 방법으로 찾고있다..

aside { 
    width: 250px; 
    float: left; 
    margin-left: -170px; 
} 

https://jsfiddle.net/dgujg9xb/

그것을 제외 마진을 제공하여, I는 내부에 용기 ( #holder) 외부로 떠있다. 그러나, 그것은 매우 나쁘고 잘 작동하지 않습니다. 화면의 크기를 조정하여 사이드 바를 잘라서 대신 (미디어 쿼리를 사용하는 전화 에서처럼) 위에 앉히고 싶지만 그렇게하면 불가능합니다.

구조를 구성하는 더 좋은 방법이 있습니까? JavaScript 라이브러리가 잘 작동하는 한 기꺼이 사용할 것입니다.

Answer 1

사이드 바 absolute을 만들고 레이아웃의 나머지 부분에서 위의 그림을 z-index과 독립으로 배치하십시오.

• 참고 저도 같은 목적을 위해,도 추가 사이드 바 jQuery를 토글 (조각 뷰포트이기 때문에 작은는 달리 오버 플로우 것) 단지 데모 #holder에서 960pxwidth 댓글을 달았습니다.

귀하의 바이올린 :

내 바이올린 :

External Fiddle if you wish to resize

코드 조각 아래 :

$(".container").on("click", function() { 
 
    $("aside").toggleClass("showAside"); 
 
});

* { 
 
    box-sizing: border-box; 
 
} 
 
html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#holder { 
 
    /* width: 960px; */ 
 
    position: relative; 
 
    margin: 0 auto; 
 
    height: 100%; 
 
} 
 
aside { 
 
    width: 250px; 
 
    background: black; 
 
    color: white; 
 
    position: absolute; 
 
    top: 0; 
 
    left: -170px; 
 
    z-index: 1; 
 
    transition: all .4s ease-in; 
 
} 
 
.showAside { 
 
    left: 0; 
 
} 
 
.container { 
 
    border: 1px solid black; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="holder"> 
 
    <aside> 
 
    Sidebar goes here 
 
    </aside> 
 
    <div class="container"> 
 
    Hello - click to show/hide sidebar 
 
    </div> 
 
</div>

Answer 2

나는 사용할 수있는 무언가의 코데판을 만들었습니다. 거기에서 내용과 스타일을 바꿀 수 있습니다. 콘텐츠 컨테이너의 너비가 고정되어 있고 물건이 깔끔하게 맞지 않을 때 붕괴됩니다. 나는 또한 여기 Sass와 HTML에 펑하고 들었다. 이것은 실제로 달성 할 수있는 방법의 예가되어야합니다. 실제로는 확실한 응답 성을 이유로 백분율을 사용하는 것이 더 나을 것입니다.

http://codepen.io/BlitZ_UK/pen/GrEExr

스타일링이 말대꾸에서 이루어집니다

;

.page-container { 

    background: #607D8B; 
    min-height: 100vh; 

} 

.content { 
    padding: 10px 20px 
} 

.sidebar { 
    background: #009688; 
} 

.inner-wrapper { 

    background: #00bcd4; 
    margin: 0 auto; 
    max-width: 960px; 
    position: relative; 

} 

@media all and (min-width: 1362px) { 

    .sidebar { 
    width: 200px; 
    position: absolute; 
    left: 0; 
    transform: translateX(-100%); 

    } 

} 

그리고 HTML;

<div class="page-container"> 

    <div class="inner-wrapper"> 

    <div class="sidebar"> 

     <ol> 
     <li>Lorem ipsum dolor.</li> 
     <li>Lorem ipsum dolor.</li> 
     <li>Lorem ipsum dolor.</li> 
     </ol> 

    </div> 

    <div class="content"> 

     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt facere expedita voluptatem reprehenderit, asperiores architecto magni laborum repellat perferendis voluptas alias autem cumque iste dignissimos ab officiis totam blanditiis ratione.</p> 

    </div> 

    </div> 

</div> 

희망을 얻었습니다.