Cocoonist's Sidebar

概要

CocoonistさんのBetter Readabilityテーマを参考しています。

モバイル環境や767px以下の幅で見てください。

コード

/* Erase it when deleted original side-bar opening/closing style */
.open-menu, .close-menu{display:none !important;}
 
/* Special thanks for Cocoonist */
@media(max-width:767px){
#side-bar {
    position: fixed;
    width: 229.6px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    top: 0;
    left: -30em;
    display: block !important;
    z-index: 50;
    -webkit-transition:left 0.5s ease-in-out 0.1s;
    -moz-transition:left 0.5s ease-in-out 0.1s;
    -ms-transition:left 0.5s ease-in-out 0.1s;
    -o-transition:left 0.5s ease-in-out 0.1s;
    transition:left 0.5s ease-in-out 0.1s;
    transition-duration: 0.7s;
    background-color: rgba(104, 62, 62, .9);
}
 
#side-bar ~ #main-content:after {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 0;
    content: '';
    z-index: 40;
}
 
#side-bar:hover ~ #main-content:after {
  visibility: visible;
  opacity: 1;
  transition: opacity 500ms;
}
 
#side-bar:before {
    content: url(http://devanos.wdfiles.com/local--files/files/sidebar-logo1_50px.png);
    position: fixed;
    left: 20px;
    bottom: 20px;
    width: 40px;
    height: 40px;
    background-color: transparent !important;
    transition-duration: 0.7s;
}
 
#side-bar:hover {
    position: fixed;
    margin-left: 0;
    left: 0 !important;
    transition-duration: 0.7s;
}
 
#side-bar:hover:before {
    text-decoration: none !important;
    -webkit-box-shadow: 0px 0px 20px 3px rgba(153,153,153,1);
    -moz-box-shadow: 0px 0px 20px 3px rgba(153,153,153,1);
    -ms-box-shadow: 0px 0px 20px 3px rgba(153,153,153,1);
    -o-box-shadow: 0px 0px 20px 3px rgba(153,153,153,1);
    box-shadow: 0px 0px 20px 3px rgba(153,153,153,1);
    visibility: hidden;
    border-radius: 50%;
    transition: visibility 0.5s ease 0.1s;
    transition-duration: 1s;
}
 
#side-bar .side-block {
    padding: 1em;
    margin: 1em 0.5em;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
}

説明

利点

• 設置するとき、既存の物と違って、サイドバーやトップメニューで無駄なコードを追加する必要がない。
  • つまり、CSSコードを追加するだけでOff-canvasが機能する。
• URLに痕跡が残らない。
  • 既存の物は「#side-bar」と「#」がURLの後ろに付けてしまう問題が発生したが、これが違う。
    • 特にサイドバーを閉じるときにただの「#」ではページの一番上に上がってしまう問題がある。その解決のために一度「#asdf」みたいに存在しないアンカーに設定する方法があったが…

欠点

• サイドバーを強調するためにサイドバーが開いたときに他の部分を黒くする効果があったが、今の方式では制限がある。
  • 既存の物もあまり良い方法ではなかったので慰安を得る…
• PCでサイドバーが使い難い可能性がある。
  • マウスをオーバーさせたときに作動するので、マウスが動いたらすぐ戻ってしまう。

---

[[Module comments]]