【スマホ】ドロップダウンメニューバーを作成したい |
||
このようなドロップダウンリストを作りたいという要望があったため、作成しました。
現在では、『カテゴリ一覧』と『コメント一覧』を対象としています。
それでは早速ご紹介したいと思います。
スポンサードリンク
まず、メニューバーを取り付けてください。
(今回は私の使っているメニューバーを使用しています。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');
}
);
});
【ファイルアップロード】から、この2つのslider_cate.jsとslider_comm.jsファイルをアップロードしてください。
アップロード後、2つの.jsファイルにURLが与えられます。
<script type="text/javascript" src="slider_cate.jsファイルのURL"></script>
<script type="text/javascript" src="slider_comm.jsファイルのURL"></script>
この2行をHTMLの<head>~</head>内に記述してください。
このようにすることで、ドロップダウンリストが完成すると思います。