छोटे स्क्रीन पर एक मेनू को ड्रॉप-डाउन सूची में बदलें

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

साइट को एक छोटे डिस्प्ले (फोन) पर देखते समय, ड्रॉप-डाउन मेनू पर क्लिक करने पर आपको मेनू आइटम का चयन करने के लिए एक इंटरफ़ेस दिखाई देगा, जहां प्रत्येक आइटम बड़ा और चयन करने में आसान है।



यह निस्संदेह फोन स्क्रीन पर एक छोटी सी लिंक पर अपनी उंगली पाने की कोशिश करने से आसान है। बेशक, इसलिए आपको एक के बजाय 2 बार स्क्रीन पर क्लिक करना होगा, लेकिन यह एक विवादास्पद दोष है, क्योंकि विपरीत स्थिति में आपको पहले पृष्ठ को बड़ा करना होगा, और उसके बाद ही लिंक पर क्लिक करना होगा।

एचटीएमएल

यहाँ पाँच सरल कदम वेबसाइट पर इस मेनू का लेआउट है:

<nav> <ul> <li><a href="/" class="active">Home</a></li> <li><a href="/collections/all">Books</a></li> <li><a href="/blogs/five-simple-steps-blog">Blog</a></li> <li><a href="/pages/about-us">About Us</a></li> <li><a href="/pages/support">Support</a></li> </ul> <select> <option value="" selected="selected">Select</option> <option value="/">Home</option> <option value="/collections/all">Books</option> <option value="/blogs/five-simple-steps-blog">Blog</option> <option value="/pages/about-us">About Us</option> <option value="/pages/support">Support</option> </select> </nav> 

सीएसएस

डिफ़ॉल्ट रूप से, हमें प्रदर्शन के साथ मेनू को छिपाना चाहिए : कोई नहीं; ।

 nav select { display: none; } 

फिर, मीडिया के प्रश्नों का उपयोग करके , हम स्क्रीन की चौड़ाई के आधार पर चुनिंदा तत्व की दृश्यता और नियमित मेनू को स्विच करेंगे।

 @media (max-width: 960px) { nav ul { display: none; } nav select { display: inline-block; } } 

JQuery का उपयोग करके मेनू आइटम सिंक करना

शायद आपका मेनू गतिशील रूप से बनाया गया है, शायद आप मैन्युअल रूप से एक मेनू बनाते हैं, लेकिन यह सुनिश्चित करने के लिए हमेशा उपयोगी होता है कि दोनों मेनू पर आइटम समान हैं। दोनों मेनू की एकरूपता प्राप्त करने के लिए, हम मूल मेनू के आधार पर ड्रॉप-डाउन मेनू के गतिशील निर्माण का उपयोग करेंगे।

यह निम्नलिखित jQuery कोड का उपयोग करके किया जा सकता है:

 //      $("<select />").appendTo("nav"); //   select   – « ...» $("<option />", { "selected": "selected", "value" : "", "text" : " ..." }).appendTo("nav select"); //          $("nav a").each(function() { var el = $(this); $("<option />", { "value" : el.attr("href"), "text" : el.text() }).appendTo("nav select"); }); 

और अंत में, ड्रॉपडाउन मेनू काम करने के लिए एक कोड:

 $("nav select").change(function() { window.location = $(this).find("option:selected").val(); }); 

डेमो देखें
उदाहरण डाउनलोड करें