ट्विटर बूटस्ट्रैप में होवर-सक्रिय ड्रॉपडाउन मेनू

कई उपयोगकर्ता अपने बूटस्ट्रैप मेनू को होवर करने पर ड्रॉप डाउन करना पसंद करते हैं, जिससे स्पष्ट क्लिक की आवश्यकता समाप्त हो जाती है . यह आलेख होवर कार्यक्षमता और मेनू शीर्षकों के बगल में तीर आइकन को हटाने दोनों को संबोधित करता है।

होवर-सक्रिय ड्रॉपडाउन

होवर पर स्वचालित ड्रॉपडाउन सक्षम करने के लिए, सीएसएस का उपयोग करें छिपे हुए मेनू विकल्प को लक्षित करें। अपने CSS में निम्नलिखित कोड जोड़ें:

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
}

प्रतिक्रियाशील डिज़ाइन के लिए, कोड को मीडिया क्वेरी में लपेटें:

@media (min-width: 979px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}

एरो आइकन को हटाना

• बूटस्ट्रैप 3: .ड्रॉपडाउन-टॉगल एंकर तत्व से HTML को हटा दें।
• बूटस्ट्रैप 2 और निचला: इसका उपयोग करके तीरों को लक्षित करें और हटाएं सीएसएस चयनकर्ता:

a.menu:after, .dropdown-toggle:after {
    content: none;
}

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