Гаджет "Выпадающее меню"

Отличный и простой гаджет на CSS с широкими настройками.






Установка гаджета:

С помощью клавиш Ctrl+F или F3 найдём строчку </b:skin>, перед которой вставим данный HTML код:
  1. /* Главное меню */  
  2.   
  3. #menu  
  4. {  
  5. width: 100%;  
  6. margin: 0;  
  7. padding: 10px 0 0 0;  
  8. list-style: none;  
  9. background: #874006;  
  10. background: -moz-linear-gradient(#BF6306, #874006);  
  11. background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #874006),color-stop(1, #BF6306));  
  12. background: -webkit-linear-gradient(#BF6306, #874006);  
  13. background: -o-linear-gradient(#BF6306, #874006);  
  14. background: -ms-linear-gradient(#BF6306, #874006);  
  15. background: linear-gradient(#BF6306, #874006);  
  16. -moz-border-radius: 50px;  
  17. border-radius: 50px;  
  18. -moz-box-shadow: 0 2px 1px #874006;  
  19. -webkit-box-shadow: 0 2px 1px #874006;  
  20. box-shadow: 0 2px 1px #874006;  
  21. }  
  22.   
  23. #menu li  
  24. {  
  25. float: left;  
  26. padding: 0 0 10px 0;  
  27. position: relative;  
  28. }  
  29.   
  30. #menu a  
  31. {  
  32. float: left;  
  33. height: 25px;  
  34. padding: 0 25px;  
  35. color: #ffffff;  
  36. text-transform: uppercase;  
  37. font: bold 12px/25px Arial, Helvetica;  
  38. text-decoration: none;  
  39. text-shadow: 0 1px 0 #000;  
  40. }  
  41.   
  42. #menu li:hover > a  
  43. {  
  44. color: #fafafa;  
  45. }  
  46.   
  47. *html #menu li a:hover /* IE6 */  
  48. {  
  49. color: #fafafa;  
  50. }  
  51.   
  52. #menu li:hover > ul  
  53. {  
  54. display: block;  
  55. }  
  56.   
  57. /* Подменю */  
  58.   
  59. #menu ul  
  60. {  
  61. list-style: none;  
  62. margin: 0;  
  63. padding: 0;  
  64. display: none;  
  65. position: absolute;  
  66. top: 35px;  
  67. left: 0;  
  68. z-index: 99999;  
  69. background: #BF6306;  
  70. background: -moz-linear-gradient(#BF6306, #783B08);  
  71. background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #783B08),color-stop(1, #BF6306));  
  72. background: -webkit-linear-gradient(#BF6306, #783B08);  
  73. background: -o-linear-gradient(#BF6306, #783B08);  
  74. background: -ms-linear-gradient(#BF6306, #783B08);  
  75. background: linear-gradient(#BF6306, #783B08);  
  76. -moz-border-radius: 5px;  
  77. border-radius: 5px;  
  78. }  
  79.   
  80. #menu ul li  
  81. {  
  82. float: none;  
  83. margin: 0;  
  84. padding: 0;  
  85. display: block;  
  86. -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;  
  87. -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;  
  88. box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;  
  89. }  
  90.   
  91. #menu ul li:last-child  
  92. {  
  93. -moz-box-shadow: none;  
  94. -webkit-box-shadow: none;  
  95. box-shadow: none;  
  96. }  
  97.   
  98. #menu ul a  
  99. {  
  100. padding: 10px;  
  101. height: auto;  
  102. line-height: 1;  
  103. display: block;  
  104. white-space: nowrap;  
  105. float: none;  
  106. text-transform: none;  
  107. }  
  108.   
  109. *html #menu ul a /* IE6 */  
  110. {  
  111. height: 10px;  
  112. width: 150px;  
  113. }  
  114.   
  115. *:first-child+html #menu ul a /* IE7 */  
  116. {  
  117. height: 10px;  
  118. width: 150px;  
  119. }  
  120.   
  121. #menu ul a:hover  
  122. {  
  123. background: #9A1B19;  
  124. background: -moz-linear-gradient(#562F24,  #9A1B19);  
  125. background: -webkit-gradient(linear, left top, left bottom, from(#562F24), to(#9A1B19));  
  126. background: -webkit-linear-gradient(#562F24,  #9A1B19);  
  127. background: -o-linear-gradient(#562F24,  #9A1B19);  
  128. background: -ms-linear-gradient(#562F24,  #9A1B19);  
  129. background: linear-gradient(#562F24,  #9A1B19);  
  130. }  
  131.   
  132. #menu ul li:first-child a  
  133. {  
  134. -moz-border-radius: 5px 5px 0 0;  
  135. border-radius: 5px 5px 0 0;  
  136. }  
  137.   
  138. #menu ul li:first-child a:after  
  139. {  
  140. content: '';  
  141. position: absolute;  
  142. left: 30px;  
  143. top: -8px;  
  144. width: 0;  
  145. height: 0;  
  146. border-left: 5px solid transparent;  
  147. border-right: 5px solid transparent;  
  148.   
  149. border-bottom: 8px solid #874006;  
  150. }  
  151.   
  152. #menu ul li:first-child a:hover:after  
  153. {  
  154. border-bottom-color: #5D2D23;  
  155. }  
  156.   
  157. #menu ul li:last-child a  
  158. {  
  159. -moz-border-radius: 0 0 5px 5px;  
  160. border-radius: 0 0 5px 5px;  
  161. }  
  162.   
  163. #menu:after  
  164. {  
  165. visibility: hidden;  
  166. display: block;  
  167. font-size: 0;  
  168. content: " ";  
  169. clear: both;  
  170. height: 0;  
  171. }  
  172.   
  173. * html #menu             { zoom: 1; } /* IE6 */  
  174. *:first-child+html #menu { zoom: 1; } /* IE7 */  
  175.   
  176. #menu ul li:first-child a:after  
  177. {  
  178.     content: '';  
  179.     position: absolute;  
  180.     left: 30px;  
  181.     top: -8px;  
  182.     width: 0;  
  183.     height: 0;  
  184.     border-left: 5px solid transparent;  
  185.     border-right: 5px solid transparent;  
  186.     border-bottom: 8px solid #BF6306;  
  187. }  
  188.   
  189. #menu ul li:first-child a:hover:after  
  190. {  
  191.     border-bottom-color: #5D2D23;  
  192. }  
  193.   
  194. * html #menu             { zoom: 1; } /* IE6 */  
  195. *:first-child+html #menu { zoom: 1; } /* IE7 */  

Сохраняем шаблон и переходим в Дизайн>Добавить гаджет>HTML/JavaScript и вставляем туда следующий код:
  1. <ul id="menu">  
  2.   <li><a href="#">ГЛАВНАЯ</a></li>  
  3.   <li>  
  4.   <a href="#">Меню 1</a>  
  5.         <ul>  
  6.         <li><a href="#">Страница 1</a></li>  
  7.         <li><a href="#">Страница 2</a></li>  
  8.         <li><a href="#">Страница 3</a></li>  
  9.         <li><a href="#">Страница 4</a></li>  
  10.         </ul>  
  11.   </li>  
  12.   <li><a href="#">Меню 2</a>  
  13.   <ul>  
  14.         <li><a href="#">Страница 1</a></li>  
  15.         <li><a href="#">Страница 2</a></li>  
  16.         <li><a href="#">Страница 3</a></li>  
  17.   </ul>  
  18.   </li>  
  19.   <li><a href="#">О САЙТЕ</a></li>   
  20. </ul>  

Настройте меню под свои нужды, добавляя или удаляя уровни и вложения, а также прописывая собственные названия категорий и включая ссылки на них вместо символа #.



Комментариев нет:

Отправить комментарий

Подписаться на: Комментарии к сообщению (Atom)