Dur JQUERY komut ekran boyutu ise en fazla

Question

en kısa sürede fare bırakır gibi menü bu akordeon yapmak jQuery komut dosyası neden olur, elementler dissapear bar göreceksiniz www.biblio-tech.nl web siteme bir göz atacak olursak Mobil versiyon için navigasyon.

Böylece mobil için pencereyi yeniden boyutlandırmak zaman/tablet

<div class="navbar"> 
<a id="nav-toggle"><span></span></a> 
<div class="navwrapper"> 
      <div id="dropMenu"> 
      <ul class="level1-menu"> 
       <li><a href="#">3d printing</a> 

       <ul class="level2-menu" id="1"> 
        <li><a href="3d.html">blueprints</a> 
        <ul class="level3-menu"> 
         <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu. Pellen\</li> 
        </ul> 
        </li> 
         <li><a href="3d.html">information</a> 
         <ul class="level3-menu"> 
          <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu. Pellen\</li> 
         </ul> 
         </li> 
         <li><a href="3d.html">software</a> 
          <ul class="level3-menu"> 
           <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu. Pellen\</li> 
          </ul> 
          </li> 
       </ul> 

       </li> 

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

       <ul class="level2-menu" id="2"> 
        <li><a href="3d.html">hardware</a> 
        <ul class="level3-menu"> 
         <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu. Pellen\</li> 
        </ul> 
        </li> 
         <li><a href="3d.html">information</a> 
         <ul class="level3-menu"> 
          <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu. Pellen\</li> 
         </ul> 
         </li> 
         <li><a href="3d.html">software</a> 
          <ul class="level3-menu"> 
           <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu. Pellen\</li> 
          </ul> 
          </li> 
       </ul> 

       </li> 

       </li> 
       <li><a href="#">visuals</a></li> 
      </ul> 
       </div> 


</div> 
</div> 

@media screen and (min-width: 280px) and (max-width: 900px){ 

.navwrapper{ 
position: relative; 
top: 19%; 
right: 0; 
width: 100%; 
} 


.navbar { 
    position: fixed; 
    height: 3em; 
    width: 100%; 
    background-color: rgba(0,0,0,0.5); 
} 
#nav-toggle { 
    position: absolute; 
    right: 10px; 
    top: 25%; 
    cursor: pointer; 
    padding: 10px 35px 16px 0px; 
} 

#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { 
    cursor: pointer; 
    border-radius: 1px; 
    height: 3px; 
    width: 35px; 
    background: rgba(254,254,254,0.9); 
    position: absolute; 
    display: block; 
    content: ''; 
    opacity: 0.9; 
} 

#nav-toggle span:before { 
    top: -10px; 
} 

#nav-toggle span:after { 
    bottom: -10px; 
} 
#dropMenu{ 
display: none; 
position: relative; 
width: 60%; 
background-color: rgba(0,0,0,0.5); 
top: 100%; 
right: -20%; 
padding: 0; 
transition-property: all; 
transition-duration: .5s; 
transition-timing-function: cubic-bezier(0, 1, 0.5, 1); 
border-radius: 0 0 0 10px; 
} 

#dropMenu li{ 
    list-style-type : none; 
} 
#dropMenu ul{ 
    padding : 5px; 
} 

#dropMenu ul li{ 
    border-bottom: 1px solid rgba(254,254,254,0.1); 
} 

#dropMenu ul ul li{ 
    font-size: 80%; 
    opacity: 0.8; 
} 

#dropMenu ul ul li:last-child{ 
    border-bottom: none; 
} 

#dropMenu ul ul li:first-child{ 
    border-top: 1px solid rgba(254,254,254,0.1); 
} 

ul.level1-menu li a { 
    text-decoration: none; 
    color: rgba(254,254,254,1); 
    font-weight: 100; 
    font-size: 160%; 
} 

.level2-menu,.level3-menu{ 
    display : none; 
} 
} 

Yukarıdaki HTML .. navigasyon yeniden boyutlandırmak en kısa sürede tamam, gitti olduğu mobil cihazlar için olan genişliği/tablet

@media screen and (min-width: 900px) and (max-width: 1600px){ 
.navbar { 
width: 100%; 
height: 4.5em; 
font-weight: 100; 
position: fixed; 
background-color: rgba(0,0,0,0.5); 
z-index: 100; 
} 

    .navwrapper { 
width: 100%; 
height: 4.5em; 
position: absolute; 
z-index: 100; 
left: 5%; 
} 

    .navbar ul { 
    position: relative; 
    display: inline-block ; 
    list-style: none; 
    font-size: 210%; 
    } 

    .navbar ul li { 
    display: inline-table; 
    width: 4.9em; 
    height: 1.7em; 
    margin: 15px 30px; 
    color: rgba(254,254,254,0.8); 
    } 

    .navbar ul ul { 
    position: absolute; 
    display: none; 
    font-size: 80%; 
    top: 83%; 
    width: 60%; 
    } 

    .navbar ul li:hover ul { 
    display: block; 
    } 

    .navbar ul ul li { 
    position: relative ; 
    min-width: 60%; 
    height: 1%; 
    margin: 0 0; 
    background: rgba(0,0,0,0.5); 
    letter-spacing: 1px; 
    text-indent: 10px; 
    } 

    .navbar ul ul li:hover { 
    background-color: rgba(0,0,0,0.7) 
    } 

    .navbar ul li a { 
    display: block; 
    text-decoration: none; 
    color: rgba(254,254,254,0.8); 
    } 

    .navbar ul li a:hover { 
    opacity: 1; 
    } 


    .navbar ul ul ul { 
    position: absolute; 
    left: 100%; 
    top: 0; 
    color: white; 
    width: 120%; 
    font-size: 60%; 
    letter-spacing: 1px; 
    } 

    .navbar ul ul ul li { 
    display: none; 
    padding: 5px; 
    text-indent: 0px; 
    border-radius: 0px 15px 15px 15px; 
    background-color: rgba(0,0,0,0.7); 
    } 


    .navbar ul ul li:hover > ul li { 
    display: block; 
    } 

    li:last-child { 
    border-radius: 0px 0px 10px 10px; 
    } 

    li:last-child:hover { 
    border-radius: 0px 0px 0px 10px; 
    } 
    } 

Bu masaüstü

içindir 0

$(document).ready(function(){ 
    $("#nav-toggle").click(function(){ 
    event.preventDefault(); 
     $("#dropMenu").slideToggle(1); 
    }); 

     $(".level1-menu > li > a").click(function(){    
     event.preventDefault(); 
      $(this).siblings(".level2-menu").slideToggle(".level2-menu"); 
     }); 


      $("#dropMenu").mouseleave(function(){ 
      event.preventDefault(); 
       $("#dropMenu, .level2-menu").slideUp(1); 
      }); 
}); 

Ekran boyutunun 1300 pikselden daha az olması durumunda, komut dosyasının yalnızca yükleneceği bir yol olup olmadığını merak ediyordum;

Veya bunun olmasını önlemek için bir başka yol, sana içine katmaya benim kod daha gerekiyorsa! peşin

teşekkürler zaman için bana yardımcı yatırım yaptı.

Samimi selam,

Raymond Çekiç

Answer 1

if (başka ne koşul 1300 & & screenWidth <) {}

$(document).ready(function(){ 
$("#nav-toggle").click(function(){ 
event.preventDefault(); 
    $("#dropMenu").slideToggle(1); 
}); 

    $(".level1-menu > li > a").click(function(){    
    event.preventDefault(); 
     $(this).siblings(".level2-menu").slideToggle(".level2-menu"); 
    }); 


     $("#dropMenu").mouseleave(function() 
                         { 
     event.preventDefault(); 
     if (screenWidth < 1000){ 
      $("#dropMenu, .level2-menu").slideUp(1);} 
     }); 

}); kaleme

Bağlantı: http://codepen.io/damianocel/pen/qZPLGQ

Answer 2

jQuery kullandığınız için, sizin boyutunu yöntemini kullanabilirsiniz.

$(window).resize(function() { 
if($(window).width() <= 500){ // example 
    //do stuff here 
} 
});