Menu principal flotante plantilla palene  

Página 1 / 3
 
Lady Adriana
 Lady Adriana
Estimable Member

Buenos dias, quisiera tener el menu principal en mi sitio web igual al de los siguientes sitios de noticias ( www.eltiempo.com ) (www.elespectador.com)
¿ como podria lograr crear un menu principal que quede viendose mientras voy dezplazandome por la pagina tal y como las web de noticias anteriores ?

A todos muchas gracias por sus respuestas.

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 19/09/2015 4:58 pm
Jhon Marreros Guzman
 Jhon Marreros Guzman
Soporte CMS Webempresa Moderator

Hola

Para lograr lo que quieres tienes que trabajar con javascript, para facilitar las cosas, aunque luego puedes separar el código en otro archivo, usa este archivo :

/libraries/gantry/js/gantry-totop.js

Lo primero sería que añadas una clase fixed al contenedor que permanecerá fijo

Al final del archivo tendrías que poner el código javascript


(function( $ ) {
  $(function() {
	$(window).bind('scroll', function () {
	    if ($(window).scrollTop() > 200) {
	        $('#rt-top-surround').addClass('fixed');
	    } else {
	        $('#rt-top-surround').removeClass('fixed');
	    }
	});
  });
})(jQuery);


Lo que hace este código es agregar una clase fixed a la etiqueta que tiene id rt-top-surround siempre y cuando pase el scroll de 200px

Aun no hará nada pero si logras que esto funcione ya es un avance ya que puedes por ejemplo por CSS hacer en base a esta clase algo como :

#rt-top-surround.fixed{
width:100%;
position:fixed;
}

Esto es sólo una prueba, pero teoricamente debería funcionar, tendrías que poner este código en algún archivo CSS que carga tu plantilla.

Saludos.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 19/09/2015 11:34 pm

Cursos Gratuitos WordPress

Lady Adriana
 Lady Adriana
Estimable Member

No se mucho sobre programacion pero gracias por la informacion y la aclaracion, ojala y existiera algo un poco mas facil para nosotros los no - programadores apenas y entiendo algo de Joomla, aun asi muchas gracias,

ResponderCitar
Respondido : 20/09/2015 2:06 am
Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Admin

Hola

Supongo que estas buscando un efecto similar a este:

http://www.shape5.com/demo/shenandoah/index.php?option=com_content&view=article&id=224:fixed-or-floating-menu-and-header-area-&catid=1:latest-news&Itemid=307

Dependerá mucho del tema que estés utilizando para ver que 'hack' al código tendrías que aplicar para conseguir 'fijarlo' al hacer scroll vertical.

Saludos

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.

ResponderCitar
Respondido : 20/09/2015 5:39 am

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Lady Adriana
 Lady Adriana
Estimable Member

Efectivamente luís, ese es el efecto que deseo en mi modulo de menú principal, tengo la plantilla noticias Palene del pack webempresa, ¿ donde o como podría hacer ese efecto ? estaba pensando en algún plugin o componente que lo haga y he buscado pero no doy, si es posible modificar algo en la propia plantilla seria lo mejor.

ResponderCitar
Respondido : 20/09/2015 1:06 pm
Jhon Marreros Guzman
 Jhon Marreros Guzman
Soporte CMS Webempresa Moderator

Hola

Lamentablemente este efecto que quieres lograr no es posible a través de una extensión ya que trabaja sobre los elementos de la propia plantilla, lo más fácil sería que la plantilla incluya este efecto, sin embargo la plantilla Palene no lo incluye, por lo que tendrías que tocar código para realizar este efecto

La única forma que veo, tal como te comenté en la respuesta anterior , tendría que agregar código javascript y luego CSS

En realidad el código esta hecho, sólo tienes que agregarlo, intenta hacerlo, te explico nuevamnete

Ubica este archivo dentro de tu carpeta public_html
/libraries/gantry/js/gantry-totop.js

Puedes usar el Administrador de Archivos de tu Cpanel, este artículo te enseña a usar el Administrador de Archivos :
https://www.webempresa.com/blog/administrador-de-archivos-de-cpanel.html

Una vez que ubicas este archivo puedes editarlo desde el administrador de archivos, conserva el código existente, colocate al final del archivo y pega este código :

(function( $ ) {
  $(function() {
	$(window).bind('scroll', function () { if ($(window).scrollTop() > 200) {
	        $('#rt-top-surround').addClass('fixed'); } else {
	        $('#rt-top-surround').removeClass('fixed'); } }); }); })(jQuery);
 

Esto sería la primera parte, pero si esto funciona estaría funcionando lo más importante que es agregar una clase llamada fixed

Si decides hacer esto envianos una respuesta cuando ya lo tengas para ver la segunda parte

Saludos.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 20/09/2015 4:48 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Lady Adriana
 Lady Adriana
Estimable Member

Jhon, gracias por la guia y la ayuda detallada, asi me puedo orientar mejor, hice lo que me dijiste sacando copia de seguridad del archivo gantry-totop.js y añadiendo codigo al final y efectivamente funciona muy bien en Firefox, pero en Chrome el efecto queda traslucido y no se visualiza bien, envio printscreen desde Chrome, si pudiera hacerse algo para remediarlo, seria perfecto, pero lo que sugeriste funciono a la perfeccion.

ResponderCitar
Respondido : 22/09/2015 3:16 am
Jhon Marreros Guzman
 Jhon Marreros Guzman
Soporte CMS Webempresa Moderator

Hola

Debe ser por que falta poner un fondo al #rt-top-surround , tendrías que dejarlo con el efecto para revisar

Teoricamente sería :

#rt-top-surround.fixed{ width:100%; position:fixed; background:white;z-index:100}

Aunque también veo algo respecto al posicionamiento por lo que agregué z-index, igual tienes que poner el código javascript para comprobar

Saludos.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 22/09/2015 6:10 am

wpdoctor-revisa-la-salud-de-tu-wordpress

Lady Adriana
 Lady Adriana
Estimable Member

Hola, he puesto el codigo que indicaste pero ahora no se oculta la cabezera y no hace nada, quizas lo haya puesto mal o en la linea que no corresponde, te paso la captura y resalto el codigo con azul, dime si debo colocarlo en otro lugar, Gracias por la ayuda:

ResponderCitar
Respondido : 23/09/2015 1:55 am
Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Admin

Hola Adriana,

Lo que John te ha facilitado es una clase CSS y tu lo estás insertando dentro de .js cuando deberías declarar esa clase en la hoja de estilos .css de la plantilla que estás utilizando.

Saludos

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.

ResponderCitar
Respondido : 23/09/2015 3:30 am

Cursos Gratuitos WordPress

Lady Adriana
 Lady Adriana
Estimable Member

Luis gracias por la respuesta, como dije antes, no se de programacion web, a duras penas entre al mundo Joomla pero con las ayudas guiadas que me han dado he podido lograr algo, encontre en la plantilla Palene en esta ruta ( /public_html/templates/palene/css ) dos archivos CSS ( master-ie8.css ) y ( master-ie9.css ) ¿ en cual de los dos y en que lugar debo poner el codigo ?

Tambien en esta otra ruta hay mas CSS:
/public_html/templates/palene/css-compiled
dentro de esa carpeta estan los siguientes archivos:

bootstrap.css
fusionmenu.css
master-39e7b8642fe76cfb4aa7ccefb7c18752.css
master-849d0f0620fc34e17676f684deb61da1.css
master-ae7a714305ff39a989ea1220377f5713.css
master-cc11f6b762acbc7199d6732bdcc54565.css
master-e7dbb00746c4cb24c370f830429227c7.css
mediaqueries.css
menu-3ac3fe3d8ece5209203db6a73e7fca24.css
menu-547c0259cc3e6e28fa771e20d05c1630.css
menu-a33675e2187b1644f0b2b64b092ce040.css
menu-c7ca5cc9d7cddc503a0223a4d42469b7.css
menu-ef2fcd226e3aa80189e6517c3b879add.css
menu-hovers-547c0259cc3e6e28fa771e20d05c1630.css

Subire las 2 carpetas con los CSS comprimidos:

ResponderCitar
Respondido : 23/09/2015 3:48 am
Pablo Velasco
 Pablo Velasco
Illustrious Member

Hola,

El código CSS que te ha indicado Jhon debes añadir en un archivo CSS personalizado. En el siguiente artículo de nuestro blog se explica cómo añadir CSS personalizado para plantillas como la tuya:

https://www.webempresa.com/blog/item/1469-agregar-archivo-css-personalizado-para-plantillas-gantry.html

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.

ResponderCitar
Respondido : 23/09/2015 2:36 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Lady Adriana
 Lady Adriana
Estimable Member

A todos gracias por su ayuda, finalmente aplique el codigo CSS segun el tutorial, ha funcionado muy bien en chrome que es donde no se visualizaba, ahora un ultimo paso, si se dan cuenta, al entrar en la web " que esta en construccion " portalnews.co, el cambio para mostrar alguna noticia mientras deja el menu es muy brusco, muy rapido, me gustaria suavizar el efecto para que pase un poco mas lento y se vea agradable al usuario, ¿ como lo puedo lograr ? ¿ que codigos me servirian para jugar por asi decirlo con varios efectos sobre el menu principal y en que archivo CSS debo ponerlo ? si se dan cuenta, en el principio del post puse 2 web de noticias como ejemplo, es asi como finalmente me agradaria que se vea mi menu, Gracias a todos, un abrazo.

ResponderCitar
Respondido : 24/09/2015 12:19 pm
Pablo Velasco
 Pablo Velasco
Illustrious Member

Hola,

En el código javascript que te pasó Jhon prueba a cambiar la línea:

$(window).bind('scroll', function () { if ($(window).scrollTop() > 200) {

por esta otra:

$(window).bind('scroll', function () { if ($(window).scrollTop() > 1) {

Comprueba si así el movimiento es menos brusco. Es posible que después de aplicar el cambio y, una vez cargada la página, tengas que pulsar F5 o Control+F5 para forzar la recarga del código javascript.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.

ResponderCitar
Respondido : 24/09/2015 5:18 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Lady Adriana
 Lady Adriana
Estimable Member

Gracias por la respuesta, en efecto el movimiento es menos brusco y mas suave, doy por sentado el tema no sin antes agradecer a todos los que muy gentilmente se tomaron el tiempo para guiarme y ayudarme, feliz dia y que esten muy bien. 🙂

ResponderCitar
Respondido : 25/09/2015 3:17 am
Página 1 / 3

Por favor Iniciar Sesión o Registro