;

しんみゆ.com

群馬県高崎市在住の夫婦で日記というか、つぶやきブログしてます:しんみゆ.com

アコーディオンメニュー:高さ自動調整と、初期表示タブの指定

アコーディオンメニューのカスタマイズをしてみた。

【表示例】

</body>の直前に記述する、

<script type=”text/javascript” language=”JavaScript”>// <![CDATA[
var Accordion1 = new Spry.Widget.Accordion(“Accordion1”, { useFixedPanelHeights:false, defaultPanel:1});
// ]]></script>

useFixedPanelHeights:false,
で、内容の容量で高さが調整され、

defaultPanel:1
で、2個目のタブが開いたままになる

という指示を出している。

defaultPanel:0 は,1個目のタブ
defaultPanel:1 は、2個目のタブ
defaultPanel:2 は、3個目のタブ

という具合です。

 
コード記述例↓

【html】
<!DOCTYPE html>

<html dir=”ltr” lang=”ja”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>

<title>アコーディオンメニュー</title>

<script src=”http://各サイトの任意の場所/SpryAssets/SpryAccordion.js” type=”text/javascript”></script>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
<link href=”SpryAssets/SpryAccordion.css” rel=”stylesheet” type=”text/css”>
</head>

<body>
<div id=”Accordion1″ class=”Accordion” tabindex=”0″>

<div class=”AccordionPanel”>

<div class=”AccordionPanelTab”>1個目のタブ</div>

<div class=”AccordionPanelContent”>

<h2>見出しh2</h2>

<ul>
<li>1個目のタブ項目テキスト</li>
<li>項目テキスト</li>
</ul>

<h2>見出しh2</h2>
<h3>見出しh3</h3>

<ul>
<li>1個目のタブ項目テキスト</li>
<li>項目テキスト</li>
</ul>

</div>
</div>

<div class=”AccordionPanel”>

<div class=”AccordionPanelTab”>2個目のタブ</div>

<div class=”AccordionPanelContent”>

<h2>見出しh2</h2>

<ul>
<li>2個目のタブ項目テキスト</li>
<li>項目テキスト</li>
</ul>

<h2>見出しh2</h2>
<h3>見出しh3</h3>

<ul>
<li>2個目のタブ項目テキスト</li>
<li>項目テキスト</li>
</ul>

</div>
</div>
</div>
<script language=”JavaScript”>
var Accordion1 = new Spry.Widget.Accordion(“Accordion1”, { useFixedPanelHeights:false, defaultPanel:1});
</script>
</body>

</html>

 
 
【css】
.Accordion {
border-left: solid 1px #FFF;
border-right: solid 1px #FFF;
border-bottom: solid 1px #FFF;
overflow: hidden;
margin-bottom: 15px;
}
.AccordionPanel {
margin: 0px;
padding: 0px;
}
.AccordionPanelTab {
border-top: solid 1px #FFF;
border-bottom: solid 1px #FFF;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
background: #0097cf;
color: #FFF;
font-weight: bold;
line-height: 40px;
height: 40px;
}

.AccordionPanelContent {
overflow: auto;
margin: 0px;
padding: 8px;
border: 10px solid #d5f0fa;
text-align: left;
}
.Accordion h2 {
font-size: 16px;
font-weight: bold;
color: #005b7d;
margin: 0px;
padding: 0px;
}
.Accordion h3 {
font-size: 14px;
font-weight: bold;
margin: 0px;
padding: 0px;
color: #005b7d;
background: url(../images/side/arrow01.gif) no-repeat 0px 4px;
padding-left: 15px;
}
.Accordion h4 {
font-size: 14px;
color: #005B7D;
margin: 0px;
padding: 0px;
}

.Accordion .AccordionPanelContent ul {
padding-bottom: 10px;
}

.Accordion .AccordionPanelContent ul li {
line-height: 1.6em;
background: url(../images/side/arrow02.gif) no-repeat 0px 4px;
padding-left: 14px;
list-style: none;
}
.Accordion .AccordionPanelContent ul li a {
text-decoration: none;
}
.AccordionPanelOpen .AccordionPanelTab {
background: #0097cf;
}
.AccordionPanelTabHover {
color: #FFC;
}
.AccordionPanelOpen .AccordionPanelTabHover {
color: #FFC;
}
.AccordionFocused .AccordionPanelTab {
background-color: #3399FF;
}
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
background: #00AFF2;
}
@media print {

.Accordion {
overflow: visible !important;
}

.AccordionPanelContent {
display: block !important;
overflow: visible !important;
height: auto !important;
}
}
.text_80 {
font-size: 80%;
}

 

%d人のブロガーが「いいね」をつけました。

ページトップ