2

Boa noite! Estou desenvolvendo um site one page scroll, estou no momento desenvolvendo o formulario de contato, porém quando a pagina desse até o formulário o menu fica na frente do formulário. E Quando clico no formulário para tentar escrever ele esta interpretando como se fossem links. Alguém poderia me ajudar? segue o código.

Obrigado!

function goTo(element, speed) {
	var href = element.attr('href');
	var top = $(href).offset().top;
	$("html,body").animate({scrollTop : top}, speed);
}

$(function() {
	$("#top a").click(function(e) {
		e.preventDefault();
		
		goTo($(this), 900);

	});

});
*{
	margin: 0;
	padding: 0;
	text-decoration: none;
	list-style-type: none;
}

body, html {

	height: 100%;
	

}

header {
	background-color: #2d3e50;
	width: 100%;
	height: 100px;
	position: fixed;
}

header .logo {
	display: inline;
	float: left;
	margin-left: 20px;

}

.logo img {
	width: 220px;
	margin-top: -8px;
}

header nav {
	float: right;
}

header nav ul {
	list-style-type: none;
	text-align: center;
	padding-right: 100px;
	padding-top: 37px;

}

header nav li {
	display: inline;
	
}

header nav a {
	color: #fff;
	display: inline;
	padding: 0 10px;
	text-decoration: none;
	font-size: 1.3em;
	font-family: 'Roboto', sans-serif;
}

header nav a:hover {
	color: #f44336;
}

.content {
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.content:nth-child(2){
	background-color: #000;
}


/*formulário de contato*/
.container {
	margin-top: 170px;

}

form {
  
  margin: 0 auto;
  width: 1000px;
  height: 500px;
  padding: 1em;
  border: 1px solid #CCC;
  border-radius: 1em;

}

form div + div {
  margin-top: 1em;
}

label {
  display: inline-block;
  width: 90px;
  text-align: right;

}

input, textarea {
  
  font: 1em sans-serif;
  width: 500px;
  box-sizing: border-box;
  border: 1px solid #999;

}


input:focus, textarea:focus {
  border-color: #000;
}

textarea {
  
  vertical-align: top;
  height: 10em;
}

.button {
  
  padding-left: 90px; /
}

button {
  
  margin-left: .5em;
}
<header>
		<h1 class="logo"><img src="img/logo-ai-8.png" alt="logotipo"></h1>
		<nav id="top">
			<ul>
				<li><a href="#home">Home</li>
				<li><a href="#empresa">Empresa</li>
				<li><a href="#portifolio">Portifólio</li>
				<li><a href="#contato">Contato</li>
			</ul>
		</nav>
	</header>
<section id="home" class="content">

</section>
<section id="empresa" class="content">

</section>
<section id="portifolio" class="content">

</section>
<section id="contato" class="content">
<div class="contact">	
</div>
<div class="container">
	<form action="form-contact" method="post">
    <div>
        <label for="name">Name</label>
        <input type="text" id="name" name="user_name">
    </div>
    <div>
        <label for="mail">E-mail</label>
        <input type="email" id="mail" name="user_mail">
    </div>
    <div>
        <label for="msg">Message</label>
        <textarea id="msg" name="user_message"></textarea>
    </div>
    <div class="button">
    	<button type="submit">Send your message</button>
    </div>
</div>
</form>

</section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<script type="text/javascript" src="js/main.js"></script>	
</body>
</html>

1
  • O StackOverflow tem suporte a códigos HTML, JavaScript e CSS. Faça o uso da ferramenta, basta editar a pergunta e pressionar ctrl+m.
    – Woss
    Commented 6/03/2017 às 2:09

1 Resposta 1

1

Para retirar o menu da frente do formulário, tens de remover a propriedade CSS position que tem o valor fixed, aplicando assim o valor padrão static.

Quando usas a tag HTML <a>, tens de a fechar no final do link com </a> senão tudo o que estiver à frente também faz parte do link.

Aqui está o código com os problemas resolvidos:

function goTo(element, speed) {
  var href = element.attr('href');
  var top = $(href).offset().top;
  $("html,body").animate({scrollTop : top}, speed);
}

$(function() {
  $("#top a").click(function(e) {
    e.preventDefault();
    goTo($(this), 900);
  });
});
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style-type: none;
}

body, html {
  height: 100%;
}

header {
  background-color: #2d3e50;
  width: 100%;
  height: 100px;
}

header .logo {
  display: inline;
  float: left;
  margin-left: 20px;
}

.logo img {
  width: 220px;
  margin-top: -8px;
}

header nav {
  float: right;
}

header nav ul {
  list-style-type: none;
  text-align: center;
  padding-right: 100px;
  padding-top: 37px;
}

header nav li {
  display: inline;
}

header nav a {
  color: #fff;
  display: inline;
  padding: 0 10px;
  text-decoration: none;
  font-size: 1.3em;
  font-family: 'Roboto', sans-serif;
}

header nav a:hover {
  color: #f44336;
}

.content {
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.content:nth-child(2){
  background-color: #000;
}

/*formulário de contato*/
.container {
  margin-top: 170px;
}

form {
  margin: 0 auto;
  width: 1000px;
  height: 500px;
  padding: 1em;
  border: 1px solid #ccc;
  border-radius: 1em;
}

form div + div {
  margin-top: 1em;
}

label {
  display: inline-block;
  width: 90px;
  text-align: right;
}

input, textarea {
  font: 1em sans-serif;
  width: 500px;
  box-sizing: border-box;
  border: 1px solid #999;
}

input:focus, textarea:focus {
  border-color: #000;
}

textarea {
  vertical-align: top;
  height: 10em;
}

.button {
  padding-left: 90px;
}

button {
  margin-left: .5em;
}
<header>
  <h1 class="logo"><img src="img/logo-ai-8.png" alt="logotipo"></h1>
  <nav id="top">
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#empresa">Empresa</a></li>
      <li><a href="#portifolio">Portifólio</a></li>
      <li><a href="#contato">Contato</a></li>
    </ul>
  </nav>
</header>
<section id="home" class="content"></section>
<section id="empresa" class="content"></section>
<section id="portifolio" class="content"></section>
<section id="contato" class="content">
  <div class="contact"></div>
  <div class="container">
    <form action="form-contact" method="post">
      <div>
        <label for="name">Name</label>
        <input type="text" id="name" name="user_name">
      </div>
      <div>
        <label for="mail">E-mail</label>
        <input type="email" id="mail" name="user_mail">
      </div>
      <div>
        <label for="msg">Message</label>
        <textarea id="msg" name="user_message"></textarea>
      </div>
      <div class="button">
        <button type="submit">Send your message</button>
      </div>
    </form>
  </div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

Avisa-me se tiveres alguma dúvida, questão ou simplesmente não perceberes alguma parte.

Se alguma coisa está errada ou a faltar, adiciona/edita a tua pergunta se não estiver já lá e comenta para eu saber. Caso seja completamente diferente deste assunto, criar uma nova pergunta aqui no site.

6
  • Bom dia! Obrigado! Não me atentei a a questão do </a>, mas como faria para o menu descer junto com o scroll sem que a atropele os itens das sections? Commented 6/03/2017 às 14:39
  • Olá @MarcosDeBarrosAzevedo. O que exatamente queres dizer com "atropele os itens das sections"? Qual é o problema do menu sem retitar o seu posicionamento fixo? Commented 6/03/2017 às 14:43
  • Na verdade queria que o menu acompanhasse o scroll, porém se você ver no código antes da sua correção quando clicava em contato o formulário ficava atrás do menu e não centralizado corretamente. teria como fazer um one page scroll onde o <nav> rolasse a tela junto com o scroll? Commented 6/03/2017 às 15:10
  • Experimenta mudar o valor da propriedade margin-top da class container de 170 píxeis para só 70 (.container { margin-top: 170px; } para .container { margin-top: 70px; }). Commented 6/03/2017 às 15:35
  • Ok. Obrigado! Deu tudo certo. Commented 3/09/2019 às 1:56

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .