Webサイトにスライディングサイドバーを設置したいです。
下記サイトのようなスライディングサイドバーをsidebar-leftに表示したいと思っています。
仕組みの解説をご教授お願いします。
Sliding Side Bar
http://www.andrewsellick.com/examples/sliding-si …
やりたいこと:
___________________________
|sidebar-left| main |sidebar-right|
|_ | | |
|こ| | | |
|こ| | | |
|に| | | |
|表| | | |
|示| | | |
|_| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
~~~~~~~~~~~~~~~~~~~~~~~~~~~
↓クリックすると
___________________________
|sidebar-left| main |sidebar-right|
|____________ | |
| こ| | |
|profile ぐ こ| | |
| に に| | |
| ゅ 表| | |
| に 示| | |
| ゅ _| | |
| と | | |
| 伸 | | |
| び | | |
| る | | |
| | | |
~~~~~~~~~~~~~~~~~~~~~~~~~~~
このWebパーツはmootoolsが使われているようです。
これをjQueryで実現したコードが2つのサイトで公開されています。
jQueryでスライドするサイドバー
http://101lab.net/javascript/2007/09/jquery-1.ht …
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.h …
Untitled Document
http://www.rickanddan.com/NewStuff/tabSlideOut/D …
自分なりに5つのサイトを見て自分なりに動作させようと試みましたがまったく理解出来ずに挫折しました。
自分はスライディングサイドバーパネルがどのように隠れているのか理解出来ませんでした。
このスライディングサイドバーの仕組みを分かりやすく解説してくれる方いませんでしょうか?
自分で試みたのは
1.sliding-sidebar-tabという画像を用意して
2.Javascriptをコピペして貼り付けて、
3.CSSもそのままコピペして
4.HTMLにもそのままコピペしてどのように動くのか見ようとしたのですが、
sliding-sidebar-tabを:hoverしてもsliding-sidebar-panelは表示されませんでした・・・
スライディングサイドバータブをクリックすると自分のプロフィールがグニュニュと伸びて表示させたいです。
出来るだけ簡単なCSSとJavascriptだけで実現したいです。
一番知りたいことはスライディングサイドバーパネルがどうなっているのかです。よろしくお願いします。
No.6ベストアンサー
- 回答日時:
jQueryプラグイン「tabSlideOut」使用法
http://www.building58.com/examples/tabSlideOut.h …
ちょうどタブスライダを探していたところだったので、質問主さんの記事にあるjQueryプラグイン「tabSlideOut」の使用法を日本語訳してみました。
すげえ簡単。基本は、
$(function(){
$('セレクタ要素').tabSlideOut({オプション});
});
だけです。
スライドさせるボックスを最後に記述しておいて、「タブ」になる画像はJavaScript側で定義すると、位置設定やアニメーション定義を全自動でやってくれます。
左だけでなく、右側タブや上下タブもOK。
複数タブも問題なくできました。
// jQueryプラグイン TabSlideOut使用マニュアル
// 注意:jQueryを別途読込のこと
// js本体読込
<script src="http://tab-slide-out.googlecode.com/files/jquery …
// タブスライダ動作定義
<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
- 回答日時:
./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;}
この回答への補足
スライディングサイドバーの部分だけ切り出してみました。
<!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>
回答ありがとうございます。
floatとdivは理解しました。
mainの中にlocal-navigationを配置することも出来ました。
スライディングサイドバーはulで試みてはいますが理想と現実のギャップが大きすぎて困惑しています。
スライディングサイドバータブが広がった際にタブ名が右側にあるのが理想です。
そしてコの字に突き出て表示したいです。
理想:
____________
タ|
ブ|
_|
|
|
|
|
|
|
|
__________ |
しかし、現実はこうです。
現実:
___________
タ |
ブ |
|
|
|
|
|
|
|
|
|
|
__________ |
何かが理想と違うのでもうちょっと試行錯誤してみます。
No.4
- 回答日時:
画像は置換インライン要素といわれるものでサイズは置換される画像のサイズに依存します。
そのため、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://oshiete.goo.ne.jp/qa/7728329.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
- 回答日時:
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
- 回答日時:
ご提示の、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
- 回答日時:
スタイルシートの:hover--動的な擬似クスを使ってみましょう。
CSS3では時間的変位を表現するプロパティがありますから、いずれそれが使えるようになります。IE以外の標準ブラウザは実装できています。(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する前に表示させたくない隠しておきたい要素はどうやって見えないようにしておくのでしょうか?
お知恵を貸してください。よろしくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript jQueryローディングアニメーションのコードの以下のURL内参考サイトで提示されている 3 2023/07/03 18:29
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- JavaScript HTML&CSS Javascriptによる動的テーブル 1 2023/03/27 19:51
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript ローディングアニメーションのロゴがページを読み込んだ後でも消えません 1 2022/09/20 21:50
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
liタグの中に<p>タグやら<dl>を...
-
ulとliで囲った文字の一部を変...
-
親ページ側からインラインフレ...
-
html 横並びのリストを中央寄せ...
-
divタグ内のコンテンツが重なっ...
-
画像にリンクを張ると画像がず...
-
CSSが上手く反映されないみたい...
-
HTMLで組織図を作成する方法
-
URLにアクセスした際に指定した...
-
リストの数字のフォントサイズ...
-
UL OL タグのインデントについて
-
html/cssの、navを2段にする...
-
Dreamweaverで、ul要素の下に写...
-
javascriptのアコーディオンメ...
-
Webサイトにスライディングサイ...
-
jQuery等で背景をフル表示+ス...
-
display:table;を多段表示させたい
-
リスト(ul / li)タグの左イン...
-
<table>の高さ固定。情報増加時...
-
ieでのみCSSのcontentが効かない
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
番号付きリスト(<Ol><Li>・・...
-
liタグの中に<p>タグやら<dl>を...
-
<table>の高さ固定。情報増加時...
-
レスポンシブWebデザインでリン...
-
<ul><li></li></ul>にするメリ...
-
リストの数字のフォントサイズ...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
divタグ内のコンテンツが重なっ...
-
画像にリンクを張ると画像がず...
-
複数行にまたがる括弧を表示し...
-
html <ul></ul>の並びで一行空...
-
ページを開いているときのリン...
-
HTML5のfooterに見出しを付けて...
-
html/cssの、navを2段にする...
-
<ul>~</ul>が二つ続くと間に改...
-
htmlの<ol>タグで、数字などを...
-
リンク文字同士の間隔を開ける...
-
CSSでつくったメニューのアニメ...
おすすめ情報