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

Тема в разделе "Вопросы по работе с меню", создана пользователем woojin, 01.08.2009.

  1. woojin
    Offline

    woojin Местный Команда форума

    Регистрация:
    31.05.2009
    Сообщения:
    3 209
    Симпатии:
    335
    Пол:
    Мужской
    !!! ИЗВЕНЯЮ НО Я НОВИЧОК !!!
    нарыл интересные исходники кругового меню в 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>


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

Поделиться этой страницей

Загрузка...