m630.netスマートフォン用の表示で見るm630.net2017-10-18グローバルナビをドロップダウンにするjQuery「FlexNav」WEB関連FlexNavは、jQueryプラグインです。ドロップダウンメニューを実装することができます。私はグローバルナビをディスプレイの幅が小さくなったら、折りたたんでタップでドロップダウンメニューになるようにするために使いました。以下の動画のような感じです。ディスプレイ幅が狭くなったらグローバルナビが格納されて、ドロップダウンメニューになります。ここからは先の動画の内容を実装するためのFlexNavの設定について解説します。ZIP」をクリックして下さい。「flexnav-master.zip」という名前のファイルがダウンロードできますので、パソコンの任意の場所に保存してください。解凍すると以下のようなファイル構成になっています。実際に使うのがこの中の「js」フォルダと「css」フォルダです。前述の「js」フォルダと「css」フォルダをまるごと、ドメインのルートディレクトリ(トップページと同じ階層)にアップロードして下さい。FlexNavを稼働させるためのコーディングheadタグ区間に下記のコードを追加します。タグの前に下記のようにコードを追加します。});</script>グローバルナビのHTMLは下記の例のように組んで下さい。href="/menu3.html">Menu3</a></li></ul>ポイントとしてはUlタグでマークアップするのと、class属性にflexnavを指定することです。ドロップダウンメニュー化する際にラベルを表示する場合はclass属性にmenu-buttonを指定して下さい。このように組むことで、レスポンシブに対応したドロップダウンメニュー化したグローバルナビが実装されます。参考サイト今回参考にしたウェブサイトはこちらです。FlexNav|こうめの“これから使える”jQueryプラグイン私の場合はグローバルナビをディスプレイ幅によって可変させるだけでしたが、もっとカスタムしたい場合は、こちらが参考になると思います。Type4.2では、ブログの複製ができます。(8)月別アーカイブリンクはてなブログブログをはじめる週刊はてなブログはてなブログProはてなブログをはじめよう!makoto_endoさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。