うろぐ

インターネットサービス&デジタル家電&デジタルカメラ&パソコンのレビュー

レスポンシブルWEBデザインに対応をしたメニューを幾つか作成して作り置いて貯めておいて、Webのデザインや機能に応じて使い分けようと思い立ちました。
こうしたことは時間があるときに作業をしておくと、忙しいときに役立ちます。
幸か不幸か確定申告の季節で、その上に色々と人と仕事で合わなければならないので、まとまった仕事時間が取れそうにありません。
そうした合間合間の時間を使って、作って見ました。

参考としたサイトはASCII.jp:レスポンシブにも対応したドロップダウン FlexNav|こうめの“これから使える”jQueryプラグインです。

FlexNav をGitHubからダウンロードします。
GitHubのFlexNav、FlexNavのオフィシャルサイトFLEXNAVでは実際の表示が分かります。

FlexNavはjquery.flexnav.min.jsを読み込ませます。
.min.が書かれているソースは、改行やTABなど無駄がないので読み込みが早く、スマホに有利です。

<script src=”/javascripts/jquery.flexnav.min.js”></script>

<link rel=”stylesheet” href=”/css/flexnav.css”>とcssファイルを読み込ませます。

ドロップダウンメニューで表示したい項目をリスト要素でマークアップします。

HTMLソース
< ul class=”flexnav” data-breakpoint=”800″>
<li<アイテム1>/li>
<li<アイテム2>/li>
<li<アイテム3>/li>
<li<アイテム4>/li>
</ul<

class=”flexnav”はflexnavの付属のcssに記述されている定義なので、そのまま利用します。
data-breakpoint=”800″は、横幅の指定です。この数字以上の横幅にブラウザが広くなったら適用されます。
わたしのWebSiteは全て800px未満なので、この数字だけは書き換えましたが、デフォルトの800pxでも特に不都合がなければ、そのままの方が後々の管理がやりやすいはずです。

JavaScriptのソース
<script>
$(function(){
$(“.flexnav”).flexNav();
});
</script>

これで通常は正常に動作するのですが、わたしはCGIで出力させて動作をさせるので、ここで少し時間を喰いました。
\$(function(){
には\\$(function(){
と\を前に書かなければなりませんでした。

2月 28th, 2015

Posted In: Responsive Web Design