java

レスポンシブにするため、スライドメニュー「Sidr」を実装。注意点

Categories | ホームページ

レスポンシブにするため、流行のスライドメニュー「Sidr」を実装してみました。

でも、スライドメニューになりません・・・

何で??

色々検証して攻略しました。の備忘録です。

1117 01 400x400 レスポンシブにするため、スライドメニュー「Sidr」を実装。注意点

参考ページ:http://cosao.net/archives/4937

公式サイト:Sidr [ sidr-package-1.2.1 ]

 

まず公式サイトから必要ファイルをダウンロードし、htmlファイル(htlm5)に

こう記述した。(公式引用)

 

<!DOCTYPE html>
<html lang="ja">
<head>
<!-- Your stuff -->
 
<!-- Include Sidr bundled CSS theme -->
<link rel="stylesheet" href="javascripts/sidr/stylesheets/jquery.sidr.dark.css">
</head>
<body>
<!-- Your stuff -->
 
<!-- Include jQuery -->
<script src="javascripts/jquery.js"></script>
<!-- Include the Sidr JS -->
<script src="javascripts/sidr/jquery.sidr.min.js"></script>
</body>
</html>

 

あれ?ダウンロードしたものには、13行目にあるjquery.jsなんて入ってないんだけど。

調べてみても、そのことに触れているページを見つけることが出来ず。

自力で作ってみた。

1117 02 400x400 レスポンシブにするため、スライドメニュー「Sidr」を実装。注意点

まずjquery本家ダウンロードに行き、えっ!英語解らないけど、

大体新しいバージョンは数字が大きいものじゃなかろうかと、

Download the compressed, production jQuery 2.1.1をクリックした。

1117 03 400x400 レスポンシブにするため、スライドメニュー「Sidr」を実装。注意点

ダダダ~って、英語やら記号が表示されたものを全てコピーし、

始にダウンロードしたjquery.sidr.min.jsを、コピペしたファイル

(jquery.sidr.min – コピー.js)に全て貼り付け、ファイル名をjquery.jsにして保存。

 

次にhtmlコードを記述。

 

<a id="simple-menu" href="#sidr">Toggle menu</a>
 
<div id="sidr">
<!-- Your content -->
<ul>
<li><a href="#&">List 1</a></li>
<li class="active"><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
</ul>
</div>
 
<script>
$(document).ready(function() {
$('#simple-menu').sidr();
});
</script>

 

以上で問題なく表示できるはず?、が、当ホムペではうまく表示されないのは何故?

かなり時間を費やしましたが、原因がやっと分かりました。

今までライトボックスでjquery(jquery-1.7.2.min.js)を使っていたので、

それと被っていたからでした。

 

<script type="text/javascript" src="lightbox/jquery-1.7.2.min.js"></script>

 

lightboxをやめたら(消したら)無事表示できました!

もしこの手がうまく動作しなかったら、類似した「javascript」が被っていないかを、

再度検証するべし。

 

右からスライドのレスポンシブにカスタマイズ に つづく

Comment(0) | Trackback(1)

TAGS: / / / / / / / | 2014年11月17日 |

HCZ-SPEC をプチリニューアル

Categories | ホームページ

今年6月ぐらいから、拡大画像の見栄えを良くしようとLightbox v2.04を導入。

リニューアルにあたり今回もと思ってましたが,

芸ないかなーってことで、違うプログラムを導入しました。

2010 1221 300x142 HCZ SPEC をプチリニューアルプログラム(java)入手先はこちら。

http://flowplayer.org/tools/demos/scrollable/gallery.html

フラッシュぽぉくって中々の優れもんですね。

自サイトの設置はさほどむずくないですが、

表示位置の微調整が必要なので、cssやhtmlをある程度理解し

いじれなと思うように表示してくれないかも。

Comment(0) | Trackback(0)

TAGS: / / / | 2010年12月20日 |

トップページにドロップダウンメニュー追加

Categories | ホームページ

HCZ HP のトップページをプチカスタムしました。

今回いじったのは

各コンテンツにあるバックナンバーボタン(3つしかないけど)の

プルダウンメニューをビジュアル的(カッチョいく)変更。

ネットサーフィンしてたらフリーのヨサゲジャバあったので拝借^^

ダウンロード元はここ
2010 1204 01 トップページにドロップダウンメニュー追加んで、ダウンロードファイルはこれね → droppy 0.1.2

設置はそれほどムズクなかったのですが、

プルダウン内のファイル量多過ぎて手こずりました。

あと、同ページ内に複数プダウンメニュー作るのは

若干ジャバ・CSS追加が必要。詳しくはソース参照してね。

 

さてさて、どう変わった?っていうと

■ BEFORE
2010 1204 02 トップページにドロップダウンメニュー追加■ AFTER
2010 1204 03 トップページにドロップダウンメニュー追加ここんとこ海外サイトにハマッテます。

勿論英語なんて分からんですが

なんとなーくぐらいでも結構いけますね。

今後HCZ-SPECも新デザイン(レイアウト)導入予定で

もっかプログラム物色中。

Comment(0) | Trackback(0)

TAGS: / / / / | 2010年12月4日 |