Code check JavaScript Menü stopPropagation

Moks1844 · 17. Oktober 2018

Hallo,

bin neu hier und auch neu beim programmieren. Ich versuche gerade ein multilevel menu zu erstellen und nutze dazu diesen Javascript code. Ich habe ihn von einem CodeBeispiel übernommen. Leider schließt sich das Menü nur, wenn man wieder auf den Menüpunkt clickt. Ich habe schon herausgefunden, dass es der stopPropagation-Befehl ist, der mich zur Lösung bringen wird. Wenn ich click.stopPropagation durch event.stopPropagation ersetze verändert sich aber leider nichts. Ich habe schon herumprobiert, wo es hinsoll, komme aber nicht weiter. Würde mich sehr freuen, wenn jemand von euch die Lösung kennt und mir kurz helfen würde!

(habe diese Frage so nicht hier im Forum gefunden)

Danke!

$(document).ready(

function() {

$('.menu-toggle').click(function() {

$('nav').toggleClass('active');

click.stopPropagation();

});

$('ul li').click(function() {

$(this).siblings().removeClass('active');

$(this).toggleClass('active');

})

}

)

</script>

basti1012 · 17. Oktober 2018

Könntest du mal den ganzen Code posten oder den Link zu deiner Seite

Moks1844 · 17. Oktober 2018

Hi, danke für deine Antwort. Code sieht aktuell so aus. css ist etwas durcheinander weil ich viel hin und her probiert habe. DANKE!!!

<!DOCTYPE html>

<head>

<title>Navbar</title>

</head>

<body>

<div class="logo">TESTESTEST</div>

<nav>

<ul>

<li class="sub-menu"><a href="#">TESTESTEST</a>

<ul>

<li><a href="#">TESTESTEST</a></li>

</ul>

</li>

<li class="sub-menu"><a href="#">TESTESTEST</a>

<ul>

<li><a href="#">TESTESTEST</a></li>

</ul>

</li>

</ul>

</nav>

</div>

</header>

</div>

<h1>Hauptüberschrift</h1>

<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>

<br>

<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>

<br>

<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. </p>

<br>

<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>

<br>

<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>

<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. </p>

<br>

<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>

<br>

<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>

<br>

<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. </p>

</section>

<ul>

<li> <a href="impressum.html">Impressum </a> </li>

<li> <a href="datenschutzerklaerung.html">Datenschutzerklärung </a> </li>

<li> <a href="kontakt.html">Kontakt </a> </li>

</ul>

</footer>

$(document).ready(

function() {

$('.menu-toggle').click(function() {

$('nav').toggleClass('active');

click.stopPropagation();

});

$('ul li').click(function() {

$(this).siblings().removeClass('active');

$(this).toggleClass('active');

})

event.stopPropagation();

}

)

</script>

</body>

</html>

style.css:

* {

padding: 0;

margin: 0;

box-sizing: border-box;

}

body {

background: #e3e3e3;

padding: 0;

color: #000000;

line-height: 20px;

text-align: justify;

font-family: "robotolight";

/*lines everything to the right*/

}

.spacing {

letter-spacing: 1px;

}

/*---- Header und Menu ----*/

a {

/* color: white; */

}

header {

position: absolute;

top: 0;

left: 0;

padding: 10px 100px;

width: 100%;

box-sizing: border-box;

background: #333;

}

header .logo {

color: #fff;

height: 50px;

line-height: 50px;

font-size: 24px;

float: left;

font-weight: bold;

}

header nav {

float: right;

}

header nav ul {

margin: 0;

padding: 0;

display: flex;

}

header nav ul li {

list-style: none;

position: relative;

}

header nav ul li.sub-menu:before {

content: '\f078';

font-family: fontAwesome;

position: absolute;

line-height: 50px;

color: #fff;

right: 1px;

}

header nav ul li.active.sub-menu:before {

content: '\f077';

}

header nav ul li ul {

position: absolute;

left: 0;

background: #333;

display: none;

}

header nav ul li.active ul {

/* use li: hover instead */

display: block;

}

header nav ul li ul li {

display: block;

width: 200px;

}

header nav ul li a {

height: 50px;

line-height: 50px;

padding: 0 20px;

color: #fff;

text-decoration: none;

display: block;

}

header nav ul li a:hover {

color: #fff;

background: #2196f3;

}

header nav ul li a.active {

background: #2196f3;

}

.menu-toggle {

color: #fff;

float: right;

line-height: 50px;

font-size: 24px;

cursor: pointer;

display: none;

}

@media (max-width: 860px) {

header {

padding: 0 20px;

}

.menu-toggle {

display: block;

}

header nav {

position: absolute;

top: 50px;

left: -100%;

width: 100%;

height: calc(100vh - 50px);

background: #333;

transition: 0.5s;

}

header nav.active {

left: 0;

}

header nav ul {

display: block;

text-align: center;

}

header nav ul li a {

border-bottom: 0.9px solid rgba(0, 0, 0, .2);

}

header nav ul li.active ul {

position: relative;

background: #003e6f;

}

header nav ul li ul li {

width: 100%;

}

p {

text-indent: 5%;

font-size: 25px;

}

h1 {

text-align: left;

line-height: 175%;

padding-bottom: 5px;

padding-left:25px;

}

h2 {

text-align: left;

line-height: 125%;

padding-bottom: 5px;

padding-left:0;

}

.banner {

width: 100%;

}

.banner img {

width: 100% !important;

height: auto;

}

section {

float: left;

width: 72%;

padding-left: 1%;

margin: 0;

background-color: #e3e3e3;

border-radius: 5%;

}

footer {

background-color: #e3e3e3;

border: 1px solid #DEDCD9;

border-radius: 5px;

clear: both;

font-size: 20px;

}

footer ul {

float:inherit;

list-style: none;

padding: 0px;

margin: 20px;

}

footer li {

margin-right: 15px;

display: inline;

}

footer li a {

text-decoration: none;

color: #000000;

line-height: 20px;

text-align: justify;

font-family: "robotolight";

}

footer p {

text-align: right;

margin-right: 20px;

color: #777;

}

@media only screen and (max-width: 780px){

section {

width: 100%;

}

aside {

width: 100%;

}

footer{

width: 100%

}

h2 {

font-size: 105%;

}

p {

font-size: 95%;

}

header {

width: 100%;

}

.banner {

display: none;

}

@media only screen (max-width 580px) {

h2 {

font-size: 95%;

}

p {

font-size: 88%

}

.box{

position: absolute;

width: 100% !important;

padding-bottom: 100px;

}

.banner {

display: none;

}

basti1012 · 17. Oktober 2018

Zitat von Moks1844

Hallo,

bin neu hier und auch neu beim programmieren. Ich versuche gerade ein multilevel menu zu erstellen und nutze dazu diesen Javascript code. Ich habe ihn von einem CodeBeispiel übernommen. Leider schließt sich das Menü nur, wenn man wieder auf den Menüpunkt clickt.

Wie soll sich das den sonst schliessen ? Mit einen Timer ? Mouse out ?

Also das müßte man shon wissen weil das ja eigentlich so gedacht ist das Menü auf und zu zumachen.

Woher hast du den das Code Beispiel ? Wahr das da anders ?

Moks1844 · 17. Oktober 2018

Bei event.stopPropagation stand vorher click.stopPropagation. Das Menü ist von einer Seite mit Code-Beispielen und ich habe es sonst nicht verändert. Ich habe es nur in meine Seite eingepasst - html-Struktur ist genauso und css/js durch 1zu1 copy-paste.

Am liebsten wäre mir, wenn das Menü sich von alleine schließt wenn man den Cursor nicht mehr auf dem Menü hat. Hatte bisher nach Lösungen geschaut, dass sich das Menü durch woanders hinclicken schließt. (hatte keinen Ansatz wie man durch Cursor wegziehen sucht)

Danke!

Arne Drews · 17. Oktober 2018

Das wäre ein onblur-Event. Aber ich ahne schon wieder wildes rauskopieren von Scripten aus dem Netz, ohne diese programmiertechnisch verstanden zu haben.

Moks1844 · 17. Oktober 2018

Was da steht habe ich soweit verstanden, glaube ich. Wie ich das hinbekomme was ich möchte weiß ich nicht. Aber ich schaue bereits nach timer, mouse oout und onblur, danke!

basti1012 · 17. Oktober 2018

Timer ? Ich glaube das ist großer Mist und volkkomen unnötig.

Arne Drews sagte onblur event. Ok da habe ich nicht dran gedacht . Dann versuch das doch mal erst,weil könnte besser sein als meine Lösung. Ich habe das anders gemacht. Mit hover. So das man oben auf den Pfeil auf und zu klicken kann und es geht auch zu wenn man mit der Maus rausgeht.

Aber ich bin der Meinung das du das mal mit onblur versuchst und wenn es nicht klappt sehen wir weiter.OK ?

Moks1844 · 17. Oktober 2018

Danke, werde es versuchen!

Code check JavaScript Menü stopPropagation

Jetzt mitmachen!

Teilen