Home > スポンサー広告 > ManuNavigation:クリックで格好良く展開させるナビメニュー


スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 Comments:-

Comment Form

 Trackback+Pingback:-

TrackBack URL for this entry
http://blackcat13numbers.blog31.fc2.com/tb.php/206-34b04df4
Listed below are links to weblogs that reference
スポンサーサイト from TRASH
Trackback from 2009-04-26 (日) 18:07

-

管理人の承認後に表示されます (more…)

Home > スポンサー広告 > ManuNavigation:クリックで格好良く展開させるナビメニュー

Home > IT Tips > ManuNavigation:クリックで格好良く展開させるナビメニュー


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

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

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

2.保存したこれらをアップロード
3.<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>
4.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;
}
※カスタマイズ可能ですのでお好みでどうぞ

5.適用させたい記事で以下のような記述をする
<div class="arrowlistmenu">
<h3 class="menuheader expandable">親カテゴリ1</h3>
<ul class="categoryitems">
<li><a href="#">カテゴリ1:日記</a></li>
<li><a href="#">カテゴリ2:IT Tips</a></li>
<li><a href="#">カテゴリ3:PC Tips</a></li>
<li><a href="#">カテゴリ4:FC2 Tips</a></li>
</ul>
<h3 class="menuheader expandable">親カテゴリ2</h3>
<ul class="categoryitems">
<li><a href="#">カテゴリ1:日記</a></li>
<li><a href="#">カテゴリ2:IT Tips</a></li>
<li><a href="#">カテゴリ3:PC Tips</a></li>
<li><a href="#">カテゴリ4:FC2 Tips</a></li>
</ul>
</div>
スポンサーサイト

 Comments:0

Comment Form

 Trackback+Pingback:1

TrackBack URL for this entry
http://blackcat13numbers.blog31.fc2.com/tb.php/206-34b04df4
Listed below are links to weblogs that reference
ManuNavigation:クリックで格好良く展開させるナビメニュー from TRASH
Trackback from 2009-04-26 (日) 18:07

-

管理人の承認後に表示されます (more…)

Home > IT Tips > ManuNavigation:クリックで格好良く展開させるナビメニュー

Recent Comments
Recent Trackback
Feeds

↑Page Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。