Foros del Web » Creando para Internet » Diseño web »

[SOLUCIONADO] Lograr efecto del nav

Estas en el tema de Lograr efecto del nav en el foro de Diseño web en Foros del Web. Hola muchas gracias a todos Necesito lograr el efecto de esta pagina: http://www.blacktie.co/demo/munter/ Se que es una plantilla gratis, el problema que tengo es que ...
  #1 (permalink)  
Antiguo 12/01/2015, 16:09
Avatar de Maverick2786  
Fecha de Ingreso: diciembre-2012
Mensajes: 107
Antigüedad: 11 años, 3 meses
Puntos: 1
Lograr efecto del nav

Hola muchas gracias a todos

Necesito lograr el efecto de esta pagina:
http://www.blacktie.co/demo/munter/

Se que es una plantilla gratis, el problema que tengo es que necesito el efecto del nav, en otra platilla.

Es decir quieren la otra plantilla con el efecto del nav

Gracias a todos
  #2 (permalink)  
Antiguo 12/01/2015, 16:18
Avatar de HackID1  
Fecha de Ingreso: febrero-2013
Ubicación: En Update
Mensajes: 492
Antigüedad: 11 años, 1 mes
Puntos: 17
Respuesta: Lograr efecto del nav

Hola Maverick2786.

Lo que comentas es un poco de Diseño CSS

Simplemente crea un Nav. o un Div. con varios elementos <ul> <li> para cada uno de los textos.

Luego puedes crear un div que será de distintos colores como se ve en la figura.

Para el movimiento cuando seleccionas alguno de los textos, debes hacer transiciones en CSS.

No es muy complicado, mirando el código CSS de la web puedes tener mucha ayuda con este tema, ya que tienes los códigos completos y funcionando.

Con estos tips puedes conseguirlo.

Saludos
__________________
Puntuar +1 es buena forma de dar las gracias. :P
Your Time is limited, so don't waste it living someone else´s life.
Por: HackID1
  #3 (permalink)  
Antiguo 12/01/2015, 16:25
Avatar de Maverick2786  
Fecha de Ingreso: diciembre-2012
Mensajes: 107
Antigüedad: 11 años, 3 meses
Puntos: 1
Respuesta: Lograr efecto del nav

El problema que lo necesito, que conforme vaya bajando en la pagina, la opcion del nav vaya cambiando
  #4 (permalink)  
Antiguo 12/01/2015, 16:47
Avatar de Mariano_Floyd  
Fecha de Ingreso: marzo-2013
Ubicación: Córdoba
Mensajes: 155
Antigüedad: 11 años
Puntos: 14
Respuesta: Lograr efecto del nav

Eso se hace con js, no es difícil, pero si no tenes conocimientos de dicho lenguaje podes usar algo como waypoints.js. Un script hecho en js fácil de implementar y de usar, que te sera muy util. Para todo lo demás, css como ya te dijeron, y un div para crear el dash.
  #5 (permalink)  
Antiguo 12/01/2015, 16:54
Avatar de HackID1  
Fecha de Ingreso: febrero-2013
Ubicación: En Update
Mensajes: 492
Antigüedad: 11 años, 1 mes
Puntos: 17
Respuesta: Lograr efecto del nav

Buenas.

Al igual puedes usar JS. (pero sino,,, lee un poco abajo)

Echa un vistazo a esta web en el apartado llamado
Usar eventos de transición para animar un objeto

Ahí te dan una idea de como ir moviendo elementos.

Además te recomiendo leer sobre: eventos del mouse

Busca más info seguro encuentras lo que deseas.
No te puedo ayudar mucho con el código debido a que estoy ahora testeando otras app.

Un saludo ;)
__________________
Puntuar +1 es buena forma de dar las gracias. :P
Your Time is limited, so don't waste it living someone else´s life.
Por: HackID1
  #6 (permalink)  
Antiguo 13/01/2015, 11:20
Avatar de Mariano_Floyd  
Fecha de Ingreso: marzo-2013
Ubicación: Córdoba
Mensajes: 155
Antigüedad: 11 años
Puntos: 14
Respuesta: Lograr efecto del nav

Para lo que el quiere hacer necesita javascript, pero no para las transiciones, si no para detectar la posición del scroll y activar el ítem del menú que corresponde a lo que se esta visualizando en ese momento. Por ese mismo motivo fue que le recomendé waypoints, un script que es justamente para eso, para detectar posiciones de scrolls y lanzar eventos.
Para la transición del dash usas solo css.
  #7 (permalink)  
Antiguo 19/01/2015, 08:09
Avatar de Maverick2786  
Fecha de Ingreso: diciembre-2012
Mensajes: 107
Antigüedad: 11 años, 3 meses
Puntos: 1
Respuesta: Lograr efecto del nav

Muchas gracias a todos por su ayuda, sigo sin poder lograrlo, cuando lo consiga pondre la respuestas

Gracias por su ayuda
  #8 (permalink)  
Antiguo 20/01/2015, 22:59
Avatar de siddartha23  
Fecha de Ingreso: septiembre-2013
Mensajes: 357
Antigüedad: 10 años, 6 meses
Puntos: 39
Respuesta: Lograr efecto del nav

Cada bloque dentro del sitio es una sección, al hacer :hover en cada sección el menu cambia de propiedades ¿simple no? muestra tu avanze
__________________
velarde23.com - Soluciones Web
  #9 (permalink)  
Antiguo 11/03/2015, 11:02
Avatar de Maverick2786  
Fecha de Ingreso: diciembre-2012
Mensajes: 107
Antigüedad: 11 años, 3 meses
Puntos: 1
Respuesta: Lograr efecto del nav

Bueno perdon la tardanza , pero aqui esta la solucion. Gracias a la ayuda de todos que me indicaron como lo podia hacer:

Funcion para controlar en que parte de la pagina estoy:
Código Javascript:
Ver original
  1. $(window).scroll(function (event) {
  2.     var scroll = $(window).scrollTop();
  3.     var porciento = (scroll * 100) / 8688
  4.  
  5.     if (porciento >= 0 && porciento <= 5) //inicio
  6.     {
  7.         $("#nosotros_nav").removeClass("active");
  8.         $("#servicios").removeClass("active");
  9.         $("#tickets_nav").removeClass("active");
  10.         $("#empelos").removeClass("active");
  11.         $("#contacto").removeClass("active");
  12.         $("#inicio").addClass("active");
  13.     } else {
  14.         if (porciento >= 5 && porciento <= 16) //nosotros
  15.         {
  16.             $("#inicio").removeClass("active");
  17.             $("#servicios").removeClass("active");
  18.             $("#tickets_nav").removeClass("active");
  19.             $("#empelos").removeClass("active");
  20.             $("#contacto").removeClass("active");
  21.             $("#nosotros_nav").addClass("active");
  22.         }
  23.         else {
  24.             if (porciento >= 20 && porciento <= 76) //servicios
  25.             {
  26.                 $("#inicio").removeClass("active");
  27.                 $("#nosotros_nav ").removeClass("active");
  28.                 $("#tickets_nav").removeClass("active");
  29.                 $("#empelos").removeClass("active");
  30.                 $("#contacto").removeClass("active");
  31.                 $("#servicios").addClass("active");
  32.             }
  33.             else {
  34.                 if (porciento >= 75 && porciento <= 86) //Tickets
  35.                 {
  36.                     $("#inicio").removeClass("active");
  37.                     $("#nosotros_nav ").removeClass("active");
  38.                     $("#servicios").removeClass("active");
  39.                     $("#empelos").removeClass("active");
  40.                     $("#contacto").removeClass("active");
  41.                     $("#tickets_nav").addClass("active");
  42.                 }
  43.                 else {
  44.                     if (porciento >= 83 && porciento <= 96) //empelo
  45.                     {
  46.                         $("#inicio").removeClass("active");
  47.                         $("#nosotros_nav ").removeClass("active");
  48.                         $("#servicios").removeClass("active");
  49.                         $("#tickets_nav").removeClass("active");
  50.                         $("#contacto").removeClass("active");
  51.                         $("#empelos").addClass("active");
  52.                     }
  53.                     else {
  54.                         if (porciento >= 96 && porciento <= 100) //empelo
  55.                         {
  56.                             $("#inicio").removeClass("active");
  57.                             $("#nosotros_nav ").removeClass("active");
  58.                             $("#servicios").removeClass("active");
  59.                             $("#tickets_nav").removeClass("active");
  60.                             $("#empelos").removeClass("active");
  61.                             $("#contacto").addClass("active");
  62.                         }
  63.                     }
  64.                 }
  65.             }
  66.         }
  67.     }
  68.  
  69.  
  70.  
  71. });

Como se mira en la funcion parto del hecho que ya se cuando mide mi pagina, y cuanto miden en (porcentaje) cada seccion que necesitava
  #10 (permalink)  
Antiguo 11/03/2015, 11:16
Avatar de NueveReinas  
Fecha de Ingreso: septiembre-2013
Ubicación: No tan Buenos Aires
Mensajes: 1.101
Antigüedad: 10 años, 6 meses
Puntos: 145
Respuesta: Lograr efecto del nav

Cita:
Iniciado por Maverick2786 Ver Mensaje
Como se mira en la funcion parto del hecho que ya se cuando mide mi pagina, y cuanto miden en (porcentaje) cada seccion que necesitava
Cuánto mide tu página en... ¿qué resolución? No mide lo mismo de alto con 1920 de ancho que con 320...

Por cierto, veo mucho código innecesario ahí, demasiados "removeClass".
  #11 (permalink)  
Antiguo 11/03/2015, 15:52
Avatar de Maverick2786  
Fecha de Ingreso: diciembre-2012
Mensajes: 107
Antigüedad: 11 años, 3 meses
Puntos: 1
Respuesta: Lograr efecto del nav

Lo del tamaño de pagina segun el css,
Los del remove, es mas que todo por seguridad , es para asegurarme que este siempre solo uno activado
  #12 (permalink)  
Antiguo 11/03/2015, 19:46
Avatar de siddartha23  
Fecha de Ingreso: septiembre-2013
Mensajes: 357
Antigüedad: 10 años, 6 meses
Puntos: 39
Respuesta: Lograr efecto del nav

Si metieras todas las secciones dentro de un array te ahorrarías mucho código y si lo hicieras mediante :hover de css te ahorrarías mucho mas...
__________________
velarde23.com - Soluciones Web
  #13 (permalink)  
Antiguo 12/03/2015, 09:27
Avatar de Maverick2786  
Fecha de Ingreso: diciembre-2012
Mensajes: 107
Antigüedad: 11 años, 3 meses
Puntos: 1
Respuesta: Lograr efecto del nav

Lo del array no lo pense, lo del hover no podia xq ya tiene asignado otro efecto que necesitaba

Pero gracias por las sugerencias

Última edición por Maverick2786; 12/03/2015 a las 16:02

Etiquetas: efecto, lograr, nav
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 07:43.