TOC

34. sideNav（サイドナビ）

パーツリストに戻る

表示例

ソース

html

<div class="parts diaryMessageSideMenu">
<div class="item pageNav"><ul>
<li class="looking">受信メッセージ</li>
<li><a href="./?m=pc&amp;a=page_h_message_box&amp;box=outbox">送信済みメッセージ</a></li>
<li><a href="./?m=pc&amp;a=page_h_message_box&amp;box=savebox">下書きメッセージ</a></li>
<li><a href="./?m=pc&amp;a=page_h_message_box&amp;box=trash">ごみ箱</a></li>
</ul></div>
<div class="item calendar">
<h3><a href="./?m=pc&amp;a=page_h_message_box&amp;target_c_member_id=&amp;box=inbox&amp;year=2008&amp;month=1">＜</a>2月のカレンダー</h3>
<table class="calendar">
<colgroup class="sun"></colgroup>
<colgroup class="mon"></colgroup>
<colgroup class="tue"></colgroup>
<colgroup class="wed"></colgroup>
<colgroup class="thu"></colgroup>
<colgroup class="fri"></colgroup>
<colgroup class="sat"></colgroup>
<tbody><tr>
<th class="sun">日</th>
<th class="mon">月</th>
<th class="tue">火</th>
<th class="wed">水</th>
<th class="thu">木</th>
<th class="fri">金</th>
<th class="sat">土</th>
</tr><tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
</tr><tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr><tr>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr><tr>
<td><a href="./?m=pc&amp;a=page_h_message_box&amp;target_c_member_id=&amp;year=2008&amp;month=2&amp;day=17&amp;box=inbox">17</a></td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
</tr><tr>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td></td>
</tr>
</tbody></table>
</div>
<div class="item monthlyMessage">
<h3>各月のメッセージ</h3>
<ul class="list">
<li><a href="./">yyyy年mm月の一覧</a></li>
<li><a href="./">yyyy年mm月の一覧</a></li>
<li><a href="./">yyyy年mm月の一覧</a></li>
<li><a href="./">yyyy年mm月の一覧</a></li>
<li><a href="./">yyyy年mm月の一覧</a></li>
</ul>
</div>
<div class="item recentlyDiary">
<h3>最近の日記</h3>
<ul class="list">
<li><a href="./">タイトル</a></li>
<li><a href="./">タイトルタイトルタイトルタイトル</a></li>
<li><a href="./">タイトル</a></li>
<li><a href="./">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a></li>
<li><a href="./">タイトル</a></li>
</ul>
</div>
<div class="item recentlyComment">
<h3>最近のコメント</h3>
<ul class="list">
<li><a href="./">一覧を見る</a></li>
</ul>
</div>
<div class="item monthlyDiary">
<h3>各月の日記</h3>
<ul class="list">
<li><a href="./">yyyy年mm月の一覧</a></li>
<li><a href="./">yyyy年mm月の一覧</a></li>
<li><a href="./">yyyy年mm月の一覧</a></li>
<li><a href="./">yyyy年mm月の一覧</a></li>
<li><a href="./">yyyy年mm月の一覧</a></li>
</ul>
</div>

template

CSS

/*==============================================================================
 * 16. 日記系・メッセージ系サイドメニュー（diaryMessageSideMenu）
 *----------------------------------------------------------------------------*/
.diaryMessageSideMenu div.item {
	overflow: hidden;
	width: 150px;
	margin: 0 auto 10px;
	border: 8px solid #cccccc;
}
.diaryMessageSideMenu .pageNav ul {
	border: 1px solid #ffffff;
}
.diaryMessageSideMenu .pageNav li {
	padding: 4px 0 4px 18px;
	background: url(./skin/default/img/icon_1.gif) 8px 50% no-repeat scroll;
}
.diaryMessageSideMenu .pageNav li.looking {
	background-color: #eeeeee;
}
.diaryMessageSideMenu .calendar h3 {
	width: auto;
	margin: 0;
	padding: 4px 0;
	border: none;
	background: none;
	text-align: center;
}
.diaryMessageSideMenu .calendar th {
	background-color: #eeeeee;
}
.diaryMessageSideMenu .calendar td {
	padding: 1px 2px;
}
.diaryMessageSideMenu .list {
	padding: 4px 0;
}
.diaryMessageSideMenu .list li {
	padding-left: 16px;
	background: no-repeat 6px 4px;
}
.diaryMessageSideMenu .monthlyMessage li  { background-image: url(./skin/default/img/icon_1.gif); }
.diaryMessageSideMenu .recentlyDiary li   { background-image: url(./skin/default/img/icon_3.gif); }
.diaryMessageSideMenu .recentlyComment li { background-image: url(./skin/default/img/icon_1.gif); }
.diaryMessageSideMenu .monthlyDiary li    { background-image: url(./skin/default/img/icon_2.gif); }

関連情報

• チケット：#1941
• XHTML+CSS化プロジェクト