折りたたみカテゴリバー | スタンダード・デザインラボ

fc2ブログ

カスタマイズ

折りたたみカテゴリバー

　こちらでカスタマイズした、折りたたみ式親子カテゴリを、スタイルシートで整形してみました。
　ちょっと、「ネガティブマージン」という強引な感じですが、良かったら使ってみてください。

※プレビューはこんな感じです。

FC2用テンプレート(32)

テンプレート別カスタム詳細(38)

実用CSS(40)

FC2テンプレート作成編(24)

Javaスクリプト(21)

コルクマ(10)

お知らせ(58)

【HTML】

<div class="sdl_menu">
<!--category-->
<!--category_sub_begin-->
<div class="sdl_input">
<button onclick="categoryclick(<%category_no>)" id="sdl_form_input_<%category_no>">▼</button>
</div>
    <div class="sdl_sub_menu" id="category_<%category_no>" style="display:none;">
  <!--/category_sub_begin-->
  <!--category_nosub-->
    <div class="sdl_list">
  <!--/category_nosub-->
  <!--category_parent-->
    <div class="sdl_list">
  <!--/category_parent-->
  <!--category_sub_hasnext-->
    <div class="sdl_list">
  <!--/category_sub_hasnext-->
  <!--category_sub_end-->
    <div class="sdl_list">
  <!--/category_sub_end-->
    <a href="<%category_link>" title="<%category_name>"><%category_name>(<%category_count>)</a>
  <!--category_nosub-->
    </div>
  <!--/category_nosub-->
  <!--category_sub_hasnext-->
    </div>
  <!--/category_sub_hasnext-->
  <!--category_parent-->
    </div>
  <!--/category_parent-->
  <!--category_sub_end-->
    </div>
    </div>
  <!--/category_sub_end-->
<!--/category-->
</div>
<script>
function categoryclick(CATEGORYNUMBER){
CATEGORYDISPLAY=document.getElementById("category_"+CATEGORYNUMBER).style.display;
if (CATEGORYDISPLAY.length==4) {
document.getElementById("category_"+CATEGORYNUMBER).style.display="block";
document.getElementById("sdl_form_input_"+CATEGORYNUMBER).innerHTML="▲";
} else {
document.getElementById("category_"+CATEGORYNUMBER).style.display="none";
document.getElementById("sdl_form_input_"+CATEGORYNUMBER).innerHTML="▼";
}
}
</script>

【CSS】

.sdl_menu{
font-size:12px;
line-height:1.3;
padding-left:25px;
}
.sdl_input{
margin:-14px 0 0 -20px;
}
.sdl_input button{
font-size:10px;
border:0;
background-color:transparent;
cursor:pointer;
}
.sdl_sub_menu{
padding:3px 10px 10px;
}

【HTML】＋【CSS】一体型（プラグインにコピペするだけ）

<div class="sdl_menu">
<!--category-->
<!--category_sub_begin-->
<div class="sdl_input">
<button onclick="categoryclick(<%category_no>)" id="sdl_form_input_<%category_no>">▼</button>
</div>
    <div class="sdl_sub_menu" id="category_<%category_no>" style="display:none;">
  <!--/category_sub_begin-->
  <!--category_nosub-->
    <div class="sdl_list">
  <!--/category_nosub-->
  <!--category_parent-->
    <div class="sdl_list">
  <!--/category_parent-->
  <!--category_sub_hasnext-->
    <div class="sdl_list">
  <!--/category_sub_hasnext-->
  <!--category_sub_end-->
    <div class="sdl_list">
  <!--/category_sub_end-->
    <a href="<%category_link>" title="<%category_name>"><%category_name>(<%category_count>)</a>
  <!--category_nosub-->
    </div>
  <!--/category_nosub-->
  <!--category_sub_hasnext-->
    </div>
  <!--/category_sub_hasnext-->
  <!--category_parent-->
    </div>
  <!--/category_parent-->
  <!--category_sub_end-->
    </div>
    </div>
  <!--/category_sub_end-->
<!--/category-->
</div>
<script>
function categoryclick(CATEGORYNUMBER){
CATEGORYDISPLAY=document.getElementById("category_"+CATEGORYNUMBER).style.display;
if (CATEGORYDISPLAY.length==4) {
document.getElementById("category_"+CATEGORYNUMBER).style.display="block";
document.getElementById("sdl_form_input_"+CATEGORYNUMBER).innerHTML="▲";
} else {
document.getElementById("category_"+CATEGORYNUMBER).style.display="none";
document.getElementById("sdl_form_input_"+CATEGORYNUMBER).innerHTML="▼";
}
}
</script>
<style>
.sdl_menu{
font-size:12px;
line-height:1.3;
padding-left:25px;
}
.sdl_input{
margin:-14px 0 0 -20px;
}
.sdl_input button{
font-size:10px;
border:0;
background-color:transparent;
cursor:pointer;
}
.sdl_sub_menu{
padding:3px 10px 10px;
}
</style>

スタイルシートの説明

.sdl_menu{（全体を包むブロック）
font-size:12px;
line-height:1.3;
padding-left:25px;
}
.sdl_input{（▲▼ボタンを囲むボックス）
margin:-14px 0 0 -20px;
}
.sdl_input button{（▲▼ボタン）
font-size:10px;
border:0;
background-color:transparent;
cursor:pointer;
}
.sdl_sub_menu{（子カテゴリを囲むボックス）
padding:3px 10px 10px;
}

スポンサーリンク

Sun.01.16.2011

Comment

Trackback

Trackback URL

この記事にトラックバックする(FC2ブログユーザー)

Comment Form

質問するときは？

不具合が出ているページのURLを書き込む。
使っているブラウザ（IE、Firefoxなど）を書き込む※IE6はサポート外です。
次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。

コメント時の注意

やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム

« PREV Home NEXT »

まずはブログを作ろう

ブログに人を呼ぶ

FC2用テンプレート

カスタマイズ

スタイルシート入門

Javaスクリプト講座

FC2テンプレート制作講座

コルクマワールド

スタンダード・デザインラボ・Ninja

Tools

小見出しメーカーサンプル

Project

3FaithBlack徹底攻略

Bookmarks

Copyright © SAKILab All Rights Reserved.