【スマホ】ドロップダウンメニューバーを作成したい |
||
(0)
このようなドロップダウンリストを作りたいという要望があったため、作成しました。
現在では、『カテゴリ一覧』と『コメント一覧』を対象としています。
それでは早速ご紹介したいと思います。
スポンサードリンク
まず、メニューバーを取り付けてください。
（今回は私の使っているメニューバーを使用しています。01SP_Grayを使用してくださっている方は既に記述されていると思います。）
HTML編集
<!--▼上部メニュー▼-->
<ul id="menu_bar">
<li><a href="<%url>">HOME</a></li>
<li><a href="<%url>?mp=326">CATEGORY</a></li>
<li><a href="<%url>?mp=442">COMMENT</a></li>
<li class="menu_bar_end"><a href="<%url>?pc">PC表示</a></li>
</ul>
<!--▲上部メニュー▲-->
スタイルシート編集
/*============================================================
●●上部メニューバー●●
============================================================*/
/****************************** ▼メニューバー▼ */
#menu_bar li.menu_bar_end a {
border-right:none;
}
ul#menu_bar {
font-size: 80%; /* 文字サイズ */
height:30px; /* 高さ */
background-color:#333333; /* 背景色 */
padding-top:0px;
margin-left:0px;
margin-top:0px; /* 上の間隔 */
color:#ffffff; /* リンク文字の色 */
background-color:#333333; /* メニューボタンの背景 */
text-decoration:none;
border-bottom:5px solid #666666; /* 下飾り線 */
}
#menu_bar li {
list-style-type:none;
float:left;
line-height:30px; /* 高さ */
margin:0px;
width:25%;
padding:0px;
}
#menu_bar li a {
height: 30px;
display:block;
text-align:center;
border-right:1px solid #999999; /* 区切り線 */
color:#ffffff; /* リンク文字の色 */
background-color:#333333; /* メニューボタンの背景 */
text-decoration:none;
border-bottom:5px solid #666666; /* 下飾り線 */
}
#menu_bar li a:hover{
color:#66ccff; /* 触れた時の文字色 */
background-color:#333333; /* 触れたときの背景色 */
text-decoration:none;
border-bottom:5px solid #66ccff; /* 下飾り線 */
}
/****************************** ▲メニューバー▲ */
メニューバーの取り付けが完了したら、次はHTMLを少し書き換えます。
上記のHTMLに赤い部分を追加してください。
HTML書き換え
<!--▼上部メニュー▼-->
<ul id="menu_bar">
<li><a href="<%url>">HOME</a></li>
<li id="slider_cate_bar"><a href="<%url>#cate">CATEGORY</a></li>
<li id="slider_comm_bar"><a href="<%url>#comm">COMMENT</a></li>
<li class="menu_bar_end"><a href="<%url>?pc">PC表示</a></li>
</ul>
<!--▲上部メニュー▲-->
<!--▼ドロップダウン カテゴリ▼-->
<nav id="slider_cate" style="display:none;">
<ul class="plugin_list">
<!--category-->
<li>
<a href="<%url>?cat=<%category_number><%tail_url>" style="color:&plugin_tcolor;">
<%category_name>（<%category_count>）
</a>
</li>
<!--/category-->
</ul>
</nav>
<!--▲ドロップダウン カテゴリ▲-->
<!--▼ドロップダウン コメント▼-->
<nav id="slider_comm" style="display:none;">
<ul class="plugin_list">
<!--rcomment-->
<li>
<a href="<%url>?no=<%rcomment_keyno>&m2=res<%tail_url>">
<em style="color:&plugin_tcolor;"><%rcomment_title></em><br />
<span><%rcomment_year>年<%rcomment_month>月<%rcomment_day>日</span>
</a>
</li>
<!--/rcomment-->
</ul>
</nav>
<!--▲ドロップダウン コメント▲-->
また、自分のPCでテキストファイルを用意してください。
slider_cate.txt
$(function() {
var $slider_cate = $('#slider_cate');
$('#slider_cate_bar').click(
function() {
$slider_cate.slideToggle('fast');
}
).toggle(
function() {
$ad_header.css('visibility', 'hidden');
},
function() {
$ad_header.css('visibility', 'visible');
}
);
});
以上の記述をしたあとに、ファイル名をslider_cate.jsにしてください。
同様に、
slider_comm.txt
テキストファイルの中に記述し、ファイル名をslider_comm.jsに変更してください。$(function() {
var $slider_comm = $('#slider_comm');
$('#slider_comm_bar').click(
function() {
$slider_comm.slideToggle('fast');
}
).toggle(
function() {
$ad_header.css('visibility', 'hidden');
},
function() {
$ad_header.css('visibility', 'visible');
}
);
});
【ファイルアップロード】から、この２つのslider_cate.jsとslider_comm.jsファイルをアップロードしてください。
アップロード後、２つの.jsファイルにURLが与えられます。
<script type="text/javascript" src="slider_cate.jsファイルのURL"></script>
<script type="text/javascript" src="slider_comm.jsファイルのURL"></script>
この２行をHTMLの<head>～</head>内に記述してください。
このようにすることで、ドロップダウンリストが完成すると思います。
グレーが基本色のテンプレートです。
メインカラー ：#444444
メニューカラー：#333333
サブカラー ：#EFEFEF
ラインカラー ：#999999
で主に構成しています。CSSにて色指定箇所を置換すれば簡単に色替えが可能です。 お好みの色に変更して楽しんでください。
SP01_Blue
爽やかな水色が基本色のテンプレートです。
必ず結果が出るブログ運営テクニック
もっとカスタマイズしたい方必見！
毎日メンテナンスするだけで･･･
