1. ブログのPerfor..
    2018/June/18/15:57 Mon   Comment(0)
    ブログのPerformance Upに 出来る事をやってみまし... ( Read more )
  2. FOAFデータ
    2018/June/10/04:26 Sun   Comment(0)
    このブログの プロフィール欄に表示されている 色付きの団子の... ( Read more )
  3. さくらのブログ独自の..
    2018/June/03/07:24 Sun   Comment(0)
    さくらのブログでは 独自の埋め込みタグが存在しています。 ... ( Read more )
カスタマイズ JS&CSS

2018年05月30日

ドロワーメニューを実装する

ブログサイドの余白部分に
メニューを表示したいなと思い、
jQueryのサイドバー
固定サブメニューを試して
みたのですが、いまいち
うまくいかない・・。

何か良いものはないかなと
たどり着いたのがDrawer。

drawer.jpg

drawerとは
引き出し、たんすの事だそうです。

なるほどー

さて、
このdrawerは
CDNも用意されていますし、
実装も意外に簡単です。



当ブログでは、
プルダウンメニューにて
表示していますが、

Bootstrap dropdown.js
が必要となります。

こちらも
CDNが用意されています。

その他、

当ブログのカスタマイズとしては、
フォントの変更、
リストナンバーの表示、
日付の表示方法を変更、


Responsive Breakpoint
(レスポンシブ ブレイクポイント)を
タブレット縦置き以下は
display:none;で
表示しないように設定しました。

※ わたしは、スマホで見た時に
ハンバーガーメニューが邪魔に感じたので
ブレイクポイントを設定しましたが、

気にならない方やスマホで必要な方は
そのまま表示させるか、
トップに固定される
ナビバーも選択できるので、
そちらをおすすめいたします。




貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました




posted by four4to6 at 14:01 | Comment(0) | カスタマイズ JS&CSS