Ayuda con triangulo insertado en menú
3 seguidores
Hola a todos!
Estoy haciendo un #Menú multinivel y le he integrado un #triangulo (dentro del menú, que apunta hacia 'abajo' y otro hacia la 'izquierda') sacado del #MenúSpry
Me ha funcionado todo, excepto, un triangulo (:hover) que apunta hacia la izquierda con el código css.
(El código está al final del archivo .CSS -> Flecha Izquierda HOVER)
Aquí adjunto un archivo .rar (que almacené en google Drive) para que alguien pueda ayudarme con ese último código que me falta. Ya intenté varias veces pero no he dado con el código.
Link de descarga:
*incluye las imágenes de los *triángulos.png
Saludos a todos!
ander-2
Hola boutzero.
Prueba a poner el código de esta forma:
#menu ul li .nivel2 li a, #menu ul li .nivel3 li a {
background-image: url(_img/SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
#menu ul li .nivel2 li:hover a, #menu ul li .nivel3 li:hover a {
background-image: url(_img/SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
boutzero
Vaclad
Vaclad! Estoy muy agradecido por tu pronta respuesta.
Eso sí, estuvimos a punto de lograrlo!
Ahora aparecen los triángulos del submenú pero desaparecen los triángulos del menú principal.
Aquí adjunto el archivo .rar con el resultado final.
Link de descarga:
http:// bit.ly/1fIOMuj
*viene todo incluido.
Seguiré intentando haber si lo logro.
Saludos! y Muchas gracias por la orientación!
César
ander-2
Modifica la línea 84. Tienes:
#menu ul li a:hover {
background-color: #888;
color: #fff;
position: relative;
}
Pon:
#menu ul li a:hover, #menu ul li:hover a.nivel1 {
background-color: #888;
color: #fff;
position: relative;
}
boutzero
Vaclad
Vaclad, adjunto el archivo final para que veas el resultado.
Link de descarga: http://bit.ly/1jdCUyz
Funcionó, solo que ahora todas las columnas verticales aparecen con el triangulo ( >) y mi idea es que sólo aparezca en el Menú > "Químicos de limpieza y desinfección", ya que es la única categoría que pasa a una 2da columna vertical.
Otro detalle: al pasar el mouse por la opción "químicos de limpieza y desinfección" a la "Diversey" (2da columna vertical), se desaparece el triangulo :/, me gustaría que se mantuviera seleccionado , igual que el menú principal "Categorías".
Saludos, Vaclad! y Gracias nuevamente :)
ander-2
Hola Cesar. Para que solo tenga la flecha el submenú que contenga otro submenú puedes hacerlo de dos formas:
1- Aplicar manualmente una clase específica al submenú y asignar a esa clase la flecha.
2- Mediante jQuery obtener que menús tienen submenús y que asigne automáticamente la clase. Te dejo un ejemplo donde lo resaltan en rojo: http://jsfiddle.net/t6a6G/12/
boutzero
Vaclad
Muchas Gracias, Vaclad!!!
Estoy seguro de que ahora sí funcionará!
Eres el mejor!
Que tengas un excelente 2014!
Saludos!
boutzero
Vaclad
Vaclad:
Me resultó lo de los triángulos. Te adjunto link para que lo veas.
Link de descarga: http://bit.ly/Kgx8ju
Me falta el último detalle, ojalá no sea mucha molestia. Juro que es el último post.
Cuando uno deja el mouse sobre el menú "Categorías" queda mantenido un :hover, luego bajo por el submenú vertical y cuando llego a "químicos de limpieza y desinfección" (submenú 1) quede mantenido otro :hover sin que desaparezca cuando paso a "Diversey" (submenú 2)
Ej.
MENU
Portada - Categorías (triangulo hacia abajo)
SUBMENU 1
..............-Huerto
..............-Post Cosecha
..............-Químicos de Limpieza y desinfección (>) (que este ítem quede mantenido en :hover al pasar al submenú 2)
SUBMENU 2
.........................................-Diversey
.........................................-Cloro
Saludos :)
ander-2
Buenos días César.
Es bastante sencillo lo que pides. La línea 85 debes dejarla de la siguiente manera:
#menu ul li a:hover, #menu ul li:hover a.nivel1, #menu ul li ul li:hover a.nivel2
Y al final del todo debes añadir:
#menu ul li ul li:hover a.nivel2 {
background-image: url(_img/SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
boutzero
Vaclad
Vaclad, Quedó PERFECTO!!!!!!
No sé cómo agradecer todo tu tiempo! De verdad, me siento muy feliz por tu ayuda! #FelizDomingo! Que tengas un año espectacular, Vaclad, y que en tu vida siempre haya abundancia, te lo mereces, hoy y siempre!
Saludos desde Chile!
César.
boutzero
Vaclad
Vaclad.
Acabo de hacer un menú con "Fireworks".
Pero sólo le hice 1 submenú (ya que el programa Fireworks parece que no permite más opciones de submenús)
Lo tengo terminado, sólo que tuve el mismo detalle del menú anterior. Que cuando pasó del menú principal --> al submenú 1, el Menú principal se deselecciona.
Intenté crear reglas :Hover como el menú anterior pero no me resultó.
Este Menú funciona con JavaScript. Y ahí si que no me manejo. Son demasiados códigos. Me confundo.
Ojalá me puedas ayudar. Creo que con esto se me acaban las dudas de menús.
Mi otra consulta es cómo crear un "Buscador interno" como el que tiene #DOMÉSTIKA en la parte superior derecha. Te agradecería mucho si me pudieras orientar y luego busco algunos tutoriales en YouTube. Todo esto es nuevo para mí. Son muchos detalles. xD
Aquí dejo el link con el menú finalizado:
http://bit.ly/1haA1Ny
Saludos! y Gracias nuevamente. :)
boutzero
Encontré esto, pero no entendí nada. :S
"Mantener el estado 'Sobre' para los desencadenantes de menú emergente en Fireworks"
Link: http://www.adobe.com/es/support/fireworks/ts/documents/mx_dont_restore.htm
ander-2
Hola César.
En este caso no se muy bien como podrías hacer para mentener el color en el estado hover. He visto el menú que has hecho y es una mezcla de tablas y divs funcionando con Javascript. Por tu comentario intuyo que no entiendes mucho de HTML y CSS y lo realizas con el Fireworks. Yo te animo a que busques información y crees desde 0 el menú, conseguirás aprender y un código mucho más limpio. Con Fireworks no te puedo ayudar ya que no uso ese programa.
Crear el buscador no es tan sencillo, lleva detrás bastante programación para hacer que funcione (tienes que hacer una consulta a la base de datos y luego mostrar los resultados, paginarlos…)
boutzero
Vaclad
Vaclad, Hola!
He practicado mucho con el tema de #menús y he aprendido bastante.
Hoy me encontré con un nuevo muro, espero que sea el último.
Acabo de terminar un menú #vertical y le he agregado unos íconos de forma circular + las flechitas que me enseñaste.
Resulta que ahora quise agregarle un #Gradient (o gradiente) de 3 colores a cada uno de los recuadros (donde van insertos los iconos + las flechitas) para que se vea más moderno el menú.
El problema surgió cuando agregué el código:
background: -webkit-linear-gradient(#328432 30%, #458f44 , #328432 70%);
y automáticamente se desaparecieron los íconos circulares + las flechitas.
background-image: url(../_img/1_huerto.png);
Entonces no sé que código inventar para que el programa dreamweaver acepte el "background" + el "background-image" . Porque al parecer, sólo puedo agregar 1 sólo código. U.U
Aquí adjunto el link con el resultado final:
Link de descarga: http://bit.ly/1nusqLl
Saludos!
boutzero
boutzero
Vaclad, Ya descubrí la solución!!! Busqué en internet "Multiples Background-images"
y el resultado era colocar ambos códigos pero separados por coma y no individual, así:
background-image: url(../_img/1_huerto.png), -webkit-linear-gradient(#328432 30%, #458f44 , #328432 70%);
Estoy muy feliz!
Saludos desde Chile!
juaroal
Hola, seguramente lo hubieses solucionado también con un "background-color: -webkit-linear-gradient(#328432 30%, #458f44 , #328432 70%);" y un "background-image: url(../_img/1_huerto.png)"
Al fin y al cabo lo que has hecho tú es juntar ambas propiedades en una.
un saludo!