Menü Animation funktioniert in Dreamweaver nicht | HTML, CSS, JavaScript
Hallo liebe Coder,
Ich bin nun seit zwei Wochen neu im Bereich Homepage Erstellung und verzweifle nun an dem Problem, dass sich mein Code für das Menü zwar richtig darstellen lässt aber die Animation welche es öffnen oder schließen sollte nicht aufgeführt wird, sodass es unbrauchbar ist. Geschrieben ist er mit HTML, CSS und JavaScript.
Ich hoffe jemand von euch kann mir helfen den Fehler zu finden. Danke an diejenigen die sich vielleicht die Zeit nehmen.
Der hier verwendete Code
<!doctype html>
<html lang="de">
<head>
<title>Firma</title>
<meta charset="utf-8">
<script src="/js_webseite/jquery.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
body{
background: #ffc200;
height:100vh;
overflow:hidden;
}
#main{
height: 100%;
width: 100%;
display:none;
}
#logoSection{
height: 100%;
float:left;
width: 50%;
background: #fcfcfc;
transition:all 0.5s;
box-shadow: 10px 0px 30px rgba(0,0,0,.4);
}
#logoSection:hover{
transform:scale(1.1);
transition:all 0.5s;
position:absolute;
z-index:0;
}
nav{
height: 100%;
width: 50%;
background: #E31E24;
position:absolute;
right:0;
z-index:1;
}
nav ul{
list-style: none;
display:flex;
flex-direction:column;
top:100px;
}
nav ul li{
height:50px;
width:100%;
font-family: "Century Gothic";
font-size: 50px;
cursor: pointer;
}
nav ul li a{
background: #FFFFFF;
transition: all .5s;
font-weight: bold;
}
a:hover{
background:black;
color:white;
}
#openMenu{
height: 50px;
width: 50px;
background:blue;
position:absolute;
top:0px;
color:white;
line-height:50px;
right:0;
z-index: 999;
margin-left:-50px;
cursor: pointer;
}
#closeMenu{
height: 50px;
width: 50px;
background:blue;
position:absolute;
color:white;
line-height:50px;
top:0px;
right:-50px;
z-index: 999;
cursor: pointer;
}
</style>
</head>
<body>
<div id="openMenu">OPEN</div>
<div id="closeMenu">CLOSE</div>
<div id="main">
<div id="logoSection">
<img src="/image/14.png">
</div>
<nav>
<ul>
<li><a id="leistungen" class="menu">LEISTUNGEN</a></li>
<li><a id="referenzen" class="menu">REFERENZEN</a></li>
<li><a id="team" class="menu">TEAM</a></li>
<li><a id="kontakt" class="menu">KONTAKT</a></li>
</ul>
</nav>
</div>
<script>
$(document).ready(function() {
$("#openMenu").click(function(){
$("#main").fadeIn(200);
$("#openMenu").animate({left:"-50px"});
$("#closeMenu").animate({right:"0px"});
});
$("#closeMenu").click(function(){
$("#main").fadeOut(200);
$("#openMenu").animate({left:'100%'});
$("#closeMenu").animate({right:"-50px"});
});
});
</script>
</body>
</html>