Responsive Web Design – Note09. 外觀設計模式(Off canvas) - Benjamin Says So ......

字體：小中大

Responsive Web Design – Note09. 外觀設計模式(Off canvas)

2014/06/18 17:22:39瀏覽495｜回應0｜推薦0

終於來到最後一篇要說明的外觀設計模式 —Off canvas

這種設計的模式比較不直覺，撇開將內容垂直堆疊而達到瑩幕變小時的顯示模式，Off canvas的外觀設計模式引入了將較少用到的區塊，在瑩幕大小異動時，將這些區塊選擇性地讓其消失，例如像選單或導覽列的部份，在瑩幕小到一種程度時，其實是可以考量將其隱藏起來；反之當大到一個可接受的大小時，可以讓它再出現出來。當然也可以使用click的方法來進行這樣的變化。

範列(Off canvas)

範例中除了使用到Css的transform的屬性來達到區塊消失的效果，也使用了一點javascript來實作點擊時動態的出現與消失的效果，這種外觀設計模式，明顯地比較費功夫；不過也存在它有趣的一面。接下來只列出Css的段落，javascript的內容若您有興趣，再開啟範例的原始檔來看一下即可，但前提是您有些javascript的基礎唷。
.div1 {
background-color: #B500B5;
-webkit-transform: translate(-250px,0);
transform: translate(-250px,0);
}
.div2 {
background-color: #E8E800;
width: 100%;
position: absolute;
}
.div3 {
background-color: #FF6060;
left: 100%;
}
.div1.open {
-webkit-transform: translate(0,0);
transform: translate(0,0);
}
.div3.open {
-webkit-transform: translate(-250px,0);
transform: translate(-250px,0);
}
@media (min-width: 500px) {
/* If the screen is wider then 500px, use Flexbox */
.container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
flex-flow: row nowrap;
}
.div1 {
position: relative;
-webkit-transition: none 0s ease-out;
transition: none 0s ease-out;
-webkit-transform: translate(0,0);
transform: translate(0,0);
}
.div2 {
position: static;
}
}
@media (min-width: 800px) {
body {
overflow-x: auto;
}
.div3 {
position: relative;
left: auto;
-webkit-transition: none 0s ease-out;
transition: none 0s ease-out;
-webkit-transform: translate(0,0);
transform: translate(0,0);
}
}

以上，五種外觀的設計模式都解完囉。希望能對各位有點幫助。

( 知識學習｜隨堂筆記 )