Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770
Форумы портала PHP.SU :: Версия для печати :: Выпадающее css меню по клику
Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS » Выпадающее css меню по клику

Страниц (1): [1]
 

1. sxacher - 03 Октября, 2014 - 23:55:20 - перейти к сообщению
Подскажите пожалуйста как сделать чтобы это меню выпадало не при наведении, а при клике:

CODE (html):
скопировать код в буфер обмена
  1. #wb_CssMenu14
  2. {
  3.    border: 0px #898900 solid;
  4.    background-color: transparent;
  5. }
  6. #wb_CssMenu14 ul
  7. {
  8.    list-style-type: none;
  9.    margin: 0;
  10.    padding: 0;
  11. }
  12. #wb_CssMenu14 li
  13. {
  14.    float: left;
  15.    margin: 0;
  16.    padding: 0px 3px 0px 0px;
  17.    width: 188px;
  18. }
  19. #wb_CssMenu14 a
  20. {
  21.    display: block;
  22.    float: left;
  23.    color: #FFFFA0;
  24.    border: 0px #FFFFA0 solid;
  25.    -moz-border-radius: 5px;
  26.    -webkit-border-radius: 5px;
  27.    border-radius: 5px;
  28.    background-color: #898900;
  29.    background-image: url(images/1.png);
  30.    background-repeat: repeat;
  31.    background-position: center top;
  32.    font-family: Arial;
  33.    font-size: 17px;
  34.    font-weight: bold;
  35.    font-style: normal;
  36.    text-decoration: none;
  37.    width: 178px;
  38.    height: 28px;
  39.    padding: 0px 5px 0px 5px;
  40.    vertical-align: middle;
  41.    line-height: 28px;
  42.    text-align: center;
  43.    -moz-box-shadow: 3px -3px 3px #000000;
  44.    -webkit-box-shadow: 3px -3px 3px #000000;
  45.    box-shadow: 3px -3px 3px #000000;
  46. }
  47. #wb_CssMenu14 li:hover a, #wb_CssMenu14 a:hover
  48. {
  49.    color: #003300;
  50.    background-color: #E0E000;
  51.    background-image: url(images/4.png);
  52.    background-repeat: repeat;
  53.    background-position: center bottom;
  54.    border: 0px #E0E000 solid;
  55. }
  56. #wb_CssMenu14 li.firstmain
  57. {
  58.    padding-left: 0px;
  59. }
  60. #wb_CssMenu14 li.lastmain
  61. {
  62.    padding-right: 0px;
  63. }
  64. #wb_CssMenu14 li:hover, #wb_CssMenu14 li a:hover
  65. {
  66.    position: relative;
  67. }
  68. #wb_CssMenu14 a.withsubmenu
  69. {
  70.    padding: 0 5px 0 5px;
  71.    width: 178px;
  72.    background-image: url(images/1.png);
  73.    background-repeat: repeat;
  74.    background-position: center top;
  75. }
  76. #wb_CssMenu14 li:hover a.withsubmenu, #wb_CssMenu14 a.withsubmenu:hover
  77. {
  78.    background-image: url(images/4.png);
  79.    background-repeat: repeat;
  80.    background-position: center bottom;
  81. }
  82. #wb_CssMenu14 ul ul
  83. {
  84.    position: absolute;
  85.    left: -9999px;
  86.    top: -9999px;
  87.    width: 192px;
  88.    height: auto;
  89.    border: none;
  90.    background-color: transparent;
  91. }
  92. #wb_CssMenu14 ul :hover ul
  93. {
  94.    left: -2px;
  95.    top: 28px;
  96.    padding-top: 0px;
  97. }
  98. #wb_CssMenu14 .firstmain:hover ul
  99. {
  100.    left: -2px;
  101. }
  102. #wb_CssMenu14 li li
  103. {
  104.    width: 188px;
  105.    padding: 0 2px 2px 2px;
  106.    border: 0px #898900 solid;
  107.    border-width: 0 0px;
  108. }
  109. #wb_CssMenu14 li li.firstitem
  110. {
  111.    border-top: 0px #898900 solid;
  112. }
  113. #wb_CssMenu14 li li.lastitem
  114. {
  115.    border-bottom: 0px #898900 solid;
  116. }
  117. #wb_CssMenu14 ul ul a, #wb_CssMenu14 ul :hover ul a
  118. {
  119.    float: none;
  120.    margin: 0;
  121.    width: 174px;
  122.    height: auto;
  123.    white-space: normal;
  124.    padding: 4px 5px 3px 5px;
  125.    background-color: #898900;
  126.    background-image: url(images/1.png);
  127.    background-repeat: repeat;
  128.    background-position: center top;
  129.    border: 2px #000000 solid;
  130.    -moz-border-radius: 4px;
  131.    -webkit-border-radius: 4px;
  132.    border-radius: 4px;
  133.    color: #FFFFA0;
  134.    font-family: Arial;
  135.    font-size: 17px;
  136.    font-weight: bold;
  137.    font-style: normal;
  138.    line-height: 17px;
  139.    text-align: center;
  140.    text-decoration: none;
  141.    -moz-box-shadow: none;
  142.    -webkit-box-shadow: none;
  143.    box-shadow: none;
  144. }
  145. #wb_CssMenu14 ul :hover ul .firstitem a
  146. {
  147.    margin-top: 2px;
  148. }
  149. #wb_CssMenu14 ul ul :hover a, #wb_CssMenu14 ul ul a:hover, #wb_CssMenu14 ul ul :hover ul :hover a, #wb_CssMenu14 ul ul :hover ul a:hover
  150. {
  151.    background-color: #E0E000;
  152.    background-image: url(images/4.png);
  153.    background-repeat: repeat;
  154.    background-position: center bottom;
  155.    border: 2px #000000 solid;
  156.    color: #003300;
  157. }
  158. #wb_CssMenu14 br
  159. {
  160.    clear: both;
  161.    font-size: 1px;
  162.    height: 0;
  163.    line-height: 0;
  164. }
  165. <div id="wb_CssMenu14" style="position:absolute;left:264px;top:233px;width:191px;height:28px;z-index:24;">
  166. <ul>
  167. <li class="firstmain"><a class="withsubmenu" href="#" target="_self">Пластинчатые&nbsp;грибы</a>
  168.  
  169. <ul>
  170. <li class="firstitem"><a href="#" target="_self">Январь&nbsp;-&nbsp;ноябрь</a>
  171. </li>
  172. <li><a href="#" target="_self">Апрель&nbsp;-&nbsp;июль</a>
  173. </li>
  174. <li><a href="#" target="_self">Май&nbsp;-&nbsp;июнь</a>
  175. </li>
  176. <li><a href="#" target="_self">Май&nbsp;-&nbsp;сентябрь</a>
  177. </li>
  178. <li><a href="#" target="_self">Май&nbsp;-&nbsp;октябрь</a>
  179. </li>
  180. <li><a href="#" target="_self">Май&nbsp;-&nbsp;ноябрь</a>
  181. </li>
  182. <li><a href="#" target="_self">Июнь&nbsp;-&nbsp;сентябрь</a>
  183. </li>
  184. <li><a href="#" target="_self">Июнь&nbsp;-&nbsp;октыбрь</a>
  185. </li>
  186. <li><a href="#" target="_self">Июнь&nbsp;-&nbsp;ноябрь</a>
  187. </li>
  188. <li><a href="#" target="_self">Июль&nbsp;-&nbsp;сентябрь</a>
  189. </li>
  190. <li><a href="#" target="_self">Июль&nbsp;-&nbsp;октябрь</a>
  191. </li>
  192. <li><a href="#" target="_self">Июль&nbsp;-&nbsp;ноябрь</a>
  193. </li>
  194. <li><a href="#" target="_self">Август&nbsp;-&nbsp;сентябрь</a>
  195. </li>
  196. <li><a href="#" target="_self">Август&nbsp;-&nbsp;октябрь</a>
  197. </li>
  198. <li><a href="#" target="_self">Август&nbsp;-&nbsp;ноябрь</a>
  199. </li>
  200. <li><a href="#" target="_self">Сентябрь&nbsp;-&nbsp;апрель</a>
  201. </li>
  202. <li><a href="#" target="_self">Сентярь&nbsp;-&nbsp;октябрь</a>
  203. </li>
  204. <li><a href="#" target="_self">Сентябрь&nbsp;-&nbsp;ноябрь</a>
  205. </li>
  206. <li class="lastitem"><a href="#" target="_self">Ноябрь&nbsp;-&nbsp;февраль</a>
  207. </li>
  208. </ul>
  209. </li>
  210. </ul>
  211. <br>
  212. </div>
  213.  

 

Powered by ExBB FM 1.0 RC1