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

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

Jipley

Neues Mitglied
11 Februar 2020
3
0
1
24
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
 

Jipley

Neues Mitglied
11 Februar 2020
3
0
1
24
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.
 

basti1012

Senior HTML'ler
26 November 2017
1.185
117
63
39
Minden
sebastian1012.bplaced.net
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 deinen jetztigen Code nicht das Endergebniss zusammen reimen kann habe ich m,al mit den vorhandenen Code etwas zusammen gebaut was sinn ergeben könnte.

Auch wenn es nix mit dein Vorhaben zutun hat kannst du zumindest sehen das es geht
Daraus solltest du dann dein vorhaben dann auch zusammen bauen können
 
  • Like
Reactions: Jipley

Jipley

Neues Mitglied
11 Februar 2020
3
0
1
24
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:

basti1012

Senior HTML'ler
26 November 2017
1.185
117
63
39
Minden
sebastian1012.bplaced.net
Werbung: