बटन मोबाइल मेनू

मैं सिर्फ J-Query जानने के लिए शुरू कर दिया है दिखाने के लिए काम नहीं कर रहा और मैं अपने वेबपेज है, जो जब आप एक बटन पर क्लिक करें यह मोबाइल-एनएवी खुलेगा में एक साधारण क्लिक घटना को लागू करने की कोशिश कर रहा हूँ।बटन मोबाइल मेनू

यह बटन काम करता है जब मैं हैडर उदाहरण के लिए यह शीर्ष लेख छुपा देगा लेकिन अभ्यस्त मोबाइल-एनएवी दिखाने का चयन?

पी.एस मैं सिर्फ प्रयोजनों के सीखने के रूप में मैं जानता हूँ कि मैं कॉपीराइट मीडिया का उपयोग कर रहा के लिए पासा होमपेज को कॉपी कर रहा हूँ;)।

मुझे लगता है कि यह मेरे CSS में मोबाइल-एनवी छिपाने के साथ ऐसा करना पड़ सकता है, इसलिए J-query इसे टॉगल/दिखाएं।

@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>

उम्मीद है कि किसी ने मुझे इस समस्या के बारे में कुछ जानकारी दे सकते हैं।

स्रोत

2015-12-14 Tom Noble

इस संदर्भ में सेट शो/छुपाएं से बचने का प्रयास करें। टॉगल क्लास का उपयोग करें और सीएसएस द्वारा अपने मेनू को दृश्यमान या छुपाएं –

मैंने सीएसएस को प्रदर्शित करने के लिए जे-क्वेरी का उपयोग करने का प्रयास किया: ब्लॉक लेकिन यह काम नहीं किया। मुझे टॉगल क्लास में देखना होगा क्योंकि मैं जे-क्वेरी के साथ बहुत हरा हूं :) –

निम्नलिखित का प्रयास करें:

$(".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>

हालांकि toggleClass के उपयोग और अधिक उपयोगी हो जाएगा।

\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>

स्रोत

2015-12-14 18:44:25

क्षमा करें कि मेरा मूल प्रयास मोबाइल-एनवी के बाहर अभी भी काम नहीं करता है। उत्तर –

के लिए धन्यवाद मैंने जवाब संपादित किया है। अब यह जांच करें। –

मेरे कोड में काम करने के लिए उदाहरणों में से कोई भी नहीं मिल सकता है मैंने शो उदाहरण को भी चिपकाया है और यह अभी भी काम नहीं कर रहा है? टॉगलक्लास के लिए भी मुझे ऐसा लिंक करने की ज़रूरत है। मेरे एचटीएमएल में कुछ भी खोल दिया? यदि मैं कोई अन्य तत्व चुनता हूं तो बटन काम करता है? –

सबसे सरल (मेरी जानकारी के अनुसार) एनिमेटेड मोबाइल नेविगेशन के लिए समाधान:

$(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>

जाहिर शैली आप यह चाहते हैं;)

स्रोत

2016-07-01 21:43:26

बटन मोबाइल मेनू

उत्तर

संबंधित मुद्दे