Düğme, mobil menüyü göstermek için çalışmıyor

J-Query'u yeni öğrenmeye başladım ve web sayfama basit bir tıklama olayı uygulamaya çalışıyorum. Bu, bir düğmeyi tıkladığınızda mobil-nav'u açacaktır.Düğme, mobil menüyü göstermek için çalışmıyor

Bu düğme, üstbilgiyi seçtiğimde çalışır, örneğin üstbilgiyi gizler ancak mobil-nav göstermez?

p.s DICE anasayfasını telif hakkıyla korunan medya kullandığımı bildiğim kadarıyla öğrenmek istiyorum;).

CSS numaralı telefonumdaki mobil-nav'ı gizleyerek, J-query'un bunu gösterme/gösterme ile ilgili olabileceğini düşünüyorum.

@media screen and (max-width: 1024px) { 
 
    nav{ 
 
    justify-content: space-around;  
 
    } 
 
    
 
    .bars{ 
 
    display:block; 
 
    width: 50px; 
 
    height: 100px; 
 
    cursor: pointer; 
 
    } 
 
    
 
    
 
    ul{ 
 
    display: none !important;  
 
    } 
 
    
 
    
 
    .mobile-nav{ 
 
    display: none; 
 
    position:absolute; 
 
    z-index: 3; 
 
    left:-110px; 
 
    top:70px; 
 
    width: 100%; 
 
    height: 100%; 
 
    opacity: 0.8; 
 
    background-color:black; 
 
    } 
 
    
 
    .mobile-nav li{ 
 
    height: 50px;  
 
    } 
 
    
 
    .mobile-nav a{ 
 
    font-size: 2rem; 
 
    font-weight: 700; 
 
    } 
 
}

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
 
    
 
    <title>Dice</title> 
 
    <meta name="description" content=""> 
 
    <meta name="author" content=""> 
 
    
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    
 
    <link rel="stylesheet" href="style.css"> 
 
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"> 
 
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
 
    
 
    <script> 
 
    $(function(){ 
 
     
 
    $('.bars').on('click',function(){ 
 
     $('.mobile-nav').show(); 
 
    });      
 
         
 
         
 
    
 
         
 
         
 
    }); //End of code?// 
 
    
 
    
 
    </script> 
 
</head> 
 
<body> 
 
<header> 
 
    <nav> 
 
    <img src="dice-logotype-black.png"> 
 
    <button class="bars"> 
 
    <ul class="mobile-nav"> 
 
    <li><a href="#">ABOUT</a></li>  
 
    <li><a href="#">GAMES</a></li>  
 
    <li><a href="#">JOBS</a></li>  
 
    <li><a href="#">NEWS</a></li> 
 
    <li><a href="#">STORE</a></li>  
 
    </ul> 
 
    </button>  
 
    <ul> 
 
    <li><a href="#">ABOUT</a></li>  
 
    <li><a href="#">GAMES</a></li>  
 
    <li><a href="#">JOBS</a></li>  
 
    <li><a href="#">NEWS</a></li> 
 
    <li><a href="#">STORE</a></li>  
 
    </ul></nav> 
 
    </header> 
 
<div class="global-container">  
 
    <div class="video"><video src="dicemovie3-1.mp4" autoplay loop></video> 
 
<div class="text"><h1>We share the passion to create something extraordinary.</h1> 
 
<button>DISCOVER OUR CULTURE</button><button id="button-2">READ ABOUT OUR GAMES</button>  
 
     </div> 
 
    </div>  
 
</div> 
 
<div class="square-images"> 
 
<div class="square-1"></div>  
 
<div class="square-2"></div> 
 
<div class="square-3"></div>  
 
</div> 
 
<div class="about-dice-wrapper"><div><h2>MORE THAN COMPUTER SCREENS</h2> 
 
<p>DICE is the award-winning developer of the Battlefield franchise and games like Mirror’s Edge. 
 
We are situated in the world’s most picturesque cities, Stockholm, 
 
Sweden and in the vibrant city of Los Angeles, USA.</p> 
 
<button>About Dice</button></div></div>  
 
<div class="tweet-wrapper"><div> 
 
<img src="tweet.jpg-thumb"> 
 
<p>Meet DICE today! Head to Stockholm's Nationalmuseum at 18:00 & learn about character design: https://t.co/WGUbkFNjay https://t.co/0SrHr38HiH<br> @EA_DICE</p>  
 
    
 
    </div> 
 
    </div>  
 
</body> 
 
</html>

Umarım biri bana bu konuda bazı fikir verebilir.

kaynak

2015-12-14 Tom Noble

bu bağlamda set/saklanmadan kaçınmaya çalışın. ToggleClass ve css kullanarak menünüzü görünür hale getirin veya gizleyin –

Görüntülenecek css'yi değiştirmek için j-sorgusunu kullanmaya çalıştım: blok ama işe yaramadı. J-query :) ile çok yeşil olduğum için toggleClass içine bakmak zorunda kalacak :) –

aşağıdaki deneyin:

toggleClass kullanımı daha kullanışlı olmasına rağmen

$(".bars").click(function() { 
 
\t $(".mobile-nav").show(); 
 
});

.mobile-nav { 
 
    display: none; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="bars">Click me</button> 
 

 
    <ul class="mobile-nav"> 
 
    <li><a href="#">ABOUT</a></li>  
 
    <li><a href="#">GAMES</a></li>  
 
    <li><a href="#">JOBS</a></li>  
 
    <li><a href="#">NEWS</a></li> 
 
    <li><a href="#">STORE</a></li>  
 
    </ul>

\t $(".bars").click(function(event) { 
 
\t \t $(".mobile-nav").toggleClass('opened'); 
 
\t });

.mobile-nav { 
 
    display: none; 
 
} 
 

 
.opened { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button class="bars">Click to toggle</button> 
 

 
<ul class="mobile-nav"> 
 
    <li>Blabla</li> 
 
    <li>Blabla</li> 
 
    <li>Blabla</li> 
 
</ul>

kaynak

2015-12-14 18:44:25

Hala benim mobil-nav dışında sahip benim özgün denemem çalışmadı. Cevabınız için teşekkürler. –

Cevabı düzenledim. Şimdi kontrol et. –

Kodumda çalışacak örneklerden herhangi birini gösteremiyorum bile, örnek gösterisini yapıştırdım ve hala çalışmıyor mu? Ayrıca toggleclass için, html'mdeki herhangi bir şeye bağladım. Başka bir eleman seçersem buton çalışır mı? –

animasyonlu mobil navigasyon için solüsyon (bildiğim kadarıyla göre) en basit:

$(document).ready(function(){ 
 
    $('nav').hide(); 
 
    $('.show_nav').click(function(){ 
 
    $('nav').slideToggle('slow'); 
 
    }); 
 
});

 .show_nav { 
 
     padding: 1em 1.4em; 
 
     background: #ddd; } 
 

 
     nav { 
 
     background: #111; } 
 
     nav ul { 
 
      list-style: none; 
 
      padding: 0; 
 
      margin: 0; } 
 
      nav ul li { 
 
      color: #fff; 
 
      padding: 1em 1.4em; }

<!doctype html> 
 
    <html class="no-js" lang="en"> 
 
     <head> 
 
     <meta charset="utf-8" /> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
 
     <title>test</title> 
 
     <link rel="stylesheet" href="css/style.css" /> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
     </head> 
 
     <body> 
 
     <button class="show_nav">show nav</button> 
 
     <nav> 
 
      <ul> 
 
      <li>Hello world!</li> 
 
      <li>Hello world!</li> 
 
      <li>Hello world!</li> 
 
      <li>Hello world!</li> 
 
      <li>Hello world!</li> 
 
      <li>Hello world!</li> 
 
      <li>Hello world!</li> 
 
      </ul> 
 
     </nav> 
 

 
     </body> 
 
    </html>

istediğiniz gibi Açıkçası tarzı;)

kaynak

2016-07-01 21:43:26

Düğme, mobil menüyü göstermek için çalışmıyor

cevap

İlgili konular