Responsive layout, mobile first, breakpoint configurable
A Pen by Armando Anton on CodePen.
<div id="page"> | |
<div id="left"> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi deserunt odio inventore nisi est quae? Porro unde officiis recusandae sapiente odit! Sint praesentium earum placeat fugiat aperiam vero suscipit esse!</p> | |
<p>Aut esse nulla quas quae non et quidem a natus optio obcaecati eaque cumque sapiente dignissimos ad saepe. Aliquid dolore expedita modi recusandae odit magnam voluptatum dignissimos id placeat nulla.</p> | |
<p>Voluptatem numquam voluptates accusamus atque fugiat sed necessitatibus commodi amet sunt est obcaecati error nostrum ea omnis ducimus. Ducimus quasi cum animi consectetur doloribus at fugiat quas iure saepe incidunt.</p> | |
<p>Alias sequi ab fugiat consequatur sapiente aperiam inventore odit maxime aliquid hic perspiciatis labore rem pariatur nisi similique quidem dolorem. Accusantium sed ex laborum est omnis odit dolorem obcaecati nisi.</p> | |
<p>Excepturi facilis esse cum nam quasi adipisci totam labore dolore eum quaerat vel hic asperiores explicabo odio laboriosam nemo maxime quis rem illum reiciendis. Ullam quas quae repellat quia nam.</p> | |
</div> | |
<div id="header"> | |
<p><a href="#" class="btn-menu">Menu</a> Brand name</p> | |
</div> | |
<div id="content"> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas hic exercitationem expedita officiis porro voluptatem sed odio ipsam eveniet quia autem nihil ipsa deleniti earum doloribus ratione qui. Hic quam.</p> | |
<p>Doloribus amet ad suscipit eveniet at soluta deserunt nihil error itaque totam minus tenetur nostrum odit illo corporis possimus natus consequatur earum tempore dolore maiores. Voluptate sapiente architecto rem similique?</p> | |
<p>Ad molestiae sed quis pariatur tempore fuga soluta cupiditate voluptatum. Dolor doloribus maiores est vitae rem veritatis recusandae eum totam omnis iusto temporibus commodi sunt quaerat reprehenderit consequuntur accusamus quibusdam!</p> | |
<p>Corporis hic molestias laborum dignissimos ipsam beatae illum architecto placeat fuga possimus repellendus in quisquam est sequi dicta ullam sint quaerat recusandae explicabo nam! Amet dolorem molestiae ipsum totam atque?</p> | |
<p>Tempore explicabo ad ut blanditiis fuga debitis nulla reiciendis fugiat soluta commodi minus laudantium repellat voluptatem nemo quam vel voluptatibus non veniam numquam assumenda obcaecati sed temporibus sequi quisquam nam!</p> | |
<p>Tempore explicabo iure doloremque nulla totam deserunt in quos iste unde consequatur sed qui saepe doloribus placeat impedit minima quam harum ipsum sunt aliquid neque expedita cum a voluptate ad.</p> | |
<p>Soluta voluptas quas ipsam asperiores assumenda quis beatae eveniet veritatis aspernatur dolorem rerum deserunt expedita ut nulla sit amet laudantium ipsa quisquam perspiciatis eius doloribus quae eaque iste fugiat debitis.</p> | |
<p>Cumque molestiae voluptatum beatae nostrum sed recusandae quam sit aperiam praesentium sunt neque nesciunt maiores corporis ad amet dolorem repellendus facere expedita! Soluta natus et reiciendis quibusdam neque eaque cupiditate.</p> | |
<p>Exercitationem aperiam mollitia perferendis dolor distinctio assumenda voluptates illum accusantium sit doloremque. Ipsam vel suscipit doloremque provident nihil sint recusandae odit cupiditate vero aliquam temporibus incidunt placeat dolores deserunt architecto.</p> | |
<p>Minima adipisci sint itaque cumque alias laboriosam tempora accusantium blanditiis iusto sit sequi consequatur pariatur ad eius assumenda rerum dignissimos beatae culpa nesciunt id libero error a. Aperiam culpa doloribus.</p> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea nulla porro vitae harum impedit maiores excepturi provident asperiores facilis modi deleniti soluta iste non. Quos laboriosam quasi debitis amet similique.</p> | |
<p>Temporibus id provident quod necessitatibus aliquid sapiente doloribus pariatur fugit expedita dicta. Possimus ullam provident fugit nisi vitae cum dolorum unde obcaecati quod nulla ipsam repellat quaerat non. Fugit labore?</p> | |
<p>Nobis maiores blanditiis laboriosam laborum pariatur quos esse. Itaque explicabo accusamus temporibus iste quasi expedita corporis earum harum aut tempore deleniti id mollitia excepturi sed laborum perspiciatis repudiandae quod similique!</p> | |
<p>At dolor atque dolores minus non accusamus est voluptatibus fugiat doloribus suscipit nam iste explicabo molestiae adipisci hic maxime magni ex in porro eveniet consectetur! Omnis voluptatibus repellat ea recusandae!</p> | |
<p>Animi amet sed doloremque excepturi at accusamus officiis ea! Vel nam sit dicta ipsum ab iure fuga nobis facere quod blanditiis? Eos nostrum sunt quaerat aperiam voluptas placeat reiciendis corrupti!</p> | |
</div> | |
</div> |
Responsive layout, mobile first, breakpoint configurable
A Pen by Armando Anton on CodePen.
(function($) { | |
$('#header a').on('click', function(e) { | |
e.preventDefault(); | |
$('#page').toggleClass('visible-menu'); | |
}); | |
})(jQuery); |
@left-width: 240px; | |
@header-height: 30px; | |
@breakpoint: 600px; | |
html, body { | |
height: 100%; | |
width: 100%; | |
} | |
* { | |
.box-sizing(border-box); | |
} | |
p { | |
margin: 0 0 10px; | |
} | |
#page { | |
height: 100%; | |
width: 100%; | |
overflow: auto; | |
} | |
#left { | |
position: fixed; | |
height: 100%; | |
width: @left-width; | |
top: 0; | |
.translateX(-@left-width); | |
background-color: #333; | |
color: #fff; | |
overflow-y: auto; | |
} | |
#header { | |
position: fixed; | |
height: @header-height; | |
width: 100%; | |
top: 0; | |
.translateX(0); | |
background-color: #333; | |
color: #fff; | |
opacity: 0.9; | |
z-index: 100; | |
} | |
#content { | |
position: relative; | |
height: 100%; | |
top: @header-height; | |
.translateX(0); | |
} | |
#page.visible-menu { | |
overflow: hidden; | |
#left { | |
.translateX(0); | |
} | |
#header, #content { | |
.translateX(@left-width); | |
} | |
} | |
#left, #header, #content { | |
.transition(~"transform 0.3s ease-out"); | |
} | |
@media (min-width: @breakpoint) { | |
#header, #content { | |
margin-left: @left-width; | |
} | |
#left, #header, #content { | |
.transition(~"none"); | |
} | |
#left { | |
.translateX(0); | |
} | |
.btn-menu { | |
display: none; | |
} | |
#page.visible-menu { | |
overflow: auto; | |
#header, #content { | |
.translateX(0); | |
} | |
} | |
} |