1. CMSをインストール..
    2018/August/19/14:14 Sun   Comment(0)
    おそらく8月22日の システムメンテナンスで さくらのサブド... ( Read more )
  2. 何となく分かったで良..
    2018/August/15/05:14 Wed   Comment(0)
    プログラミングを勉強したり 調べたりしていると 出てくる言葉... ( Read more )
  3. Enabling f..
    2018/August/09/13:52 Thu   Comment(0)
    Google Fonts APIの Font Effectsを... ( Read more )
  4. headを見直しまし..
    2018/August/06/03:36 Mon   Comment(0)
    headに書かれたCDNとか そのままになっていませんか? ... ( Read more )
  5. 期待してよいのでしょ..
    2018/August/04/03:36 Sat   Comment(0)
    2018年7月24日に さくらインターネットより、 下記のよ... ( Read more )
TOPカスタマイズ JS&CSSThis article

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
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]
    

画像の中の文字を半角で入力してください。

ブログオーナーが承認したコメントのみ表示されます。