横にスライドして隠れるサイドバーが作れる、面白いスクリプトを発見したので早速試してみた。
・・・今回はなんの問題もなく設置できました。 （＾∀＾）
設定方法
このスクリプトは、２種類あるみたいです。自分の環境では「mootools.js」は使用できないので「scriptaculous.jsバージョン」を使用しました。※この説明は「scriptaculous.jsバージョン」になります。
こちらからダウンロード （scriptaculous.jsバージョン）
こちらからダウンロード （mootools.jsバージョン）
解凍後にできた「sliding-side-bar-scriptaculous」フォルダを、ご自分のスクリプト置き場に転送してください。（ここでは /wp-content/js/sliding-side-bar-scriptaculous/ に置いたものとして説明します。）
次に「JavaScript」 を、外部リンクとして読み込ませるために<head>〜</head>の間に書き込みます。 自分の場合は、テーマエディタでヘッダーの問題無さそうな部分に書き込みました。
<script type="text/javascript" src="https://example.com/wp-content/js/sliding-side-bar-scriptaculous/js/effects.js"></script>
<script type="text/javascript" src="https://example.com/wp-content/js/sliding-side-bar-scriptaculous/js/side-bar.js"></script>
黄色の部分にファイルの設置場所（アドレス）を指定<script type="text/javascript" src="https://example.com/wp-content/js/sliding-side-bar-scriptaculous/js/side-bar.js"></script>
使用方法
本文投稿内の記述方法は・・・ダウンロードして解凍したフォルダの中にある「index.html」を参考にしてください・・・・σ(^◇^;)ヒヤアセ
基本はこんな感じです・・・って言うか、サンプルそのままですが・・・σ(^◇^;)ヒヤアセ
※ スタイルシートは別に用意して上記の<head>〜</head>の間で読み込ませる方法か、ご自分のテーマのスタイルシートに追記する方法などで良いと思いますが、この例は記事本文中に記述しました。
長いです！！
<!-- スタイル部分 -->
<style type="text/css">
<!--
a{
outline: none;
}
a:active{
outline: none;
}
#sideBar{
text-align:left;
}
#sideBar h2{
color:#FFFFFF;
font-size:110%;
font-family:arial;
margin:10px 10px 10px 10px;
font-weight:bold !important;
}
#sideBar h2 span{
font-size:125%;
font-weight:normal !important;
}
#sideBar ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#sideBar li{
margin:0px 10px 3px 10px;
padding:2px;
list-style-type:none;
display:block;
background-color:#DA1074;
width:177px;
color:#FFFFFF;
}
#sideBar li a{
width:100%;
}
#sideBar li a:link,
#sideBar li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:100%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0px;
width:100%;
}
#sideBar li a:hover{
color:#FFFFFF;
text-decoration:underline;
}
#sideBar{
position: absolute;
width: auto;
height: auto;
top: 140px;
right:0px;
background-image:url(https://example.com/wp-content/js/sliding-side-bar-scriptaculous/images/background.gif);
background-position:top left;
background-repeat:repeat-y;
}
#sideBarTab{
float:left;
height:137px;
width:28px;
}
#sideBarTab img{
border:0px solid #FFFFFF;
}
#sideBarContents{
float:left;
overflow:hidden !important;
width:200px;
height:320px;
}
#sideBarContentsInner{
width:200px;
}
-->
</style>
<!-- メイン部分 -->
<div id="sideBar"><a href="#" id="sideBarTab"><img src="example.com/wp-content/js/sliding-side-bar-scriptaculous/images/slide-button.gif" title="sideBar" alt="sideBar" /></a>
<div style="display: none;" id="sideBarContents">
<div id="sideBarContentsInner"><h2>side<span>bar</span></h2>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</ul>
</div>
</div>
</div>
と、いう感じで記述して、あとはスタイル部分をお好みで変更するだけです。<style type="text/css">
<!--
a{
outline: none;
}
a:active{
outline: none;
}
#sideBar{
text-align:left;
}
#sideBar h2{
color:#FFFFFF;
font-size:110%;
font-family:arial;
margin:10px 10px 10px 10px;
font-weight:bold !important;
}
#sideBar h2 span{
font-size:125%;
font-weight:normal !important;
}
#sideBar ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#sideBar li{
margin:0px 10px 3px 10px;
padding:2px;
list-style-type:none;
display:block;
background-color:#DA1074;
width:177px;
color:#FFFFFF;
}
#sideBar li a{
width:100%;
}
#sideBar li a:link,
#sideBar li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:100%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0px;
width:100%;
}
#sideBar li a:hover{
color:#FFFFFF;
text-decoration:underline;
}
#sideBar{
position: absolute;
width: auto;
height: auto;
top: 140px;
right:0px;
background-image:url(https://example.com/wp-content/js/sliding-side-bar-scriptaculous/images/background.gif);
background-position:top left;
background-repeat:repeat-y;
}
#sideBarTab{
float:left;
height:137px;
width:28px;
}
#sideBarTab img{
border:0px solid #FFFFFF;
}
#sideBarContents{
float:left;
overflow:hidden !important;
width:200px;
height:320px;
}
#sideBarContentsInner{
width:200px;
}
-->
</style>
<!-- メイン部分 -->
<div id="sideBar"><a href="#" id="sideBarTab"><img src="example.com/wp-content/js/sliding-side-bar-scriptaculous/images/slide-button.gif" title="sideBar" alt="sideBar" /></a>
<div style="display: none;" id="sideBarContents">
<div id="sideBarContentsInner"><h2>side<span>bar</span></h2>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</ul>
</div>
</div>
</div>
サンプル
こちらになります。以上終了です。
最上階
1階
関係のある記事
1 user の書き込みがあります
黒背景での導入
body{
background-color:#666;
}
slide-button-active.gifの時、その下部に白色部分が残るのですけど、消す方法有りますか。
height:320px; 高さ分 白色
以上の件、宜しくお願い致します。
コメントほしぃ～よぉ～ σ(^◇^;)