[parallax] abrir um menu novo

[nbworld]

Alguém saberia me dizer como eu posso fazer em parallax quando o usuário rolar até tal posição do site ou facilitar até a div menu surja um outro menu assim evitar que a pessoa fique navegue mais rápido.


EXEMPLO:

TENHO UM MENU JÁ PRONTO FIXO COM O PARALLAX 

SOBRE CONTATO SERVIÇOS

quando o usuário passar pela div servições automaticamente surgirá um novo menu embaixo do menu existente.


MENU:

SOBRE CONTRATO SERVIÇOS
WEB PROGRAMAÇÃO ARTES 

 

e assim quando o usuário passar acima da div servições o menu some.

 

 

obrigado.

[FabianoS]

@nbworld não sei se entendi mas você quer ao scroll descer até certa posição apareça outro menu ?

[nbworld]

@nbworld não sei se entendi mas você quer ao scroll descer até certa posição apareça outro menu ?

 

Seria assim,

Terá o menu principal fixo que ao descer ele fica estático parado efeito parallax mesmo.

Após você descer o scroll do mouse e chegar tipo a um certa DIV ou certa posição (não sei qual seria mais fácil) automaticamente aparecerá outro menu secundário embaixo do primário.

tipo assim:

MENU PRIMÁRIO:

INÍCIO SOBRE SERVIÇO

Após passar de uma DIV ou posição

INÍCIO SOBRE SERVIÇOS

EXEMPLO1 EXEMPLO2 EXEMPLO3 <- MENU SECUNDÁRIO.

 

[FabianoS]

@nbworld mas o segundo menu não vai ter os mesmo sub menus  ?

 

Tipo 

Menu1 = pagina 1 pagina 2 e pagina 3 

 

e o segundo menu vai ter 

 

menu2 vai ter jogos , fotos e seilaoque. 

 

?

[nbworld]

@nbworld mas o segundo menu não vai ter os mesmo sub menus  ?

 

Tipo 

Menu1 = pagina 1 pagina 2 e pagina 3 

 

e o segundo menu vai ter 

 

menu2 vai ter jogos , fotos e seilaoque. 

 

?

 

O segundo menu não será um submenu,

Será outro menu que aparecerá abaixo do menu principal .. tipo um menu provisório [lembrando: ele só aparecerá caso rolar o mouse abaixo de tal div ou de tal posição.

[FabianoS]

 

 

O segundo menu não será um submenu,

Será outro menu que aparecerá abaixo do menu principal .. tipo um menu provisório [lembrando: ele só aparecerá caso rolar o mouse abaixo de tal div ou de tal posição.

@nbworld  Cara não e isso que to falando, tipo o segundo menu vai ter as mesmas coisa que o primeiro ou vai ser diferente.

[DiF]

@nbworld

 

Se eu entendi, isso é um pouco fácil de resolver.

 

Crie o segundo menu e esconda por trás do principal.

 

Para mostrar o menu.. só usar um javascript a partir da posição de onde quer que ele mostre.. daí é só manipular o css.. 

 

por exemplo:

$(window).scroll(function() {	// 100 = The point you would like to fade the nav in.		if ($(window).scrollTop() > 130) {		// se passar da div tal  mostra o menu				} else {		// se voltar esconde denovo								       }				});

[FabianoS]

@dif ia passar a mesma coisa , só estou em duvida se ele quer um menu fixo depois de tal rolagem , ou vai criar outro menu.

[nbworld]

Dif pode ser assim até. [Vou testar]

 

 

@dif ia passar a mesma coisa , só estou em duvida se ele quer um menu fixo depois de tal rolagem , ou vai criar outro menu.

 

 

sim, o menu vai ser fixo através da scrolling para baixo no caso, se ele passar da DIV chamada Serviço esse MENU FIXO SECUNDÁRIO sairá tipo ficaria opacidade 0% , ai caso ele passe novamente pela DIV Serviço o menu reaparecerá.

-=
Como isso não consegui resolver direito .. surgiu uma outra dúvidazinha.

Eu tenho uma NAV BAR [Menu fixo que funciona como parallax]

Imagem abaixo para melhor compreensão:



As 5 imagens são do nossos serviços, gostaria de saber como eu deixaria ele 0% de opacidade até uma DIV e na hora que passar dessa DIV as imagens voltam com 100% de opacidade.

[sou ainda novo em js e css, por isso estou apanhando pra mexer nisso.]

muito obrigado !
 

[FabianoS]

@nbworld sua outra dúvida se não conseguiu usar o código que o @dif passou então não vai conseguir fazer a segunda basicamente é a mesma coisa.

 

Você tem uma classe  para imagens só defina Opacidade em 0 nessa classe então quando o scroll passar de 130px vai deixar 100%.

$(window).scroll(function() {			if ($(window).scrollTop() > 130) { 		$('.imagens').animate({opacity:'100%'});		 	} else { 		$('.imagens').animate({opacity:'0'});								       }				});

obs.: cara realmente precisa ser opacidade. era melhor usar um efeito de fade.

[nbworld]

@nbworld sua outra dúvida se não conseguiu usar o código que o @dif passou então não vai conseguir fazer a segunda basicamente é a mesma coisa.

 

Você tem uma classe  para imagens só defina Opacidade em 0 nessa classe então quando o scroll passar de 130px vai deixar 100%.

$(window).scroll(function() {			if ($(window).scrollTop() > 130) { 		$('.imagens').animate({opacity:'100%'});		 	} else { 		$('.imagens').animate({opacity:'0'});								       }				});

obs.: cara realmente precisa ser opacidade. era melhor usar um efeito de fade.

 

Pode ser por efeito também.

Obrigado.

 

 

-=

Outra DÚVIDA..

O menu principal que possui SERVIÇOS, CONTATO E OUTROS.. É USADO COMO .header e como irei fazer o menu secundário desaparecer sendo que ele também está dentro da .header?

Fiz um teste e os dois desapareceram .. como posso fazer apenas o menu secundário aparecer e desaparecer?

 

porém eu consigo manipular a lista dentro dele sem afetar o menu principal .. [lista que seria as imagens .. que irão aparecer no menu secundário .. ]

[FabianoS]

@nbworld Seria melhor postar o código CSS do menu. 

 

 

 

Fiz um teste e os dois desapareceram .. como posso fazer apenas o menu secundário aparecer e desaparecer?

Isso porque você deve ter usado a mesma classe para os 2 menus.

[nbworld]

header {  display: block;  position: fixed;  top: 0;  z-index: 900;  width: 150%;  line-height: 70px;  background-color: rgba(0, 0, 0, 0.7);  border-bottom: solid 1px rgba(255, 255, 255, 0.2);  }header .conteudo .header-icone img {  margin-top: -4px;}header .conteudo .coluna-esquerda {  position: relative;  float: left;  width: 3.333333333333332%;  min-height: 1px;  padding-left: 15px;  padding-right: 15px;    }header .conteudo .coluna-esquerda .logo {  float: left;}header .conteudo .coluna-direita {  position: relative;  float: left;  width: 83.33333333333334%;  min-height: 2px;  padding-left: 15px;  padding-right: 15px;  float: right;  text-align: right;  }.menu-principal {  display: inline-block;}@[member=MEDIA] (max-width: 767px) {  .menu-principal {    display: none !important;  }}.menu-principal ul {  margin: 0;  padding-left: 0;  list-style: none;}.menu-principal ul > li {  display: inline-block;  padding: 0 20px;}.menu-principal ul > li a {  color: #fff;  font-weight: 200;  text-decoration: none;   transition: color linear .150s;}.menu-principal ul > li a:hover,.menu-principal ul > li a:focus,.menu-principal ul > li a:active {  color: #F49933;}.menu-principal-mobile {  transition: all linear .500s;  margin-top: 60px;}@[member=MEDIA] (min-width: 768px) {  .menu-principal-mobile {    display: none !important;  }}.menu-principal-mobile ul {  margin: 0;  padding-left: 0;  list-style: none;}.menu-principal-mobile ul > li {  display: block;  margin-bottom: -1px;  background-color: #fff;  border: 1px solid #ddd;}.menu-principal-mobile ul > li:hover,.menu-principal-mobile ul > li:focus,.menu-principal-mobile ul > li:active {  background-color: #eee;}.menu-principal-mobile ul > li a {  display: block;  padding: 0 15px;  color: #333;  font-size: 16px;  text-decoration: none;}.menu-principal-mobile ul > li a:hover,.menu-principal-mobile ul > li a:focus,.menu-principal-mobile ul > li a:active {  color: #F49933;}@[member=MEDIA] (min-width: 768px) {  .btn-nav {    display: none !important;  }}.btn-nav .bar {  display: block;  width: 0px;  height: 2px;  background-color: #fff;  margin: 5px 0; }

Eu testei o JS porém ele some os icones . só que não reaparecem quando sobe até tal ponto.

[FabianoS]

@nbworld cara faz assim.

$(window).scroll(function() {			if ($(window).scrollTop() > 130) { 		$("DIV OU QUALQUER COISA QUE QUEIRA SUMIR").fadeOut();		 	} else { 		$("DIV OU QUALQUER COISA QUE QUEIRA QUE APAREÇA").fadeIn();								       }				});

[nbworld]

to testando..

não está indo, mas vou testar novamente

[FabianoS]

to testando..

não está indo, mas vou testar novamente

 

fiz uma alteração no código  copie d novo e aonde deixei pra você colocar a div . se for uma div do tipo classe você coloca. o "ponto " ja que se trata de uma classe se não se for ID coloca "#"

 

por exemplo.

// se for class$(".div").fadeOut();// se for ID$("#div").fadeOut();

[nbworld]

Oi.

Eu fiz 2 nav bar .

header .conteudo .menu-sec {  position: relative;  float: center;  width: 73.33333333333334%;  min-height: 1px;  padding-left: 15px;  padding-right: 15px;  text-align: center;  opacity: 0% } .menu-secundario {  display: inline-block;    float: center;     }@[member=MEDIA] (max-width: 767px) {  .menu-secundario {    display: none !important;    }}.menu-secundario ul {  margin: 0;  padding-left: 0;  list-style: none;  }   .menu-secundario ul > li {  display: inline-block;   padding: 0 10px; }.menu-secundario ul > li a {  color: #fff;  font-weight: 200;  text-decoration: none;  float: center;

tipo eu deixei opacidade 0% mais mesmo assim o meu menu não fica invisivel o que pode ser?

[FabianoS]

@nbworld 

 

 

tipo eu deixei opacidade 0% mais mesmo assim o meu menu não fica invisivel o que pode ser?

 

Amigo aquele era só exemplo não achei que seguiria ao pé da letra , desculpe. tire o % do 0 . não pode ter.

 

Seria melhor você usar o ultimo código q postei. o efeito de fade e a mesma coisa que esta tentando fazer.

[DiF]

Tenho  outra sugestão.

 

Já ouviram falar da técnica de sprites em menus?

 

Acontece que provavelmente tens o menu inteiro em uma imagem. Imagem em anexo no post #09.

 

Basicamente a técnica consiste em manipular as posições de várias imagens dentro de uma imagem  através de um atributo chamado background-position.

 

Por exemplo, se a primeira figura da imagem do menu está colado no topo e na margem esquerda,  quer dizer que a figura está na posição X = 0  e Y = 0.  

 

Então é isso que você tem que fazer primeiro. Crie o menu principal apenas com os elementos setando o limite do menu. assim você esconde os desnecessários.

 

Depois você cria o segundo menu usando a técnica de sprites.. e mostra ela usando o javascript passado.

Só um adento naquele código.   o trecho:

if ($(window).scrollTop() > 130) 

o 130 foi de um exemplo que eu usei. no caso altere para o valor correspondente ao seu projeto. 

Para descobrir a posição do elemento DIV desejado.. podes usar o inspecionador de elementos do chrome ou firefox(ou firebug)

[nbworld]

@nbworld 

 

Amigo aquele era só exemplo não achei que seguiria ao pé da letra , desculpe. tire o % do 0 . não pode ter.

 

Seria melhor você usar o ultimo código q postei. o efeito de fade e a mesma coisa que esta tentando fazer.

 

tinha me esquecido desse detalhe.

Meu NAV bar contém a seguinte classe: 

 

 

header .conteudo .menu-sec {  position: relative;  float: center;  width: 73.33333333333334%;  min-height: 1px;  padding-left: 15px;  padding-right: 15px;  text-align: center;  opacity: 0;}

.menu-secundario {  display: inline-block;    float: center;}

porém ele só deixa opacidade 0 nos elementos dentro do menu e não o menu inteiro.

[FabianoS]

Isso é a classe que você pois . tem que por a classe que conrresponde ao menu inteiro