Foros del Web » Programando para Internet » Javascript »

Cómo hacer que el menú se despliegue únicamente al hacer click sobre él

Estas en el tema de Cómo hacer que el menú se despliegue únicamente al hacer click sobre él en el foro de Javascript en Foros del Web. Hola a todos, tengo una duda y no sé cómo resolverla. Tengo una web en wordpress con un menú horizontal. Al pasar sobre los botones ...
  #1 (permalink)  
Antiguo 01/04/2013, 06:06
 
Fecha de Ingreso: abril-2013
Mensajes: 2
Antigüedad: 11 años, 8 meses
Puntos: 0
Pregunta Cómo hacer que el menú se despliegue únicamente al hacer click sobre él

Hola a todos, tengo una duda y no sé cómo resolverla.

Tengo una web en wordpress con un menú horizontal. Al pasar sobre los botones que tienen submenús, éstos se despliegan. Me gustaría que únicamente se desplegaran al hacer click sobre el menú, y no siempre que el ratón pase sobre ellos.

Muchas gracias de antemano.
  #2 (permalink)  
Antiguo 01/04/2013, 06:16
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 4 meses
Puntos: 2114
Respuesta: Cómo hacer que el menú se despliegue únicamente al hacer click sobre él

Tendrías que usar JavaScript, ya que seguramente tal como lo tengas se estarán activando esos submenus con la pseudoclase :hover.

Sería quitar ese estilo en tu CSS y luego añadirle, por ejemplo, una función de JavaScript en el onclick que muestre el submenú.
  #3 (permalink)  
Antiguo 01/04/2013, 06:36
 
Fecha de Ingreso: abril-2013
Mensajes: 2
Antigüedad: 11 años, 8 meses
Puntos: 0
Pregunta Respuesta: Cómo hacer que el menú se despliegue únicamente al hacer click sobre él

Cita:
Iniciado por Bonez Ver Mensaje
Tendrías que usar JavaScript, ya que seguramente tal como lo tengas se estarán activando esos submenus con la pseudoclase :hover.

Sería quitar ese estilo en tu CSS y luego añadirle, por ejemplo, una función de JavaScript en el onclick que muestre el submenú.
Gracias por tu respuesta, pero no soy un experto en la materia, si me pudieras concretar un poco más te lo agradecería.

Pego a continuación la parte del CSS del menú:

Código CSS:
Ver original
  1. /* begin Menu */
  2. /* menu structure */
  3.  
  4. .art-menu a, .art-menu a:link, .art-menu a:visited, .art-menu a:hover
  5. {
  6.     outline: none;
  7. }
  8.  
  9. .art-menu, .art-menu ul
  10. {
  11.   margin: 0;
  12.   padding: 0;
  13.   border: 0;
  14.   list-style-type: none;
  15.   display: block;
  16. }
  17.  
  18. .art-menu li
  19. {
  20.   margin: 0;
  21.   padding: 0;
  22.   border: 0;
  23.   display: block;
  24.   float: left;
  25.   position: relative;
  26.   z-index: 5;
  27.   background: none;
  28. }
  29.  
  30. .art-menu li:hover
  31. {
  32.   z-index: 10000;
  33.   white-space: normal;
  34. }
  35.  
  36. .art-menu li li
  37. {
  38.   float: none;
  39. }
  40.  
  41. .art-menu ul
  42. {
  43.   visibility: hidden;
  44.   position: absolute;
  45.   z-index: 10;
  46.   left: 0;
  47.   top: 0;
  48.   background: none;
  49. }
  50.  
  51. .art-menu li:hover>ul
  52. {
  53.   visibility: visible;
  54.   top: 100%;
  55. }
  56.  
  57. .art-menu li li:hover>ul
  58. {
  59.   top: 0;
  60.   left: 100%;
  61. }
  62.  
  63. .art-menu:after, .art-menu ul:after
  64. {
  65.   content: ".";
  66.   height: 0;
  67.   display: block;
  68.   visibility: hidden;
  69.   overflow: hidden;
  70.   clear: both;
  71. }
  72. .art-menu, .art-menu ul
  73. {
  74.   min-height: 0;
  75. }
  76.  
  77. .art-menu ul
  78. {
  79.   background-image: url('images/spacer.gif');
  80.   padding: 10px 30px 30px 30px;
  81.   margin: -10px 0 0 -30px;
  82. }
  83.  
  84. .art-menu ul ul
  85. {
  86.   padding: 30px 30px 30px 10px;
  87.   margin: -30px 0 0 -10px;
  88. }
  89.  
  90.  
  91.  
  92.  
  93. /* menu structure */
  94.  
  95. .art-menu
  96. {
  97.   padding: 0 0 0 0;
  98. }
  99.  
  100. .art-nav
  101. {
  102.   position: relative;
  103.   min-height: 33px;
  104.   z-index: 100;
  105. }
  106.  
  107. .art-nav .l, .art-nav .r
  108. {
  109.   position: absolute;
  110.   z-index: -1;
  111.   top: 0;
  112.   height: 100%;
  113.   background-image: url('images/nav.png');
  114. }
  115.  
  116. .art-nav .l
  117. {
  118.   left: 0;
  119.   right: 0;
  120. }
  121.  
  122. .art-nav .r
  123. {
  124.   right: 0;
  125.   width: 925px;
  126.   clip: rect(auto, auto, auto, 925px);
  127. }
  128.  
  129.  
  130. /* end Menu */
  131.  
  132. /* begin MenuItem */
  133. .art-menu a
  134. {
  135.   position: relative;
  136.   display: block;
  137.   overflow: hidden;
  138.   height: 33px;
  139.   cursor: pointer;
  140.   text-decoration: none;
  141. }
  142.  
  143.  
  144. .art-menu ul li
  145. {
  146.     margin:0;
  147.     clear: both;
  148. }
  149.  
  150.  
  151. .art-menu a .r, .art-menu a .l
  152. {
  153.   position: absolute;
  154.   display: block;
  155.   top: 0;
  156.   z-index: -1;
  157.   height: 109px;
  158.   background-image: url('images/menuitem.png');
  159. }
  160.  
  161. .art-menu a .l
  162. {
  163.   left: 0;
  164.   right: 0;
  165. }
  166.  
  167. .art-menu a .r
  168. {
  169.   width: 400px;
  170.   right: 0;
  171.   clip: rect(auto, auto, auto, 400px);
  172. }
  173.  
  174. .art-menu a .t, .art-menu ul a, .art-menu a, .art-menu a:link, .art-menu a:visited, .art-menu a:hover
  175. {
  176.   font-style: normal;
  177.   font-weight: bold;
  178.   text-align: left;
  179.   text-decoration: none;
  180. }
  181.  
  182. .art-menu a .t
  183. {
  184.   color: #31414E;
  185.   padding: 0 30px;
  186.   margin: 0 0;
  187.   line-height: 33px;
  188.   text-align: center;
  189. }
  190.  
  191. .art-menu a:hover .l, .art-menu a:hover .r
  192. {
  193.   top: -38px;
  194. }
  195.  
  196. .art-menu li:hover>a .l, .art-menu li:hover>a .r
  197. {
  198.   top: -38px;
  199. }
  200.  
  201. .art-menu li:hover a .l, .art-menu li:hover a .r
  202. {
  203.   top: -38px;
  204. }
  205. .art-menu a:hover .t
  206. {
  207.   color: #FFFFFF;
  208. }
  209.  
  210. .art-menu li:hover a .t
  211. {
  212.   color: #FFFFFF;
  213. }
  214.  
  215. .art-menu li:hover>a .t
  216. {
  217.   color: #FFFFFF;
  218. }
  219.  
  220.  
  221. .art-menu a.active .l, .art-menu a.active .r
  222. {
  223.   top: -76px;
  224. }
  225.  
  226. .art-menu a.active .t
  227. {
  228.   color: #101519;
  229. }
  230. /* end MenuItem */
  231.  
  232. /* begin MenuSeparator */
  233. .art-menu .art-menu-li-separator
  234. {
  235.   display: block;
  236.   width: 1px;
  237.   height:33px;
  238. }
  239. .art-nav .art-menu-separator
  240. {
  241.   display: block;
  242.   margin:0 auto;
  243.   width: 1px;
  244.   height: 33px;
  245.   background-image: url('images/menuseparator.png');
  246. }
  247. /* end MenuSeparator */
  248.  
  249. /* begin MenuSubItem */
  250. .art-menu ul a
  251. {
  252.   display: block;
  253.   text-align: center;
  254.   white-space: nowrap;
  255.   height: 40px;
  256.   width: 350px;
  257.   overflow: hidden;
  258.   line-height: 40px;
  259.   background-image: url('images/subitem.png');
  260.   background-position: left top;
  261.   background-repeat: repeat-x;
  262.   border-width: 1px;
  263.   border-style: solid;
  264.   border-color: #2F3F4B;
  265. }
  266.  
  267. .art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
  268. {
  269.   display: inline;
  270.   float: none;
  271.   margin: inherit;
  272.   padding: inherit;
  273.   background-image: none;
  274.   text-align: inherit;
  275.   text-decoration: inherit;
  276. }
  277.  
  278. .art-menu ul a, .art-menu ul a:link, .art-menu ul a:visited, .art-menu ul a:hover, .art-menu ul a:active, .art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
  279. {
  280.   text-align: left;
  281.   text-indent: 12px;
  282.   text-decoration: none;
  283.   line-height: 40px;
  284.   color: #101519;
  285.   font-size: 12px;
  286.   margin:0;
  287.   padding:0;
  288. }
  289.  
  290. .art-menu ul li a:hover
  291. {
  292.   color: #FFFFFF;
  293.   border-color: #2F3F4B;
  294.   background-position: 0 -40px;
  295. }
  296.  
  297. .art-menu ul li:hover>a
  298. {
  299.   color: #FFFFFF;
  300.   border-color: #2F3F4B;
  301.   background-position: 0 -40px;
  302. }
  303.  
  304. .art-nav .art-menu ul li a:hover span, .art-nav .art-menu ul li a:hover span span
  305. {
  306.   color: #FFFFFF;
  307. }
  308.  
  309. .art-nav .art-menu ul li:hover>a span, .art-nav .art-menu ul li:hover>a span span
  310. {
  311.   color: #FFFFFF;
  312. }
  313.  
  314.  
  315. /* end MenuSubItem */

Última edición por Nekko; 04/04/2013 a las 04:05

Etiquetas: menu+deplegable, menu-desplegable, menu-horizontal, wordpress
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:41.