ジャングルオーシャンのアコーディオンメニューサンプルデモページ
1.複数開閉できる アコーディオン１ コンテンツ１ コンテンツ２ コンテンツ３ アコーディオン２ コンテンツ１ コンテンツ２ コンテンツ３ アコーディオン３ コンテンツ１ コンテンツ２ コンテンツ３ 2.一個開けると他は閉じる アコーディオン１ コンテンツ１ コンテンツ２ コンテンツ３ アコーディオン２ コンテンツ１ コンテンツ２ コンテンツ３ アコーディオン３ コンテンツ１ コンテンツ２ コンテンツ３ 3.一番目を開けておく（複数開閉できる） アコーディオン１ コンテンツ１ コンテンツ２ コンテンツ３ アコーディオン２ コンテンツ１ コンテンツ２ コンテンツ３ アコーディオン３ コンテンツ１ コンテンツ２ コンテンツ３ 4.一番目だけ開けておく（一個開けると他は閉じる） アコーディオン１ コンテンツ１ コンテンツ２ コンテンツ３ アコーディオン２ コンテンツ１ コンテンツ２ コンテンツ３
jQueryで作るマウスオーバーアニメーションするテキストタイプの縦型ナビゲーション10種
ベースとなるhtml 今回はテキストタイプなので文字列をリストで並るだけですね。 一部spanを入れた方が動作が安定することがあったので入れてます。javascriptのコードにspanを指定していなかったら外してください。 html <ul id="nav1"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">GALLERY</a></li> <li><a href="#">LINK</a></li> </ul> 1.マウスオーバーでスライドするボタン 単純に横にスライドするアニメーションは「marginLeft」を変化させます。 テキストの色はcssで変えてます。 このナビゲーションに限ってはliにspanを入れると安定して動作するっぽいです。 html <li><a href="
スクロール途中から位置が固定されるナビゲーションを作ってみる
ある程度スクロールすると、途中から位置が固定になるコンテンツを見かけたことはありませんか？ 今回はjQueryを使ってそれを作ります。 デモ1 デモ2 途中から位置が固定されるナビゲーションのデモ 1 & 2 ダウンロード 今回使うHTMLはこんな感じです。 <div id="header"> <h1>タイトル</h1> </div> <div id="container"> <div id="main">左カラム（メインコンテンツ）</div> <div id="sidebar"><!-- サイドバー --> <div id="nav">ここを固定する</div> </div> </div>#mainと#sidebarはfloat: leftしています。 これの#navが表示エリア上部から20pxの位置まで来たら位置を固定したいと思います。 position: fixedを使って固定する
position: fixed;でサイドに固定してjQueryでスライドして現れるメニュー
では、設置方法を説明してみます。 固定されたスライドメニューの作成 まず、head内でjQueryを読み込みます。もちろんjQueryは自分のサーバーにアップしてもかまいません。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> メニュー自体は簡単なリストメニューで構成されています。#のところはそれぞれリンク先のアドレスに変更してください。 <ul id="navi"> <li class="home"><a href="#"></a></li> <li class="rss"><a href="#"></a></li> <li class="facebook"><a href="#"></a></li> <li cla
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
simplelib with jQuery