Вставить собственное меню в шаблон

!!! ИЗВЕНЯЮ НО Я НОВИЧОК !!!
нарыл интересные исходники кругового меню в PHP и CSS но как их добавить в свой шаблон?

задача такая:
1. создать шаблон с анимированной подложкой, т.е. чтобы на картинки былоа вращающаяся галактика
2. как эти исходники прикрутить к этому шаблону но так чтобы они читали пункты меню динамически т.е. если прибавляються пункты то и меню увеличиваеться, убавляються пункты соответсвенно и менб становиться меньше
3. надо сделать чтобы меню было на главной странице шаблона, и при нажатии на пукт переходила на другой шаблон
4. и может это можно как то оформить в компонет?

Код (PHP):

1. <div id="info">
2.  
3. <h2>A circular menu with sub menus</h2>
4. <h3>10th November 2008</h3>
5.  
6. <ul id="menu">
7.     <li class="home"><a href="#url"><b>HOME</b></a></li>
8.     <li class="pencil"><a href="#url"><b>DRAW</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
9.     <!--[if lte IE 6]><table><tr><td><![endif]-->
10.         <ul>
11.             <li><a class="p1 pencil1" href="#url"><b>Draw 1</b></a></li>
12.             <li><a class="p2 pencil2" href="#url"><b>Draw 2</b></a></li>
13.         </ul>
14.     <!--[if lte IE 6]></td></tr></table></a><![endif]-->
15.     </li>
16.     <li class="chat"><a href="#url"><b>CHAT</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
17.     <!--[if lte IE 6]><table><tr><td><![endif]-->
18.         <ul>
19.             <li><a class="p2 chat1" href="#url"><b>Chat 1</b></a></li>
20.             <li><a class="p3 chat2" href="#url"><b>Chat 2</b></a></li>
21.             <li><a class="p4 chat3" href="#url"><b>Chat 3</b></a></li>
22.             <li><a class="p5 chat4" href="#url"><b>Chat 4</b></a></li>
23.         </ul>
24.     <!--[if lte IE 6]></td></tr></table></a><![endif]-->
25.     </li>
26.     <li class="image"><a href="#url"><b>PHOTO</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
27.     <!--[if lte IE 6]><table><tr><td><![endif]-->
28.         <ul>
29.             <li><a class="p3 image1" href="#url"><b>Photo 1</b></a></li>
30.             <li><a class="p4 image2" href="#url"><b>Photo 2</b></a></li>
31.             <li><a class="p5 image3" href="#url"><b>Photo 3</b></a></li>
32.             <li><a class="p6 image4" href="#url"><b>Photo 4</b></a></li>
33.             <li><a class="p7 image5" href="#url"><b>Photo 5</b></a></li>
34.         </ul>
35.     <!--[if lte IE 6]></td></tr></table></a><![endif]-->
36.     </li>
37.     <li class="shop"><a href="#url"><b>SHOP</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
38.     <!--[if lte IE 6]><table><tr><td><![endif]-->
39.         <ul>
40.             <li><a class="p4 shop1" href="#url"><b>Shop 1</b></a></li>
41.             <li><a class="p5 shop2" href="#url"><b>Shop 2</b></a></li>
42.             <li><a class="p6 shop3" href="#url"><b>Shop 3</b></a></li>
43.         </ul>
44.     <!--[if lte IE 6]></td></tr></table></a><![endif]-->
45.     </li>
46.     <li class="cash"><a href="#url"><b>MONEY</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
47.     <!--[if lte IE 6]><table><tr><td><![endif]-->
48.         <ul>
49.             <li><a class="p5 money1" href="#url"><b>Money 1</b></a></li>
50.             <li><a class="p6 money2" href="#url"><b>Money 2</b></a></li>
51.             <li><a class="p7 money3" href="#url"><b>Money 3</b></a></li>
52.         </ul>
53.     <!--[if lte IE 6]></td></tr></table></a><![endif]-->
54.     </li>
55.     <li class="music"><a href="#url"><b>AUDIO</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
56.     <!--[if lte IE 6]><table><tr><td><![endif]-->
57.         <ul>
58.             <li><a class="p6 sound1" href="#url"><b>Audio 1</b></a></li>
59.             <li><a class="p7 sound2" href="#url"><b>Audio 2</b></a></li>
60.             <li><a class="p8 sound3" href="#url"><b>Audio 3</b></a></li>
61.         </ul>
62.     <!--[if lte IE 6]></td></tr></table></a><![endif]-->
63.     </li>
64.     <li class="mail"><a href="#url"><b>MAIL</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
65.     <!--[if lte IE 6]><table><tr><td><![endif]-->
66.         <ul>
67.             <li><a class="p7 mail1" href="#url"><b>Mail 1</b></a></li>
68.             <li><a class="p8 mail2" href="#url"><b>Mail 2</b></a></li>
69.             <li><a class="p1 mail3" href="#url"><b>Mail 3</b></a></li>
70.             <li><a class="p2 mail4" href="#url"><b>Mail 4</b></a></li>
71.         </ul>
72.     <!--[if lte IE 6]></td></tr></table></a><![endif]-->
73.     </li>
74. </ul>
75. <br />
76. <p class="info">текст</p>
77.  
78. </div> <!-- end of info -->

Код (CODE):

1. <style type="text/css">
2. #info {padding-bottom:100px;}
3.  
4. #menu {padding:0; margin:0 auto; list-style:none; position:relative; width:270px; height:270px;}
5. #menu ul {padding:0; margin:0; list-style:none; position:absolute; left:-9999px; width:140px; height:140px; background:url(trans.gif);}
6. #menu li {display:block; width:70px; height:70px; position:absolute; text-decoration:none; color:#000;}
7.  
8. #menu li a {display:block; width:70px; height:70px; text-decoration:none; color:#000;}
9. #menu li a b {position:absolute; left:-9999px; display:block; width:58px; height:25px; text-align:center; font-family:arial, sans-serif; font-size:12px;}
10. #menu li.home {background:url(c-icons/home.gif); left:100px; top:0;}
11. #menu li.pencil {background:url(c-icons/pencil.gif); left:170px; top:30px;}
12. #menu li.chat {background:url(c-icons/chat.gif); left:200px; top:100px;}
13. #menu li.image {background:url(c-icons/image.gif); left:170px; top:170px;}
14. #menu li.shop {background:url(c-icons/shop.gif); left:100px; top:200px;}
15. #menu li.cash {background:url(c-icons/money.gif); left:30px; top:170px;}
16. #menu li.music {background:url(c-icons/sound.gif); left:0; top:100px;}
17. #menu li.mail {background:url(c-icons/mail.gif); left:30px; top:30px;}
18.  
19. #menu li a:hover {border:0; z-index:500;}
20.  
21. #menu li.home a:hover ul, #menu li.home:hover ul {left:-35px; top:65px;}
22. #menu li.pencil a:hover ul, #menu li.pencil:hover ul {left:-105px; top:35px;}
23. #menu li.chat a:hover ul, #menu li.chat:hover ul {left:-135px; top:-35px;}
24. #menu li.image a:hover ul, #menu li.image:hover ul {left:-105px; top:-105px;}
25. #menu li.shop a:hover ul, #menu li.shop:hover ul {left:-35px; top:-135px;}
26. #menu li.cash a:hover ul, #menu li.cash:hover ul {left:35px; top:-105px;}
27. #menu li.music a:hover ul, #menu li.music:hover ul {left:65px; top:-35px;}
28. #menu li.mail a:hover ul, #menu li.mail:hover ul {left:30px; top:35px;}
29.  
30. #menu :hover ul li {width:40px; height:40px;}
31.  
32. #menu :hover ul li a {position:absolute; display:block; width:40px; height:40px;}
33.  
34. #menu li ul li a.p1 {left:70px; top:0;}
35. #menu li ul li a.p2 {left:98px; top:30px;}
36. #menu li ul li a.p3 {left:98px; top:70px;}
37. #menu li ul li a.p4 {left:70px; top:100px;}
38. #menu li ul li a.p5 {left:30px; top:100px;}
39. #menu li ul li a.p6 {left:0; top:70px;}
40. #menu li ul li a.p7 {left:0; top:30px;}
41. #menu li ul li a.p8 {left:30px; top:0;}
42.  
43. #menu li.home a:hover b, #menu li.home:hover b {left:5px; top:125px;}
44. #menu li.pencil a:hover b, #menu li.pencil:hover b {left:-65px; top:95px;}
45. #menu li.chat a:hover b, #menu li.chat:hover b {left:-95px; top:25px;}
46. #menu li.image a:hover b, #menu li.image:hover b {left:-65px; top:-45px;}
47. #menu li.shop a:hover b, #menu li.shop:hover b {left:5px; top:-75px;}
48. #menu li.cash a:hover b, #menu li.cash:hover b {left:75px; top:-45px;}
49. #menu li.music a:hover b, #menu li.music:hover b {left:105px; top:25px;}
50. #menu li.mail a:hover b, #menu li.mail:hover b {left:70px; top:95px;}
51.  
52. #menu li.home a:hover ul li a b,
53. #menu li.pencil a:hover ul li a b,
54. #menu li.chat a:hover ul li a b,
55. #menu li.image a:hover ul li a b,
56. #menu li.shop a:hover ul li a b,
57. #menu li.cash a:hover ul li a b,
58. #menu li.music a:hover ul li a b,
59. #menu li.mail a:hover ul li a b,
60. #menu li.home:hover ul li a b,
61. #menu li.pencil:hover ul li a b,
62. #menu li.chat:hover ul li a b,
63. #menu li.image:hover ul li a b,
64. #menu li.shop:hover ul li a b,
65. #menu li.cash:hover ul li a b,
66. #menu li.music:hover ul li a b,
67. #menu li.mail:hover ul li a b{left:-9999px; background:#fff;}
68.  
69. #menu li ul li a.pencil1 {background:url(c-icons/pencil1.gif);}
70. #menu li ul li a.pencil2 {background:url(c-icons/pencil2.gif);}
71.  
72. #menu li ul li a.chat1 {background:url(c-icons/chat1.gif);}
73. #menu li ul li a.chat2 {background:url(c-icons/chat2.gif);}
74. #menu li ul li a.chat3 {background:url(c-icons/chat3.gif);}
75. #menu li ul li a.chat4 {background:url(c-icons/chat4.gif);}
76.  
77. #menu li ul li a.image1 {background:url(c-icons/image1.gif);}
78. #menu li ul li a.image2 {background:url(c-icons/image2.gif);}
79. #menu li ul li a.image3 {background:url(c-icons/image3.gif);}
80. #menu li ul li a.image4 {background:url(c-icons/image4.gif);}
81. #menu li ul li a.image5 {background:url(c-icons/image5.gif);}
82.  
83. #menu li ul li a.shop1 {background:url(c-icons/shop1.gif);}
84. #menu li ul li a.shop2 {background:url(c-icons/shop2.gif);}
85. #menu li ul li a.shop3 {background:url(c-icons/shop3.gif);}
86.  
87. #menu li ul li a.money1 {background:url(c-icons/money1.gif);}
88. #menu li ul li a.money2 {background:url(c-icons/money2.gif);}
89. #menu li ul li a.money3 {background:url(c-icons/money3.gif);}
90.  
91. #menu li ul li a.sound1 {background:url(c-icons/sound1.gif);}
92. #menu li ul li a.sound2 {background:url(c-icons/sound2.gif);}
93. #menu li ul li a.sound3 {background:url(c-icons/sound3.gif);}
94.  
95. #menu li ul li a.mail1 {background:url(c-icons/mail1.gif);}
96. #menu li ul li a.mail2 {background:url(c-icons/mail2.gif);}
97. #menu li ul li a.mail3 {background:url(c-icons/mail3.gif);}
98. #menu li ul li a.mail4 {background:url(c-icons/mail4.gif);}
99.  
100. #menu :hover ul li a.p1:hover b {left:-30px; top:60px;}
101. #menu :hover ul li a.p2:hover b {left:-58px; top:30px;}
102. #menu :hover ul li a.p3:hover b {left:-58px; top:-10px;}
103. #menu :hover ul li a.p4:hover b {left:-30px; top:-40px;}
104. #menu :hover ul li a.p5:hover b {left:10px; top:-40px;}
105. #menu :hover ul li a.p6:hover b {left:40px; top:-10px;}
106. #menu :hover ul li a.p7:hover b {left:40px; top:30px;}
107. #menu :hover ul li a.p8:hover b {left:10px; top:60px;}
108.  
109. </style>

спасибо за будущие советы