7、ホームページ制作Dreamweaver(浮遊動的階層ナビゲーション)

浮遊ダイナミック階層ナビゲーションの作成:
1、まずでJQUERYのファイルを引用してマウスクリックアニメーション効果を作る(サイトからダウンロードすればいい)

1 <script language="javascript" type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

 
2、divを挿入する(ここで私のdivはアンカー効果があり、すでに赤でアンカーを表示し、ページの先端に位置している.つまりの最初の場所にtopと書いてある.nameに初期値を与えなければ、a href="#"と書いても先端に戻る効果がある)

 1 <div id="apDiv1" ><img src="img/logo.bmp" />

 2   <nav id="menu">

 3   <div class="daohang" style="background-image:url(img/bg.png)">

 4       <a href="index.html"><div style="background-image:url(img/menu-hover.png); color:#fff">  </div></a>

 5       <a href="about us.html" target="_blank"><div>

 6           </div></a>      

 7       

 8       <a href="services.html" target="_blank"><div>    </div></a>

 9       

10       <a href="price list.html" target="_blank"><div>    </div></a>

11        

12       <a href="contact.html" target="_blank"><div>    </div></a>

13       

14   </div>

15   </nav>

16   <div style="color:#fff;line-height:35px; background-image:url(img/menu-hover.png); border:solid medium #965D28; margin-top:3px;" onclick="menuvisible()">

17   <input style="color:#fff; border:none; width:100%; background-image:url(img/menu-hover.png); font-family:'  '; font-size:16px; height:100%; line-height:35px;"type="button" value="<--MENU-->" /></div>

18   <div style="background-image:url(img/bg.png)"><a href="#top"style="text-decoration:none; color:#965D28;line-height:30px;">TOP</a></div>

19 </div>

 
3、CSSスタイルシートの作成(いくつかの属性設定は必要な属性に変えればいい)

 1 /*————  —————*/

 2 #apDiv1 {

 3     position:fixed;//fixed;left:auto;top:auto         
 4     left: auto;

 5     top: auto;

 6     bottom:auto;

 7     width: 237px;

 8     height:auto;

 9     z-index: 2;

10     margin-top:-8px;

11     margin-left:40px;

12     text-align:center;

14     font-size:16px;

15     font-family:"  ";

16     color:#965D28;

17     background-image:url(../img/bg.png);

18     }

19 #menu{

20     display:none;

21 }

22 .daohang div{

23     height: 30px;

24     z-index: 2;

25     margin:0 auto;

26     text-align:center;

27     padding-top:5px;

28     overflow:hidden;

29     padding-top:10px;

30     color:965D28;

31 }

32 .daohang div:hover{

33     height:30px;

34     z-index:2;

35     margin:0 auto;

36     background-image:url(../img/menu-hover.png);

37     text-align:center;

38     overflow:visible;

39     color:#fff;

40 }

41 

42 .daohang li{

43     margin-left:237px;

44     list-style-type:none;

45     background-color:#D3A23A;

46     width:160px;

47     line-height:30px;

48     color:#422B1D;

49     position:relative;

50     top:-40px;

51     background-image:url(../img/bg.jpg);

52     border:solid thin;

53     border-color:#965D28;

54     z-index:1;

55     }

56 .daohang li:hover{

57     margin-left:237px;

58     list-style-type:none;

59     background-color:#D3A23A;

60     width:160px;

61     line-height:50px;

62     color:#fff;

63     position:relative;

64     top:-40px;

65     border:solid thin;

66     border-color:#965D28;

67     background-image:url(../img/bg.png);

68     z-index:1;

69     }

70 .daohang a:link,a:visited{

71     text-decoration:none;

72     color:#965D28;

73 }

74 .daohang a:hover{

75     text-decoration:none;

76     color:#fff;

77 }

4、マウスクリックイベントのトリガー(bodyに書く)

1 <script>

2 　　function menuvisible() {

3 　　$("nav").toggle();/*  */

4 　　}    

5 </script>

これで、ナビ作成終了~
jQueryの詳細については、「8、ホームページ制作Dreamweaver（jQuery基礎：インストール、文法）」を参照してください.