◆無料のCSSメニューテンプレート

 

◆インストール

1： 『style.css』『jquery.min.js』をディレクトリにアップロードしてください。

2： 下記のHTMLコードをコピーして、ペーストしてください。

<ul id="menu-jq2"> <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-jq2 li").prepend("<SPAN></SPAN>");
 $("#menu-jq2 li").each(function() {
 var linkText = $(this).find("a").html();
 $(this).find("span").show().html(linkText);
 });

 $("#menu-jq2 li").hover(function() {
 $(this).find("span").stop().animate({
 marginTop: "-32"
 }, 500);
 } , function() {
 $(this).find("span").stop().animate({
 marginTop: "0"
 }, 500);
 });
 });
</script>