बिग मेनू, स्माल स्क्रीन: रेस्पॉन्सिव, मल्टी लेवल नेवीगेशन

Hindi (हिंदी) translation by Ashish Rampal (you can also view the original English article)

यदि आपने कभी किसी रेस्पॉन्सिव वेबसाइट पर काम किया है, तो आपको इसमें कोई संदेह नहीं है कि इस उभरती हुई क्षेत्र में सबसे मुश्किल समस्याओं से निपटना होगा: नेविगेशन। साधारण नेविगेशन के लिए, समाधान सीधे-आगे हो सकते हैं। हालांकि, यदि आप कुछ नेस्टेड सूचियों और ड्रॉपडाउन के साथ थोड़ा और जटिल काम कर रहे हैं, तो एक अधिक नाटकीय पुनर्व्यवस्था क्रम में हो सकती है।

रेस्पॉन्सिव नेविगेशन के लिए इस दृष्टिकोण में, हम एक ऐसे दृष्टिकोण का उपयोग करने जा रहे हैं जो बड़े, बहु-स्तरीय नेविगेशन मेनू को मीडिया प्रश्नों और jQuery का उपयोग करते हुए समायोजित कर सकता है, जबकि हमारा मार्कअप सरल और हमारे बाह्य संसाधनों को न्यूनतम रखने की कोशिश कर रहा है।

लक्ष्य: रेस्पॉन्सिव ड्रॉपडाउन मेनू

यहां हम इसके लिए लक्ष्य कर रहे हैं:

बड़ी स्क्रीन पर, एक हॉरिजॉन्टल ड्रॉप-डाउन मेनू दिखाएं, जिसमें उप-मेन्यू के 2 स्तर हैं, जो तब दिखाई देते हैं जब पैरेंट एलिमेंट पर दिखाई देता है।
छोटी स्क्रीन पर, एक "menu" बटन जो हमारे मेनू को वर्टिकली दिखता है, उप-मेनू प्रदर्शित करता है जब मूल तत्व को क्लिक/स्पर्श किया जाता है।

Step 1: मार्कअप

हमारी मार्कअप सूची आइटमों में निहित नेस्टेड सूचियों के साथ काफी सीधे अनोर्ड सूची नहीं है। मैं जानबूझकर किसी भी तत्व या किसी भी तत्व पर ID या पैरेंट अनोर्ड सूची का उपयोग नहीं कर रहा हूं, ताकि मेनू CMS-जेनरेट मेनू से संगत हो सके।

<div class="container">
  
<a class="toggleMenu" href="#">Menu</a>
<ul class="nav">
	<li  class="test">
		<a href="#">Shoes</a>
		<ul>
			<li>
				<a href="#">Womens</a>
				<ul>
					<li><a href="#">Sandals</a></li>
					<li><a href="#">Sneakers</a></li>
					<li><a href="#">Wedges</a></li>
					<li><a href="#">Heels</a></li>
					<li><a href="#">Loafers</a></li>
					<li><a href="#">Flats</a></li>
				</ul>
			</li>
			<li>
				<a href="#">Mens</a>
				<ul>
					<li><a href="#">Loafers</a></li>
					<li><a href="#">Sneakers</a></li>
					<li><a href="#">Formal</a></li>
				</ul>
			</li>
		</ul>
	</li>

Step 2: बेसिक स्टाइलिंग

चलिए हमारी सूची को नेविगेशन बार की तरह देखने के लिए कुछ बहुत ही बुनियादी स्टाइल जोड़ते हैं:

body, nav, ul, li, a  {margin: 0; padding: 0;}
body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
a {text-decoration: none;}
.container {
    width: 90%;
    max-width: 900px;
    margin: 10px auto;
}
.toggleMenu {
    display:  none;
    background: #666;
    padding: 10px 15px;
    color: #fff;
}
.nav {
    list-style: none;
     *zoom: 1;
     background:#175e4c;
     position: relative;
}
.nav:before,
.nav:after {
    content: " "; 
    display: table; 
}
.nav:after {
    clear: both;
}
.nav ul {
    list-style: none;
    width: 9em;
}
.nav a {
    padding: 10px 15px;
    color:#fff;
    *zoom: 1;
}
.nav > li {
    float: left;
    border-top: 1px solid #104336;
    z-index: 200;
}
.nav > li > a {
    display: block;
}
.nav li ul {
    position: absolute;
    left: -9999px;
    z-index: 100;
}
.nav li li a {
    display: block;
    background: #1d7a62;
    position: relative;
    z-index:100;
    border-top: 1px solid #175e4c;
}
.nav li li li a {
    background:#249578;
    z-index:200;
    border-top: 1px solid #1d7a62;
}

हमने अपनी सूची वस्तुओं को एक हॉरिजॉन्टल रेखा में बस बनाया है, कुछ रंगों को सेट किया है और पूर्ण स्थिति का उपयोग करते हुए स्क्रीन से सबमेंउस छिपा दिया है। यदि आप लाइन 20 के बारे में सोच रहे हैं, तो यह एक सरल क्लेयरफॉक्स विधि है, जिसे मुझे इन प्रकार की स्थितियों में प्रभावी लगता है (Nicolas Gallagher's blog पर और पढ़ें)।

Step 3: क्षैतिज ड्रॉपडाउन मेनू

अगला, चलो हॉरिजॉन्टल ड्रॉपडाउन मेनू हो रहा है। हालांकि यह शुद्ध CSS के साथ किया जा सकता है :hover सूडो चयनकर्ता, मैं JavaScript का उपयोग करने में इसे जोड़ने के लिए जा रहा हूँ क्योंकि हम अपने छोटे-स्क्रीन संस्करण में क्लिक करने के लिए मेनू को स्विच करने जा रहे हैं।

चूंकि हम स्क्रीन पर अपने सबमेंउस को स्थानांतरित करने के लिए पूर्ण स्थिति का उपयोग कर रहे हैं, चलिए कुछ .hover जोड़ते हैं ऐसे नियम जो उनके पेरेंट्स के सापेक्ष सबमेंउस की स्थिति बनाएंगे, जब भी .hover class मौजूद है (जो कि हम jQuery का ध्यान रखेंगे)।

.nav li {
    position: relative;
}
.nav > li.hover > ul {
    left: 0;
}
.nav li li.hover ul {
    left: 100%;
    top: 0;
}

अब हम सरल jQuery की कुछ पंक्तियां जोड़ सकते हैं, जिसमें वे वर्ग के तत्वों को सूचीबद्ध करने के लिए।

$(document).ready(function() {
	$(".toggleMenu").css("display", "none");
	$(".nav li").hover(function() {
	 	$(this).addClass('hover');
	}, function() {
		$(this).removeClass('hover');
	});
});

और इसी तरह, हमारे पास एक कार्यात्मक, बहु-स्तरीय ड्रॉपडाउन मेनू है।

Step 4: वर्टीकल ड्रॉपडाउन मेनू

हमारा प्यारा हॉरिजॉन्टल ड्रॉपडाउन मेनू दुर्भाग्य से मोबाइल स्क्रीन पर बहुत छोटा दिखता है, इसलिए हम यह सुनिश्चित करें कि मोबाइल ब्राउज़र पूरी तरह ज़ूम-इन हो जाएंगे, जब वे व्यूपोर्ट मेटा टैग जोड़कर हमारे पृष्ठ को लोड करेंगे।

<meta name="viewport" content="width=device-width, initial-scale=1">

बेशक, अब हमारे ड्रॉपडाउन मेनू मोबाइल उपकरणों पर भी बुरा लग रहा है, और इसमें से अधिकांश स्क्रीन पर भी फिट नहीं है! चलो कुछ मीडिया प्रश्नों में अपनी सूची को अपने ब्रेकपॉइंट के नीचे एक वर्टीकल सूची में स्टाइल करने दें। हमारा ब्रेकपॉइंट उस बिंदु से निर्धारित होता है, जिस पर हमारे मेनू दो पंक्तियों पर टूट जाता है, मेरे मामले में, यह लगभग 800px है।

हमारे ब्रेकपॉइंट पर, हम फ्लोट निकाल देंगे और सूची आइटम और unordered सूचियों को width: 100% में सेट करेंगे। अभी, जब हम अपने पैरेंट के सामानों पर चलते हैं, तो उनके चाइल्ड की सूची उन वस्तुओं के शीर्ष पर प्रदर्शित होती है। हम बजाय अन्य शीर्ष-स्तरीय सूची आइटम विस्थापित हो जाते हैं। अतः unordered सूची की left स्थिति को बदलने के बजाय, हम सिर्फ position मान को static रूप में निर्धारित करेंगे।

@media screen and (max-width: 800px) {
    .nav > li {
        float: none;
    }
    .nav ul {
        display: block;
        width: 100%;
    }
   .nav > li.hover > ul , .nav li li.hover ul {
        position: static;
    }
}

Step 5: होवर को क्लिक करने के लिए परिवर्तित करें

चूंकि आप किसी टच स्क्रीन पर होवर नहीं कर सकते (फिर भी), हम विंडो की चौड़ाई की जांच के लिए कुछ सशर्त कोड बनाने जा रहे हैं, फिर click() और hover() ईवेंट सेट करने के लिए कोड लिखें।

$(document).ready(function() {
	var ww = document.body.clientWidth;
	if (ww < 800) {
		$(".toggleMenu").css("display", "inline-block");
		$(".nav li a").click(function() {
			$(this).parent("li").toggleClass('hover');
		});
	} else {
		$(".toggleMenu").css("display", "none");
		$(".nav li").hover(function() {
			$(this).addClass('hover');
		}, function() {
			$(this).removeClass('hover');
		});
	}
});

click ईवेंट के लिए, हमें सूची आइटम से मूल आइटम पर टार्गेटेड तत्व को बदलना पड़ता है, क्योंकि सूचियों को नेस्ट किया जाता है और एक सूची आइटम पर क्लिक करना उसके ग्रैंडचिल्ड्रेन भी खोल सकता है। इस परिवर्तन के साथ समस्या यह है कि एक एंकर टैग पर क्लिक करने से पृष्ठ पुनः लोड हो जाएगा, लेकिन हम सभी एंकर टैग पर डिफ़ॉल्ट व्यवहार को नहीं रोक सकते हैं, जो सूची आइटम के वंश हैं।

इसे ठीक करने के लिए, क्लास .parent को जोड़ने के लिए चलो jQuery का एक छोटा बिट जोड़ते हैं किसी भी सूची आइटम के लिए चाइल्ड जिनके सिब्लिंग्स हैं, तो केवल इन एंकर को लक्षित करें (फिर से, हमारे मार्कअप लचीला रखने की कोशिश कर रहे हैं)।

$(".nav li a").each(function() {
		if ($(this).next().length > 0) {
			$(this).addClass("parent");
		};
	})
	if (ww < 800) {
		$(".toggleMenu").css("display", "inline-block");
		$(".nav li a.parent").click(function(e) {
			e.preventDefault();
		 	$(this).parent("li").toggleClass('hover');
		});
	} else {
... }

Step 6: मेनू टॉगल करें

हमारे मेनू अब मोबाइल उपकरणों पर बहुत अच्छा दिखता है, लेकिन यह काफी मूल्यवान स्क्रीन अचल संपत्ति ले रहा है। एक लोकप्रिय नया दृष्टिकोण एक बटन का उपयोग करके नेविगेशन सूची को टॉगल करने के लिए किया गया है, आमतौर पर शब्द "Menu" या मेनू आइकन के साथ। चलो हमारे टॉगल लिंक को हमारी नेविगेशन सूची को केवल तभी क्लिक करने के लिए काम करते हैं।

$(".toggleMenu").click(function(e) {
	e.preventDefault();
	$(".nav").toggle();
});

if (ww < 800) {
	$(".toggleMenu").css("display", "inline-block");
	$(".nav").hide();
} else {
	...
}

Step 7: एक बिट अधिक स्टाइल

चूंकि हमारे पास अब class के साथ लक्षित हमारी पैरेंट सूची आइटम हैं, इसलिए हमारे उपयोगकर्ताओं को पता करने के लिए कि नीचे कौन सी सूची आइटम हैं चिल्ड्रन थोड़ा नीचे एरो नहीं जोड़ते हैं?

.nav > li > .parent {
    background-position: 95% 50%;
}
.nav li li .parent {
    background-image: url("images/downArrow.png");
    background-repeat: no-repeat;
    background-position: 95% 50%;
}
@media screen and (max-width: 800px) {
 .nav > li > .parent {
        background-position: 95% 50%;
    }
    .nav li li .parent {
        background-image: url("images/downArrow.png");
        background-repeat: no-repeat;
        background-position: 95% 50%;
    }
}

बोनस: दिखा रहा है

अब, व्यावहारिक उद्देश्यों के लिए, यह मेनू बहुत अच्छी तरह से काम करता है। यदि आप इसे किसी मोबाइल ब्राउज़र में खोलते हैं, तो आपको एक बहुत ही उपयोगी वर्टीकल एम्परेन्स सूची मिलेगी, यदि आप इसे अपने डेस्कटॉप ब्राउज़र में खोलते हैं, तो आपको एक अच्छी हॉरिजॉन्टल ड्रॉप-डाउन सूची मिलेगी। यदि आप अपने डेस्कटॉप ब्राउज़र को मोबाइल चौड़ाई तक बदलते हैं, हालांकि, हमारा नेविगेशन अभी भी होवर पर काम करता है, और मेनू टॉगल सुविधा से छिपा नहीं है। अधिकांश अनुप्रयोगों के लिए, यह ठीक है। सब के बाद, आपका औसत वेब साइट आगंतुक अपने ब्राउज़र के किनारे पर कब्जा नहीं करता है और पागलपन को आगे पीछे खींचने शुरू करता है।

हालांकि, यदि आप अपने साथी वेब पेशेवरों को प्रभावित करने के लिए देख रहे हैं, यह सिर्फ ऐसा नहीं करेगा। हमें resize इवेंट पर प्रतिक्रिया देने के लिए हमारी स्क्रिप्ट सेट अप करना होगा, और हमारे सशर्त कोड को निष्पादित करना होगा जब ब्राउज़र को ब्रेकपॉइंट के नीचे बदल दिया जाता है। मोबाइल-फर्स्ट रेस्पॉन्सिव डिजाइन ट्यूटोरियल को उत्कृष्ट बनाने में कोड का विस्तार करना, हम अपने ब्राउजर की चौड़ाई का ट्रैक रखने और अपडेट करने के लिए कुछ वैरिएबल सेट करने जा रहे हैं।

Step 8: विंडो ईवेंट

चूंकि हम ब्राउज़र की चौड़ाई दोनों पृष्ठ लोड पर देखना चाहते हैं और जब ब्राउज़र को पुनःआकार दिया जाता है, तो सभी सशर्त कोड को $(document) .ready() ईवेंट से बाहर ले जाने से शुरू करें और फ़ंक्शन adjustMenu में इसे लपेटकर।

var ww = document.body.clientWidth;
$(document).ready(function() {
	$(".toggleMenu").click(function(e) {
		e.preventDefault();
		$(".nav").toggle();
	});
	$(".nav li a").each(function() {
		if ($(this).next().length > 0) {
			$(this).addClass("parent");
		};
	})
	adjustMenu();
});
function adjustMenu() {
	if (ww < 800) {
		$(".toggleMenu").css("display", "inline-block");
		$(".nav").hide();
		$(".nav li a.parent").click(function(e) {
			e.preventDefault();
		 	$(this).parent("li").toggleClass('hover');
		});
	} else {
		$(".toggleMenu").css("display", "none");
		$(".nav li").hover(function() {
		 		$(this).addClass('hover');
			}, function() {
				$(this).removeClass('hover');
		});
	}
}

फ़ंक्शन को कॉल करने के लिए ब्राउज़र के रूप में पुनः आकार दिया गया है, हम इसे खिड़की की घटनाओं को resize और orientationchange के लिए bind करने जा रहे हैं। इस घटना के अंदर हम ब्राउज़र की नई चौड़ाई को समायोजित करने के लिए ww चर को फिर से परिभाषित करने जा रहे हैं।

$(window).bind('resize orientationchange', function() {
	ww = document.body.clientWidth;
	adjustMenu();
});

इस बिंदु पर, हमने और समस्याएं पेश की हैं: हालांकि यह शुरू में काम करने के लिए प्रतीत होता है (हॉरिजॉन्टल मेनू को खोलने वाले "menu" बटन में गिर जाता है), यह स्पष्ट रूप से स्पष्ट है कि हमारे पास दो बड़े मुद्दे हैं:

पूरे मेनू गायब हो जाते है यदि हम ब्रेक पॉइंट से पहले मोबाइल-चौड़ाई वाली विंडो का आकार बदलते हैं।
होवर घटना अभी भी मोबाइल संस्करण पर गोलीबारी है।

Step 9: दिखाना और छिपाना

हमारा लापता नेविगेशन मेनू एक आसान सुधार की तरह लगता है: बस $("nav").show() जोड़ें। अधिक-ब्रेकपॉइंट स्थिति के तहत। यह समाधान काम करने लगता है, लेकिन कुछ मुश्किल बढ़त मामलों को लाता है। क्योंकि जब भी ब्राउज़र का आकार बदल जाता है हर बार कोड का पुनः मूल्यांकन किया जाता है, जब भी हम मेनू खोलते हैं, तो यह स्वचालित रूप से फिर से बंद हो जाता है।

यह एक अप्रत्याशित बढ़त के मामले की तरह लग सकता है, लेकिन मोबाइल ब्राउज़र अजीब हैं: उदाहरण के लिए, मेरे गैलेक्सी S पर, नीचे स्क्रॉल करना, फिर पृष्ठ के शीर्ष तक बैक अप resize ईवेंट ट्रिगर करता है। अच्छा नही!

इसे ठीक करने के लिए, हमें मेनू टॉगल को क्लिक किया गया है या नहीं, यह जांचने का कुछ तरीका होना चाहिए। मैं मेनू पर एक अतिरिक्त class का उपयोग करने वाला बटन टॉगल करता हूं, क्योंकि यह स्टाइल के लिए आसान हो सकता है (शायद हम नीचे की रेखा के नीचे एक एरो चाहते हैं?) नेविगेशन मेनू के प्रदर्शन को टॉगल करने के अलावा, मेनू टॉगल बटन अब अपने स्वयं के class को .active कर देगा। एक्टिव हमारे संकीर्ण-से-ब्रेकपॉइंट हालत में वापस आइए, कोड को अपडेट करें, केवल हमारे नेविगेशन मेनू को छिपाने के लिए, यदि मेन्यू टॉगल does not class .active नहीं है।

$(document).ready(function() {
	$(".toggleMenu").click(function(e) {
		e.preventDefault();
		$(this).toggleClass("active");
		$(".nav").toggle();
	});
});
	if (ww < 800) {
		$(".toggleMenu").css("display", "inline-block");
		if (!$(".toggleMenu").hasClass("active")) {
			$(".nav").hide();
		} else {
			$(".nav").show();
		}
		$(".nav li a.parent").click(function(e) {
			e.preventDefault();
		 	$(this).parent("li").toggleClass('hover');
		});
	} ...

Step 10 अनबन्डिंग हॉवर ईवेंट

मंडराने वाली घटनाओं के लिए मोबाइल-आकार की नेविगेशन मेनू की हमारी समस्या को हल करने के लिए, हमें हमारे सूची आइटम से हॉवर ईवेंट को unbind() से-ब्रेकपॉइंट हालत में बांटना होगा।

$(".nav li").unbind('mouseenter mouseleave');

हालांकि, यह एक नई समस्या को उजागर करती है: यदि आप ब्राउज़र को बड़े से छोटे आकार में बदलते हैं तो हमारे click ईवेंट काम नहीं करते हैं। कुछ डीबगिंग से पता चलता है कि click ईवेंट लिंक के एक गुच्छा के लिए बाध्य है, इसलिए जैसे ही हम क्लिक करते हैं, फिर भी .hover class पर टॉगल किया जाता है और फिर तुरंत बंद हो जाता है। यह इसलिए होता है क्योंकि पूरे फ़ंक्शन बार-बार आग लगती है क्योंकि आप विंडो का आकार बदल रहे हैं। यह सुनिश्चित करने के लिए कि हम सही जगह से चक्कर लगाते हैं, हमें फिर से इसे unbind करने से पहले क्लिक ईवेंट को बंद करना होगा।

एक बार जब हम छोटे से बड़े ब्राउज़र का आकार बदल लेते हैं, फिर भी, हम अब अपनी मंडराने वाली घटना .hover को याद कर रहे हैं, क्योंकि हम इसे अनबाउंड कर रहे थे जब ब्राउज़र छोटा था, और हमारी click इवेंट तब भी मौजूद है, तो हम अपने हॉवर स्टेटमेंट को बाध्य करने से पहले अनबाइंड करें। हम किसी class की किसी भी सूची आइटम को हटाने के लिए भी जा रहे हैं। इससे पहले कि हम .hover वाले ईवेंट पर उन्हें वापस जोड़ दें, मेनू से बार-बार खुले रहने से रोकने के लिए जैसे ही हम ब्राउज़र को व्यापक बनाते हैं।

मैं .click() फिर से लिख रहा हूं और .hover() events .bind() का उपयोग करते हुए स्पष्टता के लिए। इसका मतलब एक ही सटीक चीज़ है।

if (ww < 800) {
	$(".toggleMenu").css("display", "inline-block");
	if (!$(".toggleMenu").hasClass("active")) {
		$(".nav").hide();
	} else {
		$(".nav").show();
	}
	$(".nav li").unbind('mouseenter mouseleave');
	$(".nav li a.parent").unbind("click").bind("click", function(e){
		e.preventDefault();
	 	$(this).parent("li").toggleClass('hover');
	});
} else {
	$(".toggleMenu").css("display", "none");
	$(".nav").show();
            $(".nav li").removeClass("hover");
	$(".nav li a").unbind("click");
	$(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
		$(this).toggleClass('hover');
	});
}

हुर्रे! ऐसा लगता है कि यह सभी के लिए काम करना चाहिए।

Step 11: IE से बचें

यह एक पार्टी नहीं होगी अगर IE7 क्रैश करने के साथ नहीं आया, अब क्या होगा? हमें एक अजीब बग मिला है जहां हमारे उप-मेन्यू गायब हो जाते हैं, जब वे अन्य सामग्री पर प्रदर्शित होते हैं (हमारे उदाहरण में, कुछ लॉरेम इप्सम टेक्स्ट)। एक बार कर्सर पैराग्राफ तत्व तक पहुंच जाता है, *poof* नहीं मेनू। मैं निश्चित रूप से यह निश्चित है कि जिस तरह से IE7 hasLayout से position: relative;, और इस समस्या को आसानी से हल किया जा सकता है .nav a एलिमेंट।

.nav a {
    *zoom: 1;
}

आगे के विचार

हमेशा की तरह, आपको ब्राउज़र और फीचर समर्थन के बारे में अपना स्वयं का फैसला करना पड़ता है, लेकिन आधुनिक उपकरण जैसे Modernizr और respond.js के पुराने ब्राउज़रों को समर्थन देने से कुछ दर्द निकाल लेते हैं।

मैंने इस मेनू को मोबाइल सफारी पर और हर एंड्रॉइड 2.3 ब्राउज़र पर अपने हाथों से परीक्षण किया है, और यह काफी अच्छा काम करता है। हालांकि, यह तकनीक बहुत JavaScript निर्भर है, और क्योंकि कुछ मोबाइल ब्राउज़र (ब्लैकबेरी आमतौर पर) के पास JavaScript के लिए बहुत खराब समर्थन है, इसलिए हम कुछ उपयोगकर्ताओं को असामान्य नेविगेशन मेनू से छोड़ सकते हैं।

सौभाग्य से, आप कई तरीकों से JavaScript-less डिवाइसेज़ पर सरलीकृत लेआउट्स देने के लिए उपयोग कर सकते हैं। body टैग को .no-js class को जोड़ना और इसे अपने JavaScript में हटाने का अच्छा जुनूनी तकनीक मन में आता है, लेकिन आप केवल शीर्ष-स्तरीय नेविगेशन आइटम्स के लिए href ऐट्रिब्यूट्स प्रदान कर सकते हैं, उपयोगकर्ताओं को सामान्य "shoes "उदाहरण के लिए श्रेणी प्रविष्टि, और JavaScriptDisabled डिवाइसों में इस व्यवहार को रोकने के लिए preventDefault पर निर्भर।

बेशक मीडिया के प्रश्न IE के पुराने संस्करणों में काम नहीं करेंगे, इसलिए आपको यह फैसला करना होगा कि क्या यह पॉलीफ़िल सहित मूल्य है, जैसे कि इस अंतर को भरने के लिए response.js।

अंतिम लेकिन कम से कम नहीं, वहाँ है कि pesky iOS बग जो ज़ूम स्तर को बदलने के लिए होता है जब आप डिवाइस को घुमाएंगे। इस बग को स्क्वैश करने के लिए iOS Orientationchange Fix script को देखें।

आगे की पढाई

यद्यपि यह तकनीक कुछ स्थितियों और मेनू संरचनाओं के लिए अच्छी तरह से अनुकूल हो सकती है, फिर भी मोबाइल उपकरणों पर टेशनिंग नेविगेशन के लिए बहुत सारे अन्य विकल्प मौजूद हैं। उदाहरण के लिए:

सिंगल-स्तरीय नेविगेशन मेनू के लिए एक चतुर समाधान के लिए Ryan DeBeasi's recent tutorial।
ब्राड फ्रॉस्ट के राउंडअप के माध्यम से Responsive Navigation Patterns ब्राउज़ करें..
..and Complex Navigation Patterns for Responsive Design.
मोबाइल-पहले समाधान के लिए, HTML5 Rock's Creating a Mobile-First Responsive Design में नेविगेशन मेनू पर एक नज़र डालें।

GitHub repo को सुधारा, क्लोन या कांटा करने के लिए बेझिझक, और पढ़ने के लिए धन्यवाद!