①フッターは常に固定で表示されている。(FIX)
②常に表示されているフッターの上に、更新順に切り替わる文章(1行)を表示させる。
③フッター中央に付けたボタンをクリックすると、フッターが画面の3分の1ほどに伸びる。(②は消える)
④伸びたフッター部分にニュースなどの情報を記載できるようにする。
サンプルサイト
http://epoch-inc.jp
この動きをさせたいのですが、どうしてもjqueryのサンプルが見つかりません。
恐れ入りますが、どなたかご教授をお願いいたします。
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
CSS3と簡単なjqueryでできますよ。
【HTML】
<div id="wrapper">
<div class="main">
コンテンツ内容
</div>
<footer>
<div class="trigger"></div>
<div class="f_inner">
<div class="f_01"><a href="#">フッター上部1行</a></div>
<div class="f_02">
<a href="#">フッター中身</a><br>
<a href="#">フッター中身</a><br>
<a href="#">フッター中身</a><br>
<a href="#">フッター中身</a><br>
<a href="#">フッター中身</a><br>
</div>
</div>
</footer>
</div>
【CSS】
/*フッター固定*/
html,body{ height: 100%;}
#wrapper{
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
}
.main{padding-bottom: 150px; /*フッター高さなので適宜*/}
footer{
max-height: 150px;/*フッター高さなので適宜*/
position: absolute;
bottom:0;
width: 100%;
}
/*フッター中身 数値は適宜*/
.trigger{
cursor: pointer;
width: 30px;
height: 30px;
margin: 0 auto;
}
.f_inner{
overflow: hidden;
height: 30px;/*上の1行分だけ見せる高さ*/
transition: all 0.5s ease;}
.f_inner.active {height: 150px;/*全部表示*/}
.active .f_01{display: none;}
.f_02{padding-top: 50px;}
【jQuery】
説明:クラスtriggerクリックで.f_innerの表示切り替えのためのクラスactiveを追加したり削除したり
<script>
$(function(){
$(".trigger").click(function(){
$(".f_inner").toggleClass("active");
});
});
</script>
見た目とかは整えて貰えれば。
動きはこれで動くと思います。
アニメーション時の動きがただのeaseが嫌な場合も好きな動きに変えてください。
頑張ってください
No.1
- 回答日時:
こんにちは
>どうしてもjqueryのサンプルが見つかりません。
「サンプル」の意味するものが何なのかよくわかりませんが、ご提示のサイトもjQueryを利用しているようですので、そのままでサンプルといえばサンプルだと思いますけれど・・・?
もし、コピペで同じ機能を使えるような一般化したものを探そうとなさっているのなら、多分ないと思いますよ。
なぜなら、かなり複合化した機能になっているので、その意味では特殊なものになっていると言えるからです。
解説や単純化したサンプルを探したいのであれば、個別の機能ごとに分解して探せば、作り方やあるいはコピペで利用できるものを載せているサイトもあるものと想像します。
例えば、
・マーカーのクリックで、(フッターの)サイズを伸縮する
・newsとmenberersで表示内容をタブ的に切り替え表示する
・表示内容をスライドショーのようにスライド表示する
・ニュースなどをajaxで表示する
などなど。
ちなみに、ご提示のサイトではフッターに関する基本的なスクリプトは「footer.js」に収められているようですので、その部分だけでも参考になるのではないかと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(パソコン・スマホ・電化製品) Webページ印刷時にヘッダー・フッターをつけたい 1 2022/04/25 21:35
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- ノートパソコン ページ番号の入れ方について 3 2023/02/16 17:11
- WordPress(ワードプレス) ワードプレスにバグのような不具合が発生しました。 2 2023/03/23 07:51
- Word(ワード) Wordについて 3 2023/07/26 07:24
- HTML・CSS サイトをマルチデバイス対応にする為の準備や、CSSなどのおすすめサンプル集やアドバイスを頂きたいです 1 2022/07/13 22:15
- ホームページ作成・プログラミング ホームページ作成について。「ワードプレスではありません」。 3 2023/08/13 14:44
- Chrome(クローム) Chromeで印刷する時、フッターのみ印刷したい 1 2022/04/09 15:06
- Visual Basic(VBA) evcel VBAについて 2 2022/08/02 21:37
- その他(パソコン・スマホ・電化製品) Webページの印刷 1 2023/04/17 14:01
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JavaScriptのinnerHTMLの挙動に...
-
jqueryを使ったスムーススクロ...
-
CSSでreadonlyの機能はあり...
-
JavascriptのHTMLクラス表示に...
-
jQueryのSlickで矢印アイコンが...
-
javascriptでcssを書き換える方法
-
特定の条件のHTML要素を一括で...
-
jQuery 画面サイズにスライド画...
-
時間帯によってclass名を変更し...
-
ポップアップのリンク先と閉じ...
-
ホームページ上の文字の色を変...
-
確認ダイアログを次からは表示...
-
2回目以降のページロード時には...
-
「ご処理進めて頂きますようお...
-
エクセルで、日付を入力すると...
-
エクセルVBAで、MsgBox やInput...
-
CloseとDisposeの違い
-
Excelシート上のマクロを登録し...
-
「PC Helpsoft Driver Updated...
-
VBAでループ内で使う変数名を可...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
動画の上に広告をオーバーレイ...
-
CSSでreadonlyの機能はあり...
-
jQueryでのドラッグアンドドロ...
-
formのsubmitを押すとモーダル...
-
Q&A掲示板の入力フォームに文字...
-
jqueryを使ったスムーススクロ...
-
確認ダイアログを次からは表示...
-
javascriptで複数の表示・非表...
-
javascriptのエラーで質問です。
-
特定の条件のHTML要素を一括で...
-
macかwinか判別しスタイルシー...
-
【JavaScript】検索がヒットし...
-
jQueryのSlickで矢印アイコンが...
-
javascriptでの(-)ハイフンの処...
-
クリックすると、色が変わるよ...
-
時間帯によってclass名を変更し...
-
フォームで「パスワード(確認...
-
3重のクォーテーション
-
SITEINFOの書き方について
-
【至急!!】Jqueryを使った下記...
おすすめ情報