*

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

公開日: : 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

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

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

記事を読む

no image

ドラッグの色を変更する。::selectionを使用する。

今回は、ドラッグした時に色の変更方法を書いてみました。 通常では、ドラッグをしたときは、白にな

記事を読む

no image

jquryで問い合わせフォームのデザインを作ってみた。

今回は、jquryで問い合わせフォームを作ってみました。   問い合わせフォー

記事を読む

no image

animationでboxを動かしてみた。

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

記事を読む

no image

HP作成に必要なもの。

今週は、ブログの更新が遅くなりました。 今作業している内容では、ネタがないという理由で更新がな

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

海外サイトのかっこいいサイト集。

サイトを作成するにあたってもっとも大切なものは、想像力だとおもいます。 デザイナーの方などは特

記事を読む

no image

スクロールしても固定されるコンテンツの作成方法。(“jquery”box-fixed.jsを使用。)

今回は、スクロールしても一部分が固定されるという事をしてみました。 まずは、デモを見てください。

記事を読む

no image

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

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

記事を読む

Message

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

PAGE TOP ↑