• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Menü Animation funktioniert in Dreamweaver nicht | HTML, CSS, JavaScript

J

Jipley

Neues Mitglied
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 Code:

HTML<!doctype html>
<html lang="en-US">

<head>
<title>Firma</title>
<meta charset="utf-8">
<script src="js/JQUERY_Main.js"></script>

<style>
@import url("css/Main.css");
</style>

</head>

<body>

<div id="openMenu">
<img src="Bilder%20Website/Menu.png" alt="Bilder%20Website/Menu.png">
</div>

<div id="closeMenu">
<img src="Bilder%20Website/Menu_close.png" alt="Bilder%20Website/Menu_close.png">
</div>

<div id="main">
<div id="logoSection">
<img src="Bilder Website/2020_Logo Online RGB_10cm.png" alt="Logo"/>
</div>
<div id="menuSection">
<ul>
<li>
<div id="leistungen" class="menu">
LEISTUNGEN
</div>
</li>
<li>
<div id="referenzen" class="menu">
REFERENZEN
</div>
</li>
<li>
<div id="team" class="menu">
TEAM
</div>
</li>
<li>
<div id="kontakt" class="menu">
KONTAKT
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
CSS@charset "utf-8";
body{
margin: 0px;
padding: 0px;
background-color: #ffc200;
}
#main{
height: 100vh;
width: 100%;
position: fixed;
visibility: hidden;
z-index: 4;
top: 0px;
}
#logoSection{
height: 100%;
width: 50%;
background-color: #fcfcfc;
box-shadow: 10px 0px 30px rgba(0,0,0,.4);
position: absolute;
z-index: 999;
}
#logoSection img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 50%;
z-index: 5;
}
#menuSection{
height: 100%;
width: 50%;
background-color: #E31E24;
position: absolute;
left: 50%;
z-index: 4;
}
#menuSection ul{
list-style: none;
margin: 0px;
padding: 0px;
position: absolute;
top: 30%;
left: 0%;
z-index: 5;
}
#menuSection ul li{
height: 100px;
width: 750px;
font-family: "Century Gothic";
font-size: 100px;
line-height: 100px;
cursor: pointer;
z-index: 5;
font-weight: bold;
}
.menu{
background-color: #FFFFFF;
display: flex;
position: fixed;
cursor: pointer;
pointer-events: none;
transition: all .5s;
width: 0px;
z-index: 4;
}
#menuSection ul li:hover .menu{
width: 750px;
z-index: 4;
}
#openMenu,#closeMenu{
height: 50px;
width: 50px;
background-color: #262626;
position: fixed;
top: 30px;
left: 97%;
transform: translateY(-50%);
z-index: 999;
cursor: pointer;
}
#closeMenu{
top: -200px;
z-index: 4;
}
JavaScript$(document).ready(function() {
$("#openMenu").click(function(){
$("#main") .fadeIn(200);
$("#openMenu").animate({left:"-10%"});
$("#closeMenu").animate({left:"93%"});
});



$("#closeMenu").click(function(){
$("#main") .fadeOut(200);
$("#openMenu").animate({left:"0%"});
$("#closeMenu").animate({left:"100%"});
});
});

Liebe Grüße
Timon
 
hast du Jquery eingebunden ?
Code: 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 
Danke für die schnelle Antwort.
Hatte ich ursprünglich. Nur da ich nicht wusste was dies genau macht hatte ich es entfernt, weil es für mich keinen Effekt zu haben schien. Habe jetzt deinen Code in den HTML head eingefügt. Hat leider keine Wirkung gezeigt.
 
Ich habe kein Plan wie das aussehen soll, aber wenn ich deinen Code nehme und jQuery einbinde bewegt sich zumindest schon was.
Da ich mir aus deinem jetzigen Code nicht das Endergebnis zusammen reimen kann habe ich mal mit dem vorhandenen Code etwas zusammen gebaut, was Sinn ergeben könnte.

Auch wenn es nichts mit dein Vorhaben zu tun hat kannst du zumindest sehen, dass es geht
Daraus solltest du dann dein Vorhaben dann auch zusammen bauen können
Link zur Lösung
 
Zuletzt bearbeitet:
Du weißt gar nicht wie glücklich ich gerade bin. Hab deinen Code in meinen eingearbeitet, ein paar Sachen noch hinzugefügt/verändert und es funktioniert jetzt endlich! Ich denke der Fehler war eine Mischung aus dem z-index und das er nicht auf die JavaScript Datei zugreifen konnte.
Ich poste das Endprodukt einfach mal für andere und damit man es sich auch besser vorstellen kann.
(Ist jedoch noch nicht final)

https://codepen.io/Jipley/pen/zYGvPLp

Also vielen Dank basti, dass du dir die Zeit genommen hast und mich von meiner Verzweiflung erlöst hast.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben