Look closely at the image below;
Thistestjustabovewasdoneina HTML file with CSS, and is working perfectly, but I did the same test on an Angular project with the same code and did not work correctly, what happens is that the menu with the (More) sign appears on the screen, however the menu that is hidden does not appear, it is the same code and I do not understand why it does not work; >
I put the Javascript import into the main Angular file in index.html, it looks like this;
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AlgamoneyUi</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<app-root></app-root>
</body>
<script src="assets/script/script.js"></script>
</html>
This is the app.component.html
<header>
<h1>Estrutura One Page</h1>
</header>
<main>
<nav>
<div class="menu"><i class="material-icons"></i></div>
<div class="nav-itens">
<a href="#topo" class="tooltip" data-tooltip="Topo fixo">
<i class="material-icons"></i>
<label class="text_tooltip"></label>
</a>
<a href="#botao" class="tooltip" data-tooltip="Botões">
<i class="material-icons"></i>
<label class="text_tooltip"></label>
</a>
<a href="#tolltips" class="tooltip" data-tooltip="Tooltips">
<i class="material-icons"></i>
<label class="text_tooltip"></label>
</a>
<a href="#parallax" class="tooltip" data-tooltip="Parallax">
<i class="material-icons"></i>
<label class="text_tooltip"></label>
</a>
</div>
</nav>
<section>
<div id="topo" class="section_info">
<div class="row container">
<h2 class="header">Topo Fixo</h2>
<p>O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressсo. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto para criar um espécime de livro. Este texto não só sobreviveu 5 séculos, mas também o salto para a tipografia electrónica, mantendo-se essencialmente inalterada. Foi popularizada nos anos 60 com a disponibilização das folhas de Letraset, que continham passagens com Lorem Ipsum, e mais recentemente com os programas de publicação como o Aldus PageMaker que incluem versões do Lorem Ipsum.</p>
</div>
</div>
<div class="parallax-container">
<div class="parallax"><img src="img/imagem1.jpg"></div>
</div>
</section>
<section>
<div id="botao" class="section_info">
<div class="row container">
<h2 class="header">Botões de navegação</h2>
<p>É um facto estabelecido de que um leitor é distraído pelo conteúdo legível de uma página quando analisa a sua mancha gráfica. Logo, o uso de Lorem Ipsum leva a uma distribuição mais ou menos normal de letras, ao contrário do uso de "Conteúdo aqui, conteúdo aqui", tornando-o texto legível. Muitas ferramentas de publicação electrónica e editores de páginas web usam actualmente o Lorem Ipsum como o modelo de texto usado por omissсo, e uma pesquisa por "lorem ipsum" irá encontrar muitos websites ainda na sua infáncia. Várias versões tem evoluído ao longo dos anos, por vezes por acidente, por vezes propositadamente (como no caso do humor).</p>
</div>
</div>
<div class="parallax-container">
<div class="parallax"><img src="img/imagem2.jpg"></div>
</div>
</section>
<section>
<div id="tolltips" class="section_info">
<div class="row container">
<h2 class="header">Tooltips</h2>
<p>Existem muitas variações das passagens modelo da indústria tipográfica e de impressсo. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto para criar um espécime de livro. Este texto não só sobreviveu 5 séculos, mas também o salto para a tipografia electrónica, mantendo-se essencialmente inalterada. Foi popularizada nos anos 60 com a disponibilização das folhas de Letraset, que continham passagens com Lorem Ipsum, e mais recentemente com os programas de publicação como o Aldus PageMaker que incluem versões do Lorem Ipsum.</p>
</div>
</div>
<div class="parallax-container">
<div class="parallax"><img src="img/imagem3.jpg"></div>
</div>
</section>
<section>
<div id="parallax" class="section_info">
<div class="row container">
<h2 class="header">Parallax</h2>
<p>Existem muitas variações das passagens do Lorem Ipsum disponíveis, mas a maior parte sofreu alterações de alguma forma, pela injecção de humor, ou de palavras aleatórias que nem sequer parecem suficientemente credíveis. Se vai usar uma passagem do Lorem Ipsum, deve ter a certeza que não contém nada de embaraуoso escondido no meio do texto. Todos os geradores de Lorem Ipsum na Internet acabam por repetir texto pré-definido, como necessário, fazendo com que este seja o primeiro verdadeiro gerador na Internet. Usa um dicionário de 200 palavras em Latim, combinado com uma dúzia de modelos de frases, para gerar Lorem Ipsum que pareуam razoáveis. Desta forma, o Lorem Ipsum gerado é sempre livre de repetição, ou de injecção humorística, etc.</p>
</div>
</div>
</section>
</main>
<footer>
<p>CURSO DEVMEDIA</p>
</footer>
This is the Javascript;
$(document).ready(function() {
$("nav").mouseover(function(){
$(".nav-itens").addClass("nav-show");
});
$("nav").mouseout(function(){
$(".nav-itens").removeClass("nav-show");
});
var page = $('html, body');
$('a.tooltip').click(function() {
page.animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
return false;
});
$(document).scroll(function(){
var topWindow = $(window).scrollTop();
if(topWindow > 60) {
$("header").addClass('header_fixed');
}else {
$("header").removeClass('header_fixed');
};
});
});
Can anyone identify the problem?