今回は、スマホのドロップダウンメニューの実装などに大変便利なjQueryプラグイン【SlickNav】の使い方のご紹介です。 実際に利用してみたら、とても便利でしたのでご紹介させて頂きます。 こちらのプラグインのとても便利な所が、既存のメニュー(ul要素でマークアップしている必要があります)をそのままコピーしてくれてモバイル用のスタイルで表示させてくれるんです。 なので、これからレスポンシブ化をするサイトなんかにこちらのjqueryプラグイン【SlickNav】利用したらとても作業も楽なんじゃないかなーと思います。 また、jQuery UIを読み込むとメニューをオープンとクローズ時のアニメーションをeasingのアニメーションを利用出来るようになっています。 レスポンシブに対応していますので、スマホのメニューだけではなく、ある要素をモバイルで、スペースを節約したい時に、こちらの【Slick

今回は、レスポンシブに対応した、水平スライドアウトメニューの実装方法のご紹介です。 こちらのスライドメニューは、レスポンシブにも対応していますので、レスポンシブメニューの一つとしてストックしておいてもいいかもしれません。 また、メニューの初期デザインが素晴らしく、様々なサイトのメニューデザインとして使用出来ると思います。 僕なら、ネットショップのメニューやWordPressでアイキャッチ画像も表示させてカテゴリー毎の新着記事順なんかのメニューでもいいですし、ギャラリー系のメニューでもいいかもしれません。 色々ありすぎて迷いますけどwww、使い方次第では面白いスライドメニューだと思います。 下記にデモサイトもありますので、ご参考にどうぞ デモサイト 実装に必要なファイルなどは、下記リンク先よりダウンロードして下さい。 HORIZONTAL SLIDE OUT MENU レスポンシブに対応した

今回は、レスポンシブメニューの実装に使えるjQueryプラグイン【Sidr】の使い方のご紹介です。 こちらの【Sidr】が適応されると、メニューがサイドからスライド表示されるようになります。 便利な所が、既存メニューを利用してスマホなどの閲覧時にスライドメニューに対応出来るので、WordPressにも簡単に実装が出来ると思います。 また、メニューだけではなくコンテンツもスライド表示ができ、スライド時のテーマも2種類あり専用のCSSファイルを読み込むだけで、テーマが適応されるようになっています。 なので、今回はPCの通常閲覧時(768px以上)には、通常通りのメニューを表示させ、プレイク後(768px以下)には、【Sidr】が適応されたスライドメニューを表示させたいと思います。 言葉で言っても、あんまり伝えるの苦手なのでwww下記にデモサイトのようなメニューの表示方法です。 デモサイト 実際

今回は、javascriptを使わずCSSのみで作成できるドロワーメニュー【Pure Drawer】のご紹介です。 機能がjavascriptで作っているドロワーに劣るのでは？と思われますが、エフェクト効果・ドロワー位置の変更も簡単に行えます。 実際に【Pure Drawer】を使ったデモサイトもありますので、ご参考下さい。 デモサイト 実際に利用する場合は、下記サイトより必要ファイルをダウンロードして下さい。 Pure Drawer Pure Drawer 使い方 それでは、CSSだけで作る【Pure Drawer】の使い方のご紹介をしていきたいと思います。 必要ファイルの読み込み ダウンロードしたファルダ内にある【app.min.css】をhead内に読み込みます。 <link rel="stylesheet" href="css/app.min.css" type="text/css

今回は、スマホやタブレとのドロワーメニューなどに使えるjQueryプラグイン【Slidebars】の使い方のご紹介です。 ほとんどのサイトやブログのスマホサイトで見かける、横からメニューがスライドして表示されるのです。 横からヒュルと出てきますので、ちょっとかっこいいなーって思う方もいると思います。wwww こちらのプラグインは、ナビゲーションをアニメーションでスライド表示させてくれます。 また、ドロワーメニューだけではなく、コンテンツをサイドからスライドさせることも出来ますので、スマホのスペース確保などにも使える大変便利なプラグインです。 実装もHTMLさえ理解していれば、簡単に実装出来ますので、便利なプラグインです。 実際に【Slidebars】を利用したデモサイトも用意していますので、ご参考下さい。 デモサイトでは、メニューボタンをクリックすると左からドロワーメニューが表示されます。