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




drop-down-menu twitter-bootstrap (20)

"माई हेड हर्ट्स" (जो महान था) के जवाब के अलावा:

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

2 समस्याएं हैं:

  1. ड्रॉपडाउन लिंक पर क्लिक करने से ड्रॉपडाउन-मेनू खुल जाएगा। और यह तब तक खुला रहेगा जब तक उपयोगकर्ता कहीं और क्लिक नहीं करता है, या उस पर वापस घूमता है, एक अजीब यूआई बना देता है।
  2. ड्रॉपडाउन लिंक और ड्रॉपडाउन-मेन्यू के बीच 1 पीएक्स मार्जिन है। यदि आप ड्रॉपडाउन और ड्रॉपडाउन-मेनू के बीच धीरे-धीरे आगे बढ़ते हैं तो ड्रॉपडाउन-मेनू छुपाया जाता है।

(1) का समाधान नौसेना लिंक से "वर्ग" और "डेटा-टॉगल" तत्वों को हटा रहा है

<a href="#">
     Dropdown
     <b class="caret"></b>
</a>

यह आपको अपने मूल पृष्ठ पर एक लिंक बनाने की क्षमता भी देता है - जो डिफ़ॉल्ट कार्यान्वयन के साथ संभव नहीं था। आप "#" को उस पृष्ठ से बदल सकते हैं जिसके साथ आप उपयोगकर्ता को भेजना चाहते हैं।

(2) का समाधान .dropdown-menu selector पर मार्जिन-टॉप को हटा रहा है

.navbar .dropdown-menu {
 margin-top: 0px;
}

मैं मेनू शीर्षक पर क्लिक करने के बजाय, मेरे बूटस्ट्रैप मेनू को होवर पर स्वचालित रूप से ड्रॉप करना चाहता हूं। मैं मेनू शीर्षक के बगल में छोटे तीरों को भी खोना चाहता हूं।


.dropdown-menu के लिए बूटस्ट्रैप सीएसएस मार्जिन को रीसेट करने के लिए मार्जिन-टॉप भी जोड़ा गया है, इसलिए मेनू सूची ड्रॉप डाउन मेनू से मेन्यू सूची में धीरे-धीरे हो जाने पर मेनू सूची गायब नहीं होती है।

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

.nav .dropdown-menu {
    margin-top: 0;
}

JQuery समाधान अच्छा है, लेकिन इसे या तो क्लिक ईवेंट (मोबाइल या टैबलेट के लिए) पर सौदा करने की आवश्यकता होगी क्योंकि होवर ठीक से काम नहीं करेगा ... शायद कुछ विंडो फिर से आकार का पता लगा सकता है?

एंड्रेस इलिच का जवाब अच्छी तरह से काम करता प्रतीत होता है, लेकिन इसे मीडिया क्वेरी में लपेटा जाना चाहिए:

@media (min-width: 980px) {

    .dropdown-menu .sub-menu {
        left: 100%;
        position: absolute;
        top: 0;
        visibility: hidden;
        margin-top: -1px;
    }

    .dropdown-menu li:hover .sub-menu {
        visibility: visible;
    }

    .dropdown:hover .dropdown-menu {
        display: block;
    }

    .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
        margin-top: 0;
    }

    .navbar .sub-menu:before {
        border-bottom: 7px solid transparent;
        border-left: none;
        border-right: 7px solid rgba(0, 0, 0, 0.2);
        border-top: 7px solid transparent;
        left: -7px;
        top: 10px;
    }
    .navbar .sub-menu:after {
        border-top: 6px solid transparent;
        border-left: none;
        border-right: 6px solid #fff;
        border-bottom: 6px solid transparent;
        left: 10px;
        top: 11px;
        left: -6px;
    }
}

अगर वे टैबलेट से छोटे होते हैं तो उन्हें ड्रॉप डाउन और उनकी देखभाल को छिपाना चाहिए।

@media (max-width: 768px) {
    .navbar ul.dropdown-menu, .navbar li.dropdown b.caret {
        display: none;
    }
}

ऐसा करने का सबसे अच्छा तरीका केवल होवर के साथ बूटस्ट्रैप के क्लिक ईवेंट को ट्रिगर करना है। इस तरह, यह अभी भी टच डिवाइस अनुकूल रहना चाहिए।

$('.dropdown').hover(function(){ 
  $('.dropdown-toggle', this).trigger('click'); 
});

कोड की तीन पंक्तियों में बस अपनी सीएसएस शैली को अनुकूलित करें

.dropdown:hover .dropdown-menu {
   display: block;
}

बस जोड़ना चाहते हैं, कि यदि आपके पास एकाधिक ड्रॉपडाउन हैं (जैसा कि मैं करता हूं) आपको लिखना चाहिए:

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

और यह ठीक से काम करेगा।


माउसहोवर (केवल डेस्कटॉप) पर सबमेनू खोलने के लिए इस कोड का उपयोग करें:

$('ul.nav li.dropdown').hover(function () {
    if ($(window).width() > 767) {
        $(this).find('.dropdown-menu').show();
    }
}, function () {
    if ($(window).width() > 767) {
        $(this).find('.dropdown-menu').hide().css('display','');
    }
});

और यदि आप पहले स्तर के मेनू को क्लिक करने योग्य बनाना चाहते हैं, तो मोबाइल पर भी इसे जोड़ें:

    $('.dropdown-toggle').click(function() {
    if ($(this).next('.dropdown-menu').is(':visible')) {
        window.location = $(this).attr('href');
    }
});

उपमेनू (ड्रॉपडाउन-मेन्यू) डेस्कटॉप पर माउसहोवर के साथ खोला जाएगा, और मोबाइल और टैबलेट पर क्लिक / स्पर्श के साथ। एक बार सबमेनू खुल गया, एक दूसरा क्लिक आपको लिंक खोलने देगा। if ($(window).width() > 767) के लिए धन्यवाद, सबमेनू मोबाइल पर पूर्ण स्क्रीन चौड़ाई लेगा।


मैंने इसे निम्नानुसार प्रबंधित किया है:

$('ul.nav li.dropdown').hover(function(){
       $(this).children('ul.dropdown-menu').slideDown(); 
    }, function(){
       $(this).children('ul.dropdown-menu').slideUp(); 
});

मुझे उम्मीद है इससे किसी को सहायता मिलेगी...


मैंने थोड़ी सी jQuery का उपयोग किया है:

// Add hover effect to menus
jQuery('ul.nav li.dropdown').hover(function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
});

मैंने बूटस्ट्रैप 3 ड्रॉपडाउन होवर कार्यक्षमता के लिए एक उचित प्लगइन प्रकाशित किया है, जिसमें आप यह भी परिभाषित कर सकते हैं कि dropdown-toggle तत्व पर क्लिक करते समय क्या होता है (क्लिक अक्षम किया जा सकता है):

github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover

जब मैंने पहले से ही कई समाधान किए हैं तो मैंने इसे क्यों बनाया?

मुझे पहले के सभी मौजूदा समाधानों के साथ समस्याएं थीं। सरल सीएसएस वाले .dropdown पर .open क्लास का उपयोग नहीं कर रहे हैं, इसलिए ड्रॉप-डाउन टॉगल तत्व पर कोई प्रतिक्रिया नहीं होगी जब ड्रॉप-डाउन दिखाई दे।

जेएस लोग। .dropdown-toggle पर क्लिक करने में हस्तक्षेप कर रहे हैं, इसलिए ड्रॉपडाउन होवर पर दिखाई देता है, फिर खुले ड्रॉप-डाउन पर क्लिक करते समय इसे छुपाता है, और माउस को बाहर ले जाने से ड्रॉप-डाउन फिर से दिखने के लिए ट्रिगर हो जाएगा। कुछ जेएस समाधान आईओएस संगतता तोड़ रहे हैं, कुछ प्लगइन आधुनिक डेस्कटॉप ब्राउज़र पर काम नहीं कर रहे हैं जो टच इवेंट्स का समर्थन कर रहे हैं।

यही कारण है कि मैंने github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover प्लगइन github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover जो बिना किसी हैक के मानक बूटस्ट्रैप जावास्क्रिप्ट एपीआई का उपयोग कर इन सभी मुद्दों को रोकता है। यहां तक ​​कि Aria विशेषताओं को भी इस प्लगइन के साथ ठीक काम कर रहे हैं।


यदि आपके पास इस तरह की dropdown कक्षा वाला तत्व है (उदाहरण के लिए):

<ul class="list-unstyled list-inline">
    <li class="dropdown">
        <a data-toggle="dropdown" href="#"><i class="fa fa-bars"></i> Dropdown 1</a>
        <ul class="dropdown-menu">
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
            <li><a href="">Item 3</a></li>
            <li><a href="">Item 4</a></li>
            <li><a href="">Item 5</a></li>
        </ul>
    </li>
    <li class="dropdown">
        <a data-toggle="dropdown" href="#"><i class="fa fa-user"></i> Dropdown 2</a>
        <ul class="dropdown-menu">
            <li><a href="">Item A</a></li>
            <li><a href="">Item B</a></li>
            <li><a href="">Item C</a></li>
            <li><a href="">Item D</a></li>
            <li><a href="">Item E</a></li>
        </ul>
    </li>
</ul>

फिर आप jQuery कोड के इस स्निपेट का उपयोग करके ड्रॉपडाउन मेनू को अपने शीर्षक पर क्लिक करने के बजाय होवर ओवर पर स्वचालित रूप से ड्रॉप डाउन कर सकते हैं:

<script>
    $('.dropdown').hover(
        function() {
            $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
        },
        function() {
            $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
        }
    );

    $('.dropdown-menu').hover(
        function() {
            $(this).stop(true, true);
        },
        function() {
            $(this).stop(true, true).delay(200).fadeOut();
        }
    );
</script>

यहां एक डेमो है

यह उत्तर @ माइकल के उत्तर पर निर्भर था, मैंने कुछ बदलाव किए हैं और ड्रॉपडाउन मेनू को ठीक तरह से काम करने के लिए कुछ अतिरिक्त जोड़ दिए हैं


यह बूटस्ट्रैप 3 में बनाया गया है। बस इसे अपने सीएसएस में जोड़ें:

.dropdown:hover .dropdown-menu {
display: block;
}

यह मेरे लिए काम किया:

.dropdown:hover .dropdown-menu {
    display: block;
}

यह शायद एक बेवकूफ विचार है, लेकिन तीर को नीचे इंगित करने के लिए, आप इसे हटा सकते हैं

<b class="caret"></b>

यह ऊपर की ओर इशारा करते हुए कुछ भी नहीं करता है, यद्यपि ...


यहां बहुत सारे अच्छे समाधान हैं। लेकिन मैंने सोचा कि मैं आगे बढ़ूंगा और यहां एक और विकल्प के रूप में अपना रखूंगा। यह सिर्फ एक साधारण jQuery स्निपेट है जो बूटस्ट्रैप के तरीके से करता है अगर यह सिर्फ क्लिक करने के बजाय ड्रॉपडाउन के लिए होवर का समर्थन करता है। मैंने केवल संस्करण 3 के साथ इसका परीक्षण किया है, इसलिए मुझे नहीं पता कि यह संस्करण 2 के साथ काम करेगा या नहीं। इसे अपने संपादक में एक स्निपेट के रूप में सहेजें और इसे एक कुंजी के स्ट्रोक पर रखें।

<script>
    $(function() {
        $(".dropdown").hover(
            function(){ $(this).addClass('open') },
            function(){ $(this).removeClass('open') }
        );
    });
</script>

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


होवर पर ड्रॉपडाउन मेनू टॉगल करने के लिए आप डिफ़ॉल्ट $().dropdown('toggle') विधि का उपयोग कर सकते हैं:

$(".nav .dropdown").hover(function() {
  $(this).find(".dropdown-toggle").dropdown("toggle");
});

होवर पर स्वचालित रूप से ड्रॉप करने के लिए मेनू प्राप्त करने के लिए यह मूल सीएसएस का उपयोग करके हासिल किया जा सकता है। आपको छिपे हुए मेनू विकल्प में चयनकर्ता को काम करने की आवश्यकता है और उसके बाद उपयुक्त li टैग को ढंकने पर इसे ब्लॉक के रूप में प्रदर्शित करने के लिए सेट करें। ट्विटर बूटस्ट्रैप पेज से उदाहरण लेते हुए, चयनकर्ता निम्नानुसार होगा:

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

हालांकि, यदि आप बूटस्ट्रैप की उत्तरदायी विशेषताओं का उपयोग कर रहे हैं, तो आप इस कार्यक्षमता को ध्वस्त नवाबार (छोटी स्क्रीन पर) नहीं चाहेंगे। इससे बचने के लिए, ऊपर दिए गए कोड को मीडिया क्वेरी में लपेटें:

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

तीर (देखभाल) को छिपाने के लिए यह विभिन्न तरीकों से किया जाता है कि आप ट्विटर बूटस्ट्रैप संस्करण 2 और निम्न या संस्करण 3 का उपयोग कर रहे हैं या नहीं:

बूटस्ट्रैप 3

संस्करण 3 में कैरेट को हटाने के लिए आपको .dropdown-toggle एंकर तत्व से HTML <b class="caret"></b> को हटाने की आवश्यकता है:

<a class="dropdown-toggle" data-toggle="dropdown" href="#">
    Dropdown
    <b class="caret"></b>    <-- remove this line
</a>

बूटस्ट्रैप 2 और निचला

संस्करण 2 में कैरेट को हटाने के लिए आपको सीएसएस में थोड़ी अधिक अंतर्दृष्टि की आवश्यकता है और मैं यह सुझाव देता हूं कि कैसे :after छद्म तत्व के :after अधिक विस्तार से काम करता है। ट्विटर बूटस्ट्रैप उदाहरण में तीरों को लक्षित करने और निकालने के लिए आपको अपना रास्ता शुरू करने के लिए, आप निम्न सीएसएस चयनकर्ता और कोड का उपयोग करेंगे:

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

यह आपके पक्ष में काम करेगा यदि आप आगे बढ़ते हैं और इन उत्तरों का उपयोग न करें जो मैंने आपको दिया है।

@ कोकाएकैट के लिए धन्यवाद कि यह इंगित करने के लिए कि हम माता-पिता होवर पर उप मेन्यू दिखाए जाने के लिए ">" बाल संयोजक गायब थे


For the caret... I haven't seen any one specifying simple CSS that totally blocks the caret.

हेयर यू गो:

.caret {
    display: none !important;
}

सुदर्शन के जवाब को बढ़ाने के लिए, मैं एक्सएस डिस्प्ले चौड़ाई पर होवर को रोकने के लिए मीडिया क्वेरी में लपेटता हूं ...

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

    .nav .dropdown-menu {
        margin-top: 0;
    }
}

इसके अलावा मार्कअप में कैरेट की आवश्यकता नहीं है, ली के लिए ड्रॉपडाउन क्लास।





twitter-bootstrap