Webサイトにスライディングサイドバーを設置したい

質問

Webサイトにスライディングサイドバーを設置したいです。

下記サイトのようなスライディングサイドバーをsidebar-leftに表示したいと思っています。
仕組みの解説をご教授お願いします。

Sliding Side Bar
http://www.andrewsellick.com/examples/sliding-side-bar/#

やりたいこと：
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
｜sidebar-left｜　　　　　main　　　　　｜sidebar-right｜
｜＿　　　　　｜　　　　　　　　　　　　｜　　　　　　 ｜
｜こ｜　　　　｜　　　　　　　　　　　　｜　　　　　　 ｜
｜こ｜　　　　｜　　　　　　　　　　　　｜　　　　　　 ｜
｜に｜　　　　｜　　　　　　　　　　　　｜　　　　　　 ｜
｜表｜　　　　｜　　　　　　　　　　　　｜　　　　　　 ｜
｜示｜　　　　｜　　　　　　　　　　　　｜　　　　　　 ｜
｜＿｜　　　　｜　　　　　　　　　　　　｜　　　　　　 ｜
｜　　　　　　｜　　　　　　　　　　　　｜　　　　　　 ｜
｜　　　　　　｜　　　　　　　　　　　　｜　　　　　　 ｜
｜　　　　　　｜　　　　　　　　　　　　｜　　　　　　 ｜
｜　　　　　　｜　　　　　　　　　　　　｜　　　　　　 ｜
｜　　　　　　｜　　　　　　　　　　　　｜　　　　　　 ｜
～～～～～～～～～～～～～～～～～～～～～～～～～～～

↓クリックすると
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
｜sidebar-left｜　　　　　main　　　　　｜sidebar-right｜
｜＿＿＿＿＿＿＿＿＿＿＿＿　　　　　　　｜　　　　　　 ｜
｜　　　　　　　　　　　こ｜　　　　　　｜　　　　　　 ｜
｜profile 　ぐ　　　　　こ｜　　　　　　｜　　　　　　 ｜
｜　　　　　に　　　　　に｜　　　　　　｜　　　　　　 ｜
｜　　　　　ゅ　　　　　表｜　　　　　　｜　　　　　　 ｜
｜　　　　　に　　　　　示｜　　　　　　｜　　　　　　 ｜
｜　　　　　ゅ　　　　　＿｜　　　　　　｜　　　　　　 ｜
｜　　　　　と　　　　｜　　　　　　　　｜　　　　　　 ｜
｜　　　　　伸　　　　｜　　　　　　　　｜　　　　　　 ｜
｜　　　　　び　　　　｜　　　　　　　　｜　　　　　　 ｜
｜　　　　　る　　　　｜　　　　　　　　｜　　　　　　 ｜
｜　　　　　　　　　　｜　　　　　　　　｜　　　　　　 ｜
～～～～～～～～～～～～～～～～～～～～～～～～～～～

このWebパーツはmootoolsが使われているようです。

これをjQueryで実現したコードが2つのサイトで公開されています。

jQueryでスライドするサイドバー
http://101lab.net/javascript/2007/09/jquery-1.html#

jQueryでside-bar.js
http://d.hatena.ne.jp/devworks/20070621/1182431671

別に動作は気にしないのでスライディングサイドバーが実現さえ出来ればいいので下記サイトも参考になります。

Working example of the tabSlideOut jQuery plugin
http://www.building58.com/examples/tabSlideOut.html

Untitled Document
http://www.rickanddan.com/NewStuff/tabSlideOut/DDC/DDC.html

自分なりに5つのサイトを見て自分なりに動作させようと試みましたがまったく理解出来ずに挫折しました。

自分はスライディングサイドバーパネルがどのように隠れているのか理解出来ませんでした。

このスライディングサイドバーの仕組みを分かりやすく解説してくれる方いませんでしょうか？

自分で試みたのは
１．sliding-sidebar-tabという画像を用意して
２．Javascriptをコピペして貼り付けて、
３．CSSもそのままコピペして
４．HTMLにもそのままコピペしてどのように動くのか見ようとしたのですが、
　　sliding-sidebar-tabを:hoverしてもsliding-sidebar-panelは表示されませんでした・・・

スライディングサイドバータブをクリックすると自分のプロフィールがグニュニュと伸びて表示させたいです。

出来るだけ簡単なCSSとJavascriptだけで実現したいです。

一番知りたいことはスライディングサイドバーパネルがどうなっているのかです。よろしくお願いします。

回答No.6

shockatz · ベストアンサー

jQueryプラグイン「tabSlideOut」使用法
http://www.building58.com/examples/tabSlideOut.html

ちょうどタブスライダを探していたところだったので、質問主さんの記事にあるjQueryプラグイン「tabSlideOut」の使用法を日本語訳してみました。

すげえ簡単。基本は、
$(function(){
$('セレクタ要素').tabSlideOut({オプション});
});
だけです。

スライドさせるボックスを最後に記述しておいて、「タブ」になる画像はJavaScript側で定義すると、位置設定やアニメーション定義を全自動でやってくれます。
左だけでなく、右側タブや上下タブもＯＫ。
複数タブも問題なくできました。

// jQueryプラグイン TabSlideOut使用マニュアル
// 注意：jQueryを別途読込のこと
// js本体読込
<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>

// タブスライダ動作定義
<script type="text/javascript">
$(function(){
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle', // 「タブ」につけるクラス名
pathToTabImage: 'images/tab.gif', // 「タブ」画像のパス
imageHeight: '122px', // 「タブ」画像の高さ
imageWidth: '40px', // 「タブ」画像の幅
tabLocation: 'left', // 「タブ」スライダの位置 top / right / bottom / left
speed: 300, // アニメーションタイム
action: 'click', // アクション開始イベント click / hover
topPos: '200px', // 上辺からの距離（スライダ位置がleft/rightの場合）
leftPos: '20px', // 左辺からの距離（スライダ位置がbottom/topの場合）
fixedPosition: false // 固定フラグ（オプション）trueでスクロールしても位置固定
});
});
</script>

/* タブスライダのCSS */
<style type="text/css">
.slide-out-div {
padding: 20px;
width: 250px;
background: #ccc;
border: 1px solid #29216d;
}
</style>

<!-- タブスライダのHTML </body>直前に入れる -->
<div class="slide-out-div">
<h3>タブスライダのテストです</h3>
<p>こんないいスライダ教えてもらってサンクス。</p>
<p>上下スライダを探していたところだったので捗るわ。</p>
</div>

お礼

回答ありがとうございます。

スライディングサイドバーパネルは.slide-out-divだったのですか。

私はHTML5のベンダープレフィックスのtransition-propertyを使用して実現してしまいました。

また機会があればこの情報を元に作りたいと思います。

回答No.5

ORUKA1951

./CSS内のscreen.cssです。

@charset "UTF-8";
header,section,footer{width:90%;min-width:640px;max-height:900px;margin:0 auto;}
header nav{height:2em;}
header nav ul li{display:inline-block;border:solid 2px white;width:20%;}
section section{width:auto;min-width:0;}
section{position:relative;}
section aside,section nav{position:absolute;top:0;}
section aside{width:20%;right:0;height:100%;}
section nav+nav{position:static;margin:0 21%;}
section nav+nav p{text-align:center;text-indent:0;}
section h2,section p,section figure,section section{margin:0 21%;}
section section h2,section section p,section section figure,section dection section{margin:0;}
section figure{background-color:rgb(200,200,255);line-height:1em;}
#contentTable{height:100%;width:20%;}
nav ol,nav ul,nav ol li,nav ul li{
＿display:block;position:relative;list-style-type:none;
＿margin:0;padding:0;line-height:2em;text-align:center
}
#contentTable ol li{width:100px;border:solid 1px gray;}
#contentTable ol li ol{position:absolute;left:100%;top:-1px;/*display:none;*/}
#contentTable ol li ol li{width:0;overflow:hidden;border-width:0;z-index:10;background-color:red;
-moz-transition-property: width;
-webkit-transition-property: width;
-o-transition-property: width;
-ms-transition-property: width;

-moz-transition-duration:1s;
-webkit-transition-duration:1s;
-o-transition-duration:1s;
-ms-transition-duration:1s;

-moz-transition-timing-function:ease-in-out;
-webkit-transition-timing-function:ease-in-out;
-o-transition-timing-function:ease-in-out;
-ms-transition-timing-function:ease-in-out;}
#contentTable ol li:hover ol li{width:100px;overflow:hidden;border-width:1px;}

./CSS内のpersistent.cssです。
@charset "UTF-8";
html,body{margin:0;padding:0;}
body{background-color:gray;}
header{background-color:yellow}
section{background-color:white}
section>section{background-color:silver}
aside{background-color:aqua}
aside:first-child{background-color:lime}
footer{background-color:fuchsia}
nav{background-color:red}
h1,h2,h3,h4,h5,ul,p{margin:0;line-height:1.6em;}
p{text-indent:1em;}

お礼

回答ありがとうございます。

floatとdivは理解しました。
mainの中にlocal-navigationを配置することも出来ました。

スライディングサイドバーはulで試みてはいますが理想と現実のギャップが大きすぎて困惑しています。

スライディングサイドバータブが広がった際にタブ名が右側にあるのが理想です。

そしてコの字に突き出て表示したいです。

理想：

＿＿＿＿＿＿＿＿＿＿＿＿
　　　　　　　　　　　タ｜
　　　　　　　　　　　ブ｜
　　　　　　　　　　　＿｜
　　　　　　　　　　 ｜
　　　　　　　　　　 ｜
　　　　　　　　　　 ｜
　　　　　　　　　　 ｜
　　　　　　　　　　 ｜
　　　　　　　　　　 ｜
　　　　　　　　　　 ｜
＿＿＿＿＿＿＿＿＿＿ ｜

しかし、現実はこうです。

現実：

＿＿＿＿＿＿＿＿＿＿＿
タ　　　　　　　　　 ｜
ブ　　　　　　　　　 ｜
　　　　　　　　　　 ｜
　　　　　　　　　　 ｜
　　　　　　　　　　 ｜
　　　　　　　　　　 ｜
　　　　　　　　　　 ｜
　　　　　　　　　　 ｜
　　　　　　　　　　 ｜
　　　　　　　　　　 ｜
　　　　　　　　　　 ｜
　　　　　　　　　　 ｜
＿＿＿＿＿＿＿＿＿＿ ｜

何かが理想と違うのでもうちょっと試行錯誤してみます。

補足

スライディングサイドバーの部分だけ切り出してみました。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
nav ol,nav ul,nav ol li,nav ul li{
display:block;
position:relative;
list-style-type:none;
margin:0;padding:0;
text-align:center
}

#contentTable ol li {
width: 50px;
border: solid 1px gray;}

#contentTable ol li:active ol li {
width:500px;
height:600px;
overflow:hidden;
border-width:1px;
}

#contentTable ol li ol {
position:absolute;
left:-1px;
top:-1px;
}

#contentTable ol li ol li{
width:0;
overflow:hidden;
border-width:0;
background-color:yellow;
}

</style>
</head>
<body>
<header>
<nav id="contentTable">
<ol>
<li>
ス<br>
ラ<br>
イ<br>
デ<br>
ィ<br>
ン<br>
グ<br>
サ<br>
イ<br>
ド<br>
バ<br>
｜<br>
タ<br>
ブ<br>
<ol>
<li>
ここにプロフィールを書きます。<br>
</li>
</ol>
</ol>
</nav>

</body>
</html>

回答No.4

ORUKA1951

画像は置換インライン要素といわれるものでサイズは置換される画像のサイズに依存します。そのため、dispaly:blockでblockに変換して(static以外)の親要素のサイズを参照できるようにはなければなりません。
nav li{position:relative;}
nav li img{display:block;width:100%;heif\ght:100%;}
です。

　しかし、「文字を画像で置き換えること」きまずいに従えば、画像を背景で指定するほうが良いです。

★CSSのfloatとdivについて質問です。 - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7728329.html )
の宿題は解けますか？
　HTML5の心髄がわかるはずです。ちょっと書き換えて、下のHTMLを挙げておきます。スタイルシートはあとで・・
★Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html# )
でチェック済みのHTMLです。
※タブは＿に、:(半角)は：(全角)似置換してあるので戻すこと
<!doctype html>
<html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="description" content="">
＿<meta name="author" content="IRUKA">
<!--[if IE]>
＿<script src="http：//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
＿<script src="http：//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<link rel="stylesheet" href="./CSS/persistent.css">
<link rel="stylesheet" media="screen" href="./CSS/screen.css">
</head>
<body>
＿<header>
＿＿<h1 id="title">Your title</h1>
＿＿<nav>
＿＿＿<ul>
＿＿＿＿<li><a href="#">Some</a></li>
＿＿＿＿<li><a href="#">navigation</a></li>
＿＿＿＿<li><a href="#">links</a></li>
＿＿＿</ul>
＿＿</nav>
＿</header>
＿<section>
＿＿<h2>A smaller heading</h2>
＿＿<p>
＿＿＿CSSのfloatとdivについて質問です。
＿＿</p>
＿＿<p>
＿＿＿下記のようにmainの中にlocal-navigationを配置したいのですがやり方が分からないのでご教授お願いします。
＿＿</p>
＿＿<p>
＿＿＿現在はlocal-navigationがfooterの上に表示されて自分の意図することが出来ていません。
＿＿</p>
＿＿<figure class="main">
＿＿＿<pre>┌──────────────┐
│header　　　　　　　　　　　│
│　　←------ nav -----→　　｜
├───┬──────┬───┤
｜aside │main　　　　│aside │
│　　　│　　　　　　│　　　│
│　　　│　　　　　　│　　　│
│　　　│　　　　　　│　　　│
│　　　│　　　　　　│　　　│
│　　　│　　　　　　│　　　│
│　　　├──────│　　　│
│　　　│←- nav --→│　　　│
├───┴──────┴───┤
│footer　　　　　　　　　　　│
└──────────────┘</pre>
＿＿</figure>
＿＿<p>
＿＿＿sidebar-leftとsideba-rightはfooter部分まで伸びていて欲しいのです。
＿＿</p>
＿＿<section>
＿＿＿<h3>A smaller heading</h3>
＿＿＿<p>
＿＿＿＿ここに記事
＿＿＿</p>
＿＿</section>
＿＿<section>
＿＿＿<h3>見出し</h3>
＿＿＿<p>ここに記事が続く</p>
＿＿</section>
＿＿<nav id="contentTable">
＿＿＿<ol>
＿＿＿＿<li>あ行
＿＿＿＿＿<ol>
＿＿＿＿＿＿<li>あ</li>
＿＿＿＿＿＿<li>い</li>
＿＿＿＿＿＿<li>う</li>
＿＿＿＿＿</ol>
＿＿＿＿</li>
＿＿＿＿<li>か行
＿＿＿＿＿<ol>
＿＿＿＿＿＿<li>か</li>
＿＿＿＿＿＿<li>き</li>
＿＿＿＿＿＿<li>く</li>
＿＿＿＿＿</ol>
＿＿＿＿</li>
＿＿＿＿<li>さ行</li>
＿＿＿</ol>
＿＿</nav>
＿＿<nav>
＿＿＿<p>前のページへ | ページトップ | 次のページ</p>
＿＿</nav>
＿＿<aside>
＿＿＿<h3>Something aside</h3>
＿＿＿<p>
＿＿＿＿新着情報とか
＿＿＿</p>
＿＿</aside>
＿</section>
＿<footer>
＿＿<h3>A nice footer</h3>
＿</footer>
</body>
</html>

回答No.3

ORUKA1951

overflow:hidden;
です。

お礼

回答ありがとうございます。

overflow:hidden;を指定してもスライディングサイドバータブ画像の中に文字列が回りこむ形で表示されてします。
そして回り込みを禁止にしてもオーバーフローしない文字は表示され続けるはずです。

そこでsliding-sidebarの<p>要素に対してdisplay: none;を指定して非表示にしました。

そしてsliding-sidebar:active時にdisplay: block;を指定して表示を戻そうと試みましたが表示されませんでした。

display: none;を指定した後に再度表示したい場合はどうすれば良いのでしょうか？
ご教授お願いします。

#sliding-sidebar {
background-image: url("sliding-sidebar.png");
width: 50px;
height: 400px;
position:absolute; top:100px; left:-1px;
}

#sliding-sidebar p {
display: none;
}

#sliding-sidebar:active {
display: block;
background-image: none;
background-color: #777777;
width: 500px;
height:400px;
}

回答No.2

shockatz

ご提示の、tabSlideOut jQuery plugin で調べてみた。
これ、ちょっといいですね。

初期表示状態で、IEのDeveloper Toolで見ると、コンテンツの<div>が以下のように変化していますわ。

<div class="slide-out-div" style="position: absolute; line-height: 1; height: 222px; top: 200px; left: -294px;" jQuery1349185944342="3">

一目瞭然。コンテンツブロックの中にタブを移動させ、全体をposition:absoluteで画面外に押し出した後、マウスオーバーやクリックイベントを拾って、leftプロパティを連続的に変化させ、ボックス全体を右側へ押し出しているんですね。

jsのソース見た感じでは、イージングは使っていない模様。

お礼

回答ありがとうございます。

スライディングサイドバーパネルは画面の左上から見て-294pxの場所に配置されているのですね。

私は下記のようにbackground-image: none;を指定しました。
わざわざ画面外にブロック要素を配置したくなかったからです。

各ブラウザがどのように見えるのか影響がどうなのか不安だったからです。

このposition:absolute;でマイナス指定することに問題はないのでしょうか？

#sliding-sidebar {
background-image: url("sliding-sidebar.png");
width: 50px;
height: 400px;
position:absolute; top:100px; left:-1px;
}

#sliding-sidebar:active {
background-image: none;
background-color: #777777;
width: 500px;
height:400px;
}

回答No.1

ORUKA1951

スタイルシートの:hover--動的な擬似クスを使ってみましょう。CSS3では時間的変位を表現するプロパティがありますから、いずれそれが使えるようになります。ＩＥ以外の標準ブラウザは実装できています。(IE9は動作する)
#contentTable ol li{position:relative;}
#contentTable ol li ol position:absolute;top:0;left:100%;}
#contentTable ol li ol li{
width:0px;
-moz-transition-property: width;
-webkit-transition-property: width;
-o-transition-property: width;
-ms-transition-property: width;

-moz-transition-duration:1s;
-webkit-transition-duration:1s;
-o-transition-duration:1s;
-ms-transition-duration:1s;

-moz-transition-timing-function:ease-in-out;
-webkit-transition-timing-function:ease-in-out;
-o-transition-timing-function:ease-in-out;
-ms-transition-timing-function:ease-in-out;}
#contentTable ol li:hover ol li{width:100px;}
とか

お礼

回答ありがとうございます。

HTML5のベンダープレフィックスのtransition-propertyプロパティを使う手があったのですね！

さっそく試してベンダープレフィックスを使うのは避けたかったので下記のように書きました。

HTML
<div id="sliding-sidebar">ここにプロフィールを書きます。</div>

CSS
#sliding-sidebar {
background-image: url("sliding-sidebar.png");
width: 50px;
height: 400px;
position:absolute; top:100px;
}

#sliding-sidebar:hover {
background-image: none;
background-color: #777777;
width: 500px;
height:400px;
}

実行するとHTML部分の文章が:hoverされる前のスライディングサイドバータブ画像に表示されてしまうことが分かりました。

:hoverする前に表示させたくない隠しておきたい要素はどうやって見えないようにしておくのでしょうか？
お知恵を貸してください。よろしくお願いします。