Home > 20080613

20080613

ManuNavigation：クリックで格好良く展開させるナビメニュー

2008-06-13 (Fri)

IT Tips

Tips
JavaScript
CSS
DHTML

前回の記事（以下リンク）で紹介したクリックで展開されるメニューの格好良い版を紹介しようかと思います。今回のはクリックすると、ゆっくりと展開されるのでサイトに組み込むと閲覧者にお洒落だなと感じさせられるかも知れません。

Menutitle：親メニュークリックで子メニューを表示させる

上記は、ver1.0版ですが、以下で紹介しているデモや実装方法は、ver2.0版なのでもうちょっと格好良いメニュータイトルができます。
Menutitleのサンプルはこちら １．js（manunavigation(2).js/jquerypack.js）計３種をダウンロード manunavigation.js
jquerypack.js
manunavigation2.js ※右クリックで「名前を付けてリンク先を保存」で保存ください
※保存時のエンコードはもちろん「EUC」です

２．保存したこれらをアップロード
３．<head> ～ </head> に以下を記述

<script type="text/javascript" src="/file/manunavigation.js"></script>
<script type="text/javascript" src="/file/jquerypack.js"></script>
<script type="text/javascript" src="/file/manunavigation2.js"></script>

４．CSSに以下を記述

.arrowlistmenu {
        width: 180px; /*width of accordion menu*/
}
.arrowlistmenu .menuheader { /*CSS class for menu headers in general (expanding or not!)*/
        font: bold 14px Arial;
        color: white;
        background: black url(titlebar.png) repeat-x center left;
        margin-bottom: 10px; /*bottom spacing between header and rest of content*/
        text-transform: uppercase;
        padding: 4px 0 4px 10px; /*header text is indented 10px*/
        cursor: hand;
        cursor: pointer;
}
.arrowlistmenu .openheader { /*CSS class to apply to expandable header when it's expanded*/
        background-image: url(titlebar-active.png);
}
.arrowlistmenu ul { /*CSS for UL of each sub menu*/
        list-style-type: none;
        margin: 0;
        padding: 0;
        margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}
.arrowlistmenu ul li {
        padding-bottom: 2px; /*bottom spacing between menu items*/
}
.arrowlistmenu ul li a {
        color: #A70303;
        background: url(arrowbullet.png) no-repeat center left; /*custom bullet list image*/
        display: block;
        padding: 2px 0;
        padding-left: 19px; /*link text is indented 19px*/
        text-decoration: none;
        font-weight: bold;
        border-bottom: 1px solid #dadada;
        font-size: 90%;
}
.arrowlistmenu ul li a:visited {
        color: #A70303;
}
.arrowlistmenu ul li a:hover { /*hover state CSS*/
        color: #A70303;
        background-color: #F3F3F3;
}

※カスタマイズ可能ですのでお好みでどうぞ

５．適用させたい記事で以下のような記述をする

<div class="arrowlistmenu">
<h3 class="menuheader expandable">親カテゴリ１</h3>
<ul class="categoryitems">
<li><a href="#">カテゴリ１：日記</a></li>
<li><a href="#">カテゴリ２：IT Tips</a></li>
<li><a href="#">カテゴリ３：PC Tips</a></li>
<li><a href="#">カテゴリ４：FC2 Tips</a></li>
</ul>
<h3 class="menuheader expandable">親カテゴリ２</h3>
<ul class="categoryitems">
<li><a href="#">カテゴリ１：日記</a></li>
<li><a href="#">カテゴリ２：IT Tips</a></li>
<li><a href="#">カテゴリ３：PC Tips</a></li>
<li><a href="#">カテゴリ４：FC2 Tips</a></li>
</ul>
</div>

Home > 20080613

Search

Adsense

Calendar

Categories

Tagcloud

Archives

« 2008/06 »
S	M	T	W	T	F	S
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	-	-	-	-	-

Recent Comments

Recent Trackback

Feeds

↑Page Top