*

ボタンを押すとコンテンツが現れる方法。スライドパネル。

公開日: : html5, jquery, 未分類

今回は、ボタンを押すとコンテンツが現れる方法を調べてみました。

ボタン押すと下にコンテンツが現れる。
これは、ホームページをコンパクトに抑えるのには便利ではないでしょうか?

まずは、デモを用意しましたので、見てください。
デモ01

以下にソースを記載します。
今回使用する、スタイルシートは、
index.css
以上の1つです。

scriptは、
custom.js
以上の1つを使用します。

scriptは、htmlに直接書いてもいいのですが、
今回は、別ファイルにしました。

以下がindex.htmlのファイルです。
index.htmlファイル

<!DOCTYPE html>
<html lang="ja">
<head>
<title>ボタンを押すとコンテンツが現れる。スライドパネル</title>
<meta charset="UTF-8" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="wrapper">

<p class="open">ボタン</p>
<div id="slideBox">
     もう一度ボタンをクリックすると閉じます。個人的に使う機会の多いスライドパネル。
     ぜひお試しアレ。もう一度ボタンをクリックすると閉じます。個人的に使う機会の多いスライドパネル。
     ぜひお試しアレ。
</div>

</div><!--wrapper-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="js/custom.js" type="text/javascript"></script>
</body>
</html>

次に、スタイルシートです。
index.css

body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
	background-color: #f0ffff;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	font-size: 16px;
	width: 100%;
}


#wrapper{
	width:1000px;
	margin:0 auto;
	position:relative;
}

.open{
     background: #fc6;
     color: #fff;
     cursor: pointer;
     width:100px;
     padding: 10px
}
#slideBox{
     padding: 10px;
     border: 1px #ccc solid;
     display:none;
}

openとslideBoxの部分を変更すれば、デザインの編集ができます。

最後にjsファイルです。
custom.js

$(function(){
     $(".open").click(function(){
      $("#slideBox").slideToggle("slow");
     });
});

以上で完成です。

今回参考にした、サイトがありますのでこちらも参考にしてみてください。
jQueryを使ったプルダウンのナビゲーション | CSS Lecture

今回デモ01で使用したファイルをUPしときましたので、
よかったら参考にしてみてください。
ダウンロード


関連記事

no image

マウスオーバーした時に画像を半透明にする。”opacity”を使用する。

今回は、マウスオーバーをした際に半透明にするという事を調べてみました。 マウスオーバーをし

記事を読む

no image

背景画像をjqueryを使用して、フルスクリーンで動かす方法。backgroundPositionを使用。

今回は、背景画像をjqueryを使って、動かすという事をしてみました。 背景画像はアメニーショ

記事を読む

no image

エラーページの表示方法。 .htaccessに書く。ErrorDocument 404使用。

今回は、エラーページの表示方法について。調べてみました。 まず、エラーページとはなにか? エ

記事を読む

no image

jqueryを使って画像を回転させる。jQueryRotateを使用

今回は、画像を回転させるという事をやってみました。 調べてみたところ、jqueryを使って簡単

記事を読む

no image

-jQuery-スクロールしたらあとからついてくるコンテンツの作成方法

今回は、スクロールしてもあとからついてくるコンテンツを作成してみました。 スクロールしたら

記事を読む

no image

背景に画像をフルスクリーンさせる方法。 maximageを使用。

今回は、背景画像をフルスクリーンにし、なおかつ、スライダーする方法について、調べてみました。

記事を読む

no image

スクロールバーのカスタマイズ。jScrollPaneを使用してみました。

今回は、スクロールバーのカスタマイズに取り組んでみました。   サイトにスクロ

記事を読む

no image

テキストの縦位置を設定する。line-height:を使用する。

今回は、テキストの間隔について書きたいと思います。 テキストを書くときテキストの縦位置が気にな

記事を読む

no image

jqueryを使って画像を拡大・縮小させる。

今回は、画像を拡大・縮小させるという事をやってみました。 前回は、画像を回転させるという事をや

記事を読む

no image

animationでboxを動かしてみた。

今回は、animationを使って、boxを動かしてみました。 マウスを乗せたときに指定したb

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PAGE TOP ↑