उत्तरदायी मेनू मुद्दों

Question

(प्रथम मैं माफी मांगने की अगर मेरी अंग्रेजी कभी कभी बुरा है चाहते हैं, मैं फ्रेंच हूँ, तो यह थोड़े मुश्किल है विवरण में सब कुछ समझाने के लिए)

मैं एक निजी वेबसाइट पर काम कर रहा हूँ, लेकिन मुझे अपने उत्तरदायी नेविगेशन के साथ एक समस्या मिली।

मैंने 1024px के तहत स्क्रीन आकार के लिए मीडिया क्वेरी बनाई है।

जब मैं 1024px से ऊपर हूं, तो मेरी सूची में नियमित रूप से नेविगेशन बार है। जब मैं 1024px से कम हूं, तो मुझे दिखाई देने वाला छोटा मेनू लोगो मिल गया है, और उस पर एक क्लिक ईवेंट पूरे मेनू को प्रकट और गायब कर देता है।

लेकिन समस्या यह है कि यदि मेरा मेनू बंद है और मैं अपनी खिड़की को 1024 पिक्सेल से ऊपर विस्तारित करता हूं, तो सूची दिखाई नहीं दे रही है, और मुझे नहीं पता कि उस समस्या से निपटने के लिए कैसे।

 <nav class="fixed_nav"> 
     <div id="nav_left"> 
      <img id="logo_nav" src="img/mini_trombi.png" alt="logo"/> 
      <p id="txt_nav">123</p> 
     </div> 
     <ul class="topnav"> 
      <div id="show_n_hide_nav" class="responsive_link_bg"> 
       <li><a id="top_nav_link" class="nav_links" href="#">ITEM 1</a></li> 
       <hr class="responsive_separator"> 
       <li><a class="nav_links" href="#">ITEM 2</a></li> 
       <hr class="responsive_separator"> 
       <li><a class="nav_links" href="#">ITEM 3</a></li> 
      </div> 
      <li class="icon"> 
       <a div id="button_nav" class="menu_icon" href="javascript:void(0);">&#9776;</a> 
      </li> 
     </ul> 
    </nav> 

क्लिक के लिए Jquery:

यहाँ मेरी कोड है

$(function(){ 
    $("#button_nav").click(function() { 
     if(!$("#show_n_hide_nav").is(":visible")){ 
      $("#show_n_hide_nav").slideDown("slow"); 
     } else { 
      $("#show_n_hide_nav").slideUp("slow"); 
     } 
    }); 
}); 

मेरी सीएसएस में, मैं 1024 पिक्सल के तहत मूल सूची छुपाने के लिए, और jQuery जब की मदद से यह दिखाने उपयोगकर्ता मेनू लोगो पर क्लिक करता है।

फिर, क्षमा करें अगर इसे समझना मुश्किल है।

Answer 1

के बाद आप अमान्य HTML का समाधान, तो आप इस कोशिश कर सकते हैं इनलाइन शैली के साथ छिपा हुआ:

<li id="show_n_hide_nav" class="responsive_link_bg" style="display: none;"> 

आप इसे तत्व मजबूर करने के लिए इस mediaquerie जोड़ने हल कर सकते हैं ब्लॉक 1024 से अधिक:

@media (min-width:1025px) { 
    #show_n_hide_nav { 
    display: block !important; 
    } 
} 

Check this example Fiddle

Answer 2

आप कक्षा को टॉगल करते हैं और स्लाइड प्रभाव करने के लिए सीएसएस संक्रमण जोड़ते हैं और यदि आप 1024 से ऊपर हैं, तो बस show कक्षा को अनदेखा करें।

$("#button_nav").click(function() { 
    $("#show_n_hide_nav").toggleClass("show"); 
}); 

आप अभी भी slideDown()/slideUp() का उपयोग करना चाहते हैं, तो आप $(window).resize() घटना बाँध और जाँच करें कि क्या खिड़की से ऊपर है/1024px गुणा के तहत किया है। तो

समस्या Jquery से slideUp/Down समारोह है तत्व में ही करने के लिए इनलाइन display संपत्ति सेट, जब आप slideUp और ब्राउज़र तत्व अब भी है आकार परिवर्तन:

Answer 3

$(function(){ 
    $("#button_nav").click(function() { 
     if(!$("#show_n_hide_nav").is(":visible")){ 
      $("#show_n_hide_nav").slideDown("slow"); 
     } else { 
      $("#show_n_hide_nav").slideUp("slow"); 
     } 
    }); 
}); 
$(window).resize(function(){ 
    if($(window).width() > 1024){ 
     $("#show_n_hide_nav").show(); 
    } 
}); 

विंडो पर आकार परिवर्तन आप विंडो का आकार की जाँच करें और एनएवी दिखाने के लिए।