Responsive açılır menü

10 yıl (209 mesaj)

Teğmen

Konu Sahibi

Arkadaşlar meraba aşağıda ki gibi bir responsive açılır menüm var fakat diğer açılır menüye tıklandığı zaman daha önce açılan menü var ise o menünün kapanıp tıkladığımının açılmasını sağlamak istiyorum bunu nasıl yapabilirim ?

JAVA KODLARI

<script>
$(document).ready(function() {
var menu = $(".menu");
$(window).resize(function(){
$(".menu-toggle").removeClass("active");
if($(window).innerWidth() > 600){
menu.show();
} else {
menu.hide();
}
});
$(".menu-toggle").click(function(){
$(this).toggleClass("active");
menu.slideToggle();
})
$(".open-submenu").click(function(){
$(this).toggleClass("active");
$(this).next("ul").slideToggle();
$(this).children(".arrow").toggleClass("down up");
});
});
</script>

HTML

<nav>
<div class="navbar clear">
<a href="" class="logo" ></a>
<div class="menu-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></div>
<div class="menu">
<ul>
<li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=121285781&url=" data-href="">menu 1</a></li>
<li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=121285781&url=" data-href="">menu 2</a></li>
<li>
<span class="open-submenu">menu 3 <span class="arrow down"></span></span>
<ul>
<li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=121285781&url=" data-href="">almenupont 1</a></li>
<li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=121285781&url=" data-href="">almenupont 2</a></li>
<li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=121285781&url=" data-href="">almenupont 3</a></li>
<li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=121285781&url=" data-href="">almenupont 4</a></li>
</ul>
</li>
<li>
<span class="open-submenu">menu 3 <span class="arrow down"></span></span>
<ul>
<li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=121285781&url=" data-href="">almenupont 1</a></li>
<li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=121285781&url=" data-href="">almenupont 2</a></li>
<li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=121285781&url=" data-href="">almenupont 3</a></li>
<li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=121285781&url=" data-href="">almenupont 4</a></li>
</ul>
</li>
<li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=121285781&url=" data-href="">menu 4</a></li>
</ul>
</div>
</div>
</nav>

D

DLI

10 yıl (1318 mesaj)

Yüzbaşı

 
  $(".open-submenu").click(function(){  
    if ($(this).hasClass('active')) { 
      // açık menüye tekrar tıklanırsa kapat 
      $(this).removeClass("active");  
      $(this).next("ul").slideUp();  
      $(this).children(".arrow").removeClass("up");  
    } else { 
       // açık menüyü kapat 
      $(this).closest('.menu').find('.open-submenu').removeClass("active");  
      $(this).closest('.menu').find('.open-submenu').next("ul").slideUp();  
      $(this).closest('.menu').find('.open-submenu').children(".arrow").removeClass("up");  
   
      $(this).toggleClass("active");  
      $(this).next("ul").slideDown();  
      $(this).children(".arrow").addClass("up");  
    } 
  });

Bu mesaja 1 cevap geldi.

C

Crosslan

10 yıl (209 mesaj)

Teğmen

Konu Sahibi

Sağol Kardeşim Müsait Olunca Hemen Deneyeceğim

< Bu mesaj bu kişi tarafından değiştirildi Crosslan -- 24 Ekim 2016; 13:47:21 >
Bu mesaja 1 cevap geldi.

C

Crosslan

10 yıl (209 mesaj)

Teğmen

Konu Sahibi

Kardeşim Denedim Dediğini fakat 1 kere tıklayınca açılıp kapanıyor açık sabit kalmıyor

D

DLI

10 yıl (1318 mesaj)

Yüzbaşı

alt menüleri öncelikle css ile gizlemen gerekiyor.

örneği inceleyebilirsin.

<!DOCTYPE html> 
 <html lang="en"> 
 <head> 
   <meta charset="UTF-8"> 
   <title>Document</title> 
 </head> 
 <style> 
   .menu ul li ul {display: none;} 
 </style> 
 <body> 
   <nav>  
     <div class="navbar clear">  
       <a href="" class="logo" ></a>  
       <div class="menu-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></div>  
       <div class="menu">  
         <ul>  
           <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=121354892&url=" data-href="">menu 1</a></li>  
           <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=121354892&url=" data-href="">menu 2</a></li>  
           <li>  
             <span class="open-submenu">menu 3 <span class="arrow down"></span></span>  
             <ul>  
               <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=121354892&url=" data-href="">almenupont 1</a></li>  
               <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=121354892&url=" data-href="">almenupont 2</a></li>  
               <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=121354892&url=" data-href="">almenupont 3</a></li>  
               <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=121354892&url=" data-href="">almenupont 4</a></li>  
             </ul>  
           </li>  
           <li>  
             <span class="open-submenu">menu 3 <span class="arrow down"></span></span>  
             <ul>  
               <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=121354892&url=" data-href="">almenupont 1</a></li>  
               <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=121354892&url=" data-href="">almenupont 2</a></li>  
               <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=121354892&url=" data-href="">almenupont 3</a></li>  
               <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=121354892&url=" data-href="">almenupont 4</a></li>  
             </ul>  
           </li>  
           <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=121354892&url=" data-href="">menu 4</a></li>  
         </ul>  
       </div>  
     </div>  
   </nav>  
   <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
   <script> 
     var menu = $(".menu");  
     $(window).resize(function(){  
       $(".menu-toggle").removeClass("active");  
       if($(window).innerWidth() > 600){  
         menu.show();  
       } else {  
         menu.hide();  
       }  
     });  
     $(".menu-toggle").click(function(){  
       $(this).toggleClass("active");  
       menu.slideToggle();  
     })  
     $(".open-submenu").click(function(){   
       if ($(this).hasClass('active')) {  
         // açık menüye tekrar tıklanırsa kapat  
         $(this).removeClass("active");   
         $(this).next("ul").slideUp();   
         $(this).children(".arrow").removeClass("up");   
       } else {  
          // açık menüyü kapat  
         $(this).closest('.menu').find('.open-submenu').removeClass("active");   
         $(this).closest('.menu').find('.open-submenu').next("ul").slideUp();   
         $(this).closest('.menu').find('.open-submenu').children(".arrow").removeClass("up");   
       
         $(this).toggleClass("active");   
         $(this).next("ul").slideDown();   
         $(this).children(".arrow").addClass("up");   
       }  
     });   
   </script> 
 </body> 
 </html>