Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Dropdown-Menü mit Klick in Fenster schließen
#1
Question 
Hi,

ich bekomme es nicht hin, dass sich mein Dropdown-Menü mit
einem Klick, irgendwo im Fenster, schließt und nach einem weiteren Klick irgendwo im Fenster nicht wieder aufklappt.

Bisher habe ich folgendes:

HTML:

Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
        $('.nav_bar').click(function(){
            $('.dropdown').toggleClass('visible');
        });
    });

<!-- Menü Verstecken bei Fenster-Klick -->    

$(document).click( function(event)
{ if( $(event.target).closest('.nav_bar').length == 0 )

{ $('.navigation').toggleClass('visible'); } //das "toggleClass" sorgt leider auch für das Aufklappen im Fensterbereich

} );

<!-- ENDE Menü Verstecken bei Fenster-Klick -->

</script>

<nav>
 <div class="dropdown">
   <ul>
     <li><a href="#">home</a></li>
     <li><a href="#">profil</a></li>
     <li><a href="#">kontakt</a></li>
   </ul>
 </div>
 <div class="nav_bg">
   <div class="nav_bar"> <span></span> <span></span> <span></span> </div>
 </div>
</nav>

CSS:

Code:
.dropdown {
    display: none;
}
.dropdown ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: block;
}
.dropdown li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: inline-block;
  position: relative;
  font-size: 17px;
  color: #def1f0;
}

.dropdown li a {
  padding: 10px 15px;
  font-size: 17px;
  color: #def1f0;
  display: inline-block;
  outline: 0;
  font-weight: 400;
}


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

.dropdown {
 background: #fff;
 width: 200px;
 height: 272px;
 display: block;
 position: fixed;
 top: -1000px;
 left: 0px;
 transition: top 0.3s linear;
 margin: 0;
 border: 0;
 border-radius: 0;
 overflow-y: auto;
 overflow-x: hidden;
}

.dropdown.visible {
 top: 0px;
 transition: top 0.3s linear;
}

.nav_bg {
 display: inline-block;
 vertical-align: middle;
 width: 100%;
 height: 40px;
 margin: 0;
 position: absolute;
 top: 0px;
 left: 0px;
 background: #ffffff;
 padding: 12px 0 0 0px;
 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
 position: fixed; /* SR Menü scrollt mit */
}

.nav_bar {
 display: inline-block;
 vertical-align: middle;
 height: 50px;
 cursor: pointer;
 margin: 0;
}

.nav_bar span {
 height: 2px;
 background: #666666;
 margin: 5px;
 margin-left: 16px;
 display: block;
 width: 20px;
}

.nav_bar span:nth-child(2) { width: 20px; }

.nav_bar span:nth-child(3) { width: 20px; }

.dropdown ul { padding-top: 55px; }

.dropdown li { display: block; }

.dropdown li a {
 display: block;
 color: #666666;
 font-weight: 500;
}

.dropdown li:first-child:hover a { border-radius: 0; }


.dropdown li:hover a {
 background: #fff;
 color: #af922d !important;
}

}


Speziell das

Code:
{ $('.navigation').toggleClass('visible'); }

reicht nicht aus, wenn ich irgendwo auf der Seite klicke, denn natürlich klappt das Menü
dann bei einem Klick auch wieder auf.

Es wäre super wenn ihr mir helft.
Zitieren
#2
Leg doch mal einen https://jsfiddle.net/ an, dann kann man sich das anschauen.
Habs gerade auf die Schnelle selbst probiert, aber dein Code hat einige Syntax-Fehler.
Allround Webdesign Freelancer | Design, HTML5, CSS3, JS, PHP, mySQL
Zitieren
#3
(15.07.2016, 11:58)am_ schrieb: Leg doch mal einen https://jsfiddle.net/ an, dann kann man sich das anschauen.
Habs gerade auf die Schnelle selbst probiert, aber dein Code hat einige Syntax-Fehler.

Danke für den Tipp; hier könnt ihr es sehen:

https://jsfiddle.net/k71xh9zc/
Zitieren
#4
Naja logisch, du schreibst in den script, dass es bei click im document die klasse visible togglen soll.
Du willst aber, dass visible entfernt wird.
Also schreib doch dort removeClass("visible") statt toggleClass.

https://jsfiddle.net/k71xh9zc/1/

Was diese Abfrage bewirken soll, verstehe ich übrigens nicht Wink

Code:
if ($(event.target).closest('.nav_bar').length == 0)
Allround Webdesign Freelancer | Design, HTML5, CSS3, JS, PHP, mySQL
Zitieren
#5
(09.08.2016, 09:46)am_ schrieb: Naja logisch, du schreibst in den script, dass es bei click im document die klasse visible togglen soll.
Du willst aber, dass visible entfernt wird.
Also schreib doch dort removeClass("visible") statt toggleClass.

https://jsfiddle.net/k71xh9zc/1/

Was diese Abfrage bewirken soll, verstehe ich übrigens nicht Wink

Code:
if ($(event.target).closest('.nav_bar').length == 0)

Super! Vielen Dank Smile
Der Codeschnippsel ist die Abfrage für einen Klick abseits des eigentlichen Buttons, irgendwo im Fenster.
Der Buttonname ist in diesem Fall "nav_bar"
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste