ठीक है, इसलिए मैं अपनी वेबसाइट के लिए एक उत्तरदायी नेविगेशन मेनू बनाने की कोशिश कर रहा हूं। मुझे वर्तमान में इस डांग फ्लोट संपत्ति को काम करने में परेशानी हो रही है। इसलिए मैंने https://www.w3schools.com/ का एक संयोजन और एक YouTube ट्यूटोरियल लिया है। एक वेबसाइट बनाएं जिसकी मैं कल्पना करता हूं।
यहाँ मुझे अब तक क्या मिला है (मेरे कोड का लिंक नीचे JS Fiddle के हाइपरलिंक में है)
https://jsfiddle.net/dcannon96/e9mgsLqd/
इसलिए यदि आप वास्तव में मीडिया और स्क्रीन अनुभाग के अंतर्गत लेबल विशेषता देखते हैं जहां पिक्सेल के लिए अधिकतम-चौड़ाई शुरू होती है।
मेरे CSS. . के इस भाग पर एक नज़र डालें
label {
display: block;
cursor: pointer;
/* float: right; */
}
मेरा लक्ष्य मोबाइल/टैबलेट के रूप में हैमबर्गर आइकन के नीचे मेरा शीर्ष नेविगेशन बार मेनू दिखाना है। डेस्कटॉप मोड में होने पर, मेरी मेनू सूची स्क्रीन के बाईं ओर होती है, लेकिन जब मैं मोबाइल में होता हूं, तो फ़्लोट दाएं नहीं शेष आइटम को शीर्ष नेविगेशन बार के नीचे लाता है।
मैं यही करने की कोशिश कर रहा हूं https://youtu.be/xMTs8tAapnQ?t=611 (वीडियो 10 मिनट और 11 सेकंड में स्किप हो जाता है)
तो आप देख सकते हैं कि मैं किस बारे में बात कर रहा हूं एक बार जब आप फ्लोट से /**/ टिप्पणी हटा दें और अलग-अलग परिणाम देखें।
2 जवाब
आपको मेनू में overflow:hidden जोड़ना होगा ताकि शीर्ष नेविगेशन बार मेनू हैमबर्गर आइकन के नीचे दिखाई दे इसे देखें https://jsfiddle.net/dow2qLck/1/
.menu {
overflow:hidden;
text-align: center;
width: 100%;
display: none;
}
नमस्ते मैंने .label की float:right संपत्ति को असम्बद्ध किया और इसे दाईं ओर संरेखित किया गया .. आशा है कि आप यही खोज रहे हैं। धन्यवाद
नीचे दिए गए लिंक पर जाएं https://jsfiddle.net/dow2qLck/1/777