テンプレートによる無料素材：ＣＳＳ メニューボタン 横並び水平
スタイリッシュなCSSメニューを揃えてみました。そのままソースをダウンロードすることが出来ます。
色味、メニュー数のカスタマイズは自由にどうぞ。
テンプレートMenu #jq1
jQueryを用いた横並びメニューNo1 Update : 09/09/23
Download
設置方法
インストール
1： 『style.css』『jquery.min.js』をディレクトリにアップロードしてください。
2： 下記のHTMLコードをコピーして、ペーストしてください。
<![CDATA[
<ul id="menu-jq1">
<li><a href="#">SAMPLE</a></li>
<li><a href="#">SAMPLE</a></li>
<li><a href="#">SAMPLE</a></li>
<li><a href="#">SAMPLE</a></li>
<li><a href="#">SAMPLE</a></li>
<li><a href="#">SAMPLE</a></li>
</ul>
]]>
HTMLファイルから外部Style Sheet・外部JavaScriptへリンク
1： 外部Style Sheet・外部JavaScriptを利用したいHTMLファイルのソースにリンク設定を追加する。各HTMLファイルの<head></head>の間に下記のコードを入力。
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#menu-jq1 li").prepend("<SPAN></SPAN>");
$("#menu-jq1 li").each(function() {
var linkText = $(this).find("a").html();
$(this).find("span").show().html(linkText);
});
$("#menu-jq1 li").hover(function() {
$(this).find("span").stop().animate({
marginTop: "-32"
}, 250);
} , function() {
$(this).find("span").stop().animate({
marginTop: "0"
}, 250);
});
});
</script>