Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Improved/added Off Canvas example in Adaptive Layout Patterns

  • Loading branch information...
commit 0bda4a94a9f42da13a3e3c7a1e7f716974f9ca87 1 parent c03fd07
@webpro authored
View
180 css3/adaptive-layout-pattern-off-canvas-variation.html
@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Adaptive Layout Pattern</title>
+
+ <meta name="viewport" content="width=device-width,minimum-scale=1.0">
+
+ <script src="../resources/prefixfree.min.js"></script>
+
+ <style type="text/css">
+
+ * {
+ box-sizing: border-box;
+ }
+
+ body {
+ margin: 0;
+ }
+
+ header, article, footer {
+ max-width: 1200px;
+ margin: 0 auto;
+ }
+
+ section, aside {
+ float: left;
+ padding: 1em;
+ }
+
+ section:first-child {
+ width: 25%;
+ background-color: #96C144;
+ }
+
+ section[role="main"] {
+ width: 50%;
+ background-color: #6FA843;
+ }
+
+ aside {
+ width: 25%;
+ background-color: #CDE0AA;
+ }
+
+ article:after {
+ content: "";
+ display: table;
+ clear: both;
+ }
+
+ a {
+ font-size: 3em;
+ color: #000;
+ text-decoration: none;
+ }
+
+ .offcanvas-left,
+ .offcanvas-right {
+ display: none;
+ }
+
+ .offcanvas-right {
+ float: right;
+ }
+
+ @media all and (max-width: 768px) {
+
+ section:first-child {
+ width: 33%;
+ position: relative;
+ }
+
+ section[role="main"] {
+ width: 67%;
+ position: relative;
+ z-index: 2;
+ }
+
+ aside {
+ width: 33%;
+ position: absolute;
+ top: 0;
+ right: 0;
+ z-index: 1;
+ }
+
+ .offcanvas-right {
+ display: inline;
+ }
+
+ #off-right section {
+ transition: left 500ms ease;
+ }
+
+ #off-right:target section {
+ left: -33%;
+ }
+ }
+
+ @media all and (max-width: 600px) {
+
+ article {
+ position: relative;
+ width: 100%;
+ }
+
+ section:first-child {
+ width: 50%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 1;
+ }
+
+ section[role="main"] {
+ width: 100%;
+ }
+
+ aside {
+ width: 50%;
+ }
+
+ .offcanvas-left {
+ display: inline;
+ }
+
+ #off-right:target section {
+ left: -50%;
+ }
+
+ #off-left {
+ transition: left 500ms ease;
+ }
+
+ #off-left:target {
+ left: 50%;
+ }
+
+ }
+
+ </style>
+ </head>
+ <body>
+
+ <article id="off-right">
+
+ <section>
+ <a href="#" class="offcanvas-left">✖</a>
+ <h2>Left column</h2>
+ <p>Normally, both your asses would be dead as fucking fried chicken, but you happen to pull this shit while I'm in a transitional period so I don't wanna kill you, I wanna help you. But I can't give you this case, it don't belong to me. Besides, I've already been through too much shit this morning over this case to hand it over to your dumb ass.</p>
+ </section>
+
+ <section role="main" id="off-left">
+ <h1>Off Canvas Variation</h1>
+ <p>
+ <a href="#off-left" class="offcanvas-left">←</a>
+ <a href="#off-right" class="offcanvas-right">→</a>
+ </p>
+ <p>
+ </p>
+ <h2>Main content</h2>
+ <p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.</p>
+ <p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.</p>
+ </section>
+
+ <aside>
+ <a href="#" class="offcanvas-right">✖</a>
+ <h1>Aside</h1>
+ <p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.</p>
+ </aside>
+
+ </article>
+
+ <footer>
+ <h1>Footer</h1>
+ <p>My money's in that office, right? If she start giving me some bullshit about it ain't there, and we got to go someplace else and get it, I'm gonna shoot you in the head then and there. Then I'm gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when I'm talking to you, motherfucker. You listen: we go in there, and that nigga Winston or anybody else is in there, you the first motherfucker to get shot. You understand?</p>
+ </footer>
+
+ </body>
+</html>
View
159 css3/adaptive-layout-pattern-off-canvas.html
@@ -12,132 +12,119 @@
* {
box-sizing: border-box;
}
-
+
body {
margin: 0;
- position: relative;
- width: 100%;
}
- header, article, footer {
+ article, footer {
max-width: 1200px;
margin: 0 auto;
}
- .main:after {
- content: "";
- display: table;
- clear: both;
- }
-
- .main, .main section, aside {
+ section, aside {
float: left;
- }
-
- .main {
- width: 75%;
- }
-
- aside {
- width: 25%;
- }
-
- .main section, aside {
padding: 1em;
}
- .main section:first-child {
+ section:first-child {
+ width: 25%;
background-color: #96C144;
}
- .main section:last-child {
+ section[role="main"] {
+ width: 50%;
background-color: #6FA843;
}
aside {
+ width: 25%;
background-color: #CDE0AA;
}
- .main section:first-child {
- width: 33%;
+ article:after {
+ content: "";
+ display: table;
+ clear: both;
}
- .main section:last-child {
- width: 67%;
+ a {
+ font-size: 3em;
+ color: #000;
+ text-decoration: none;
}
- .offcanvas {
+ .offcanvas-left,
+ .offcanvas-right {
display: none;
}
- @media all and (max-width: 1024px) {
+ .offcanvas-right {
+ float: right;
+ }
- article {
- position: relative;
- overflow: hidden;
- }
+ @media all and (max-width: 768px) {
- article,
- .main {
- width: 100%;
+ section:first-child {
+ width: 33%;
}
- .main, aside {
- float: none;
+ section[role="main"] {
+ width: 67%;
}
aside {
- position: absolute;
+ width: 33%;
+ position: fixed;
top: 0;
+ right: -33%;
}
- aside {
- left: 98%;
+ .offcanvas-right {
+ display: inline;
}
- .offcanvas {
- display: inherit;
+ #off-right {
+ transition: right 500ms ease;
}
- aside {
- transition: left 500ms ease;
+ #off-right:target {
+ right: 0;
}
- aside:target {
- left: 75%;
- }
}
- @media all and (max-width: 768px) {
+ @media all and (max-width: 600px) {
- header {
- display: none;
+ aside {
+ right: -50%;
+ width: 50%;
}
- .main section:first-child,
- .main section:last-child,
- aside {
- width: 100%;
+ section:first-child {
+ width: 50%;
}
- .main section {
- float: none;
+ section[role="main"] {
+ width: 100%;
}
- .main section:first-child {
- position: absolute;
+ section:first-child {
+ width: 50%;
+ position: fixed;
top: 0;
+ left: -50%;
}
- .main section:first-child {
- left: -98%;
+ .offcanvas-left {
+ display: inline;
}
- #left {
+ #off-left {
transition: left 500ms ease;
}
- #left:target, #aside:target {
+ #off-left:target {
left: 0;
}
@@ -147,33 +134,27 @@
</head>
<body>
- <header>
- <h1>Off Canvas</h1>
- </header>
-
<article>
- <div class="main">
-
- <section id="left">
- <a href="#" class="offcanvas">close</a>
- <h1>Column 1</h1>
- <p>Normally, both your asses would be dead as fucking fried chicken, but you happen to pull this shit while I'm in a transitional period so I don't wanna kill you, I wanna help you. But I can't give you this case, it don't belong to me. Besides, I've already been through too much shit this morning over this case to hand it over to your dumb ass.</p>
- </section>
-
- <section>
- <h1>Column 2</h1>
- <p class="offcanvas">
- <a href="#left">left</a>
- <a href="#aside">aside</a>
- </p>
- <p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.</p>
- </section>
-
- </div>
-
- <aside id="aside">
- <a href="#" class="offcanvas">close</a>
+ <section id="off-left">
+ <a href="#" class="offcanvas-left">✖</a>
+ <h2>Left column</h2>
+ <p>Normally, both your asses would be dead as fucking fried chicken, but you happen to pull this shit while I'm in a transitional period so I don't wanna kill you, I wanna help you. But I can't give you this case, it don't belong to me. Besides, I've already been through too much shit this morning over this case to hand it over to your dumb ass.</p>
+ </section>
+
+ <section role="main">
+ <h1>Off Canvas</h1>
+ <p>
+ <a href="#off-left" class="offcanvas-left">←</a>
+ <a href="#off-right" class="offcanvas-right">→</a>
+ </p>
+ <h2>Main content</h2>
+ <p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.</p>
+ <p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.</p>
+ </section>
+
+ <aside id="off-right">
+ <a href="#" class="offcanvas-right">✖</a>
<h1>Aside</h1>
<p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.</p>
</aside>
View
3  css3/adaptive-layout-patterns.html
@@ -21,6 +21,9 @@
<li>
<a href="adaptive-layout-pattern-off-canvas.html">Off Canvas</a>
</li>
+ <li>
+ <a href="adaptive-layout-pattern-off-canvas-variation.html">Off Canvas (variation)</a>
+ </li>
</ul>
<p><a href="..">Home</a></p>
Please sign in to comment.
Something went wrong with that request. Please try again.