बूटस्ट्रैप ड्रॉपडाउन उप मेनू गायब है

Question

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

यह ड्रॉपडाउन-सबमेनू के रूप में वर्ग के नाम के साथ 2.x में था

Comments

रिमाइबर कि संस्करण 3 में कुछ घटक बदल गए हैं, जिसमें मेनू, नौसेना और मोडल शामिल हैं।

— डिविडी कैवर्ज़न

BS3 में इस (imho) उपयोगी सुविधा के लिए मूल समर्थन की कमी मुख्य कारणों में से एक है जो मैंने अभी तक स्विच नहीं किया है। जबकि मैं मानता हूं कि यह मोबाइल में उतना उपयोगी नहीं है, और उनके पास अब 'मोबाइल पहले' का दृष्टिकोण है, ऐसा लगता है कि वे पहले से लागू किए गए एक फीचर को हटाने के लिए तत्पर हैं, जो डेस्कटॉप पर बहुत उपयोगी है

— एंड्रयू ब्राउन

सहमत है कि यह अपेक्षित कार्यक्षमता को दूर करने के लिए अदूरदर्शी है। इस तरह का ब्रेकिंग परिवर्तन उद्यम डेवलपर्स को एक बुरा दिन देता है।

— आरजेबी

ड्रॉपडाउन बनाने के लिए बस css codepen.io/Gothburz/pen/GpJKqP

— Gothburz

Answer 1

अपडेटेड 2018

dropdown-submenuबूटस्ट्रैप 3 आर सी में हटा दिया गया है। बूटस्ट्रैप लेखक मार्क ओटो के शब्दों में ।।

"सबमेनस में अभी वेब पर बहुत जगह नहीं है, विशेष रूप से मोबाइल वेब। उन्हें 3.0 के साथ हटा दिया जाएगा" - https://github.com/twbs/bootstrap/pull/6342

लेकिन, थोड़े अतिरिक्त CSS के साथ आप समान कार्यक्षमता प्राप्त कर सकते हैं।

बूटस्ट्रैप 4 (होवर पर नौबर सबमेनू)

.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}
.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
}

नवबार सबमेनू ड्रॉपडाउन होवर
नवबार सबमेनू ड्रॉपडाउन होवर (दाएं गठबंधन)
नवबार सबमेनू ड्रॉपडाउन क्लिक (दाएं गठबंधन)
नवबार ड्रॉपडाउन होवर (कोई सबमेनू नहीं)

---

बूटस्ट्रैप ३

यहां एक उदाहरण दिया गया है जो 3.0 RC 1: http://bootply.com/71520 का उपयोग करता है

यहाँ एक उदाहरण है जो बूटस्ट्रैप 3.0.0 (अंतिम) का उपयोग करता है: http://bootply.com/86684

सीएसएस

.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
    margin-left:-1px;
    -webkit-border-radius:0 6px 6px 6px;
    -moz-border-radius:0 6px 6px 6px;
    border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
    display:block;
}
.dropdown-submenu>a:after {
    display:block;
    content:" ";
    float:right;
    width:0;
    height:0;
    border-color:transparent;
    border-style:solid;
    border-width:5px 0 5px 5px;
    border-left-color:#cccccc;
    margin-top:5px;
    margin-right:-10px;
}
.dropdown-submenu:hover>a:after {
    border-left-color:#ffffff;
}
.dropdown-submenu.pull-left {
    float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
    left:-100%;
    margin-left:10px;
    -webkit-border-radius:6px 0 6px 6px;
    -moz-border-radius:6px 0 6px 6px;
    border-radius:6px 0 6px 6px;
}

नमूना मार्कअप

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">  
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <li class="menu-item dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Drop Down<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li class="menu-item dropdown dropdown-submenu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a>
                            <ul class="dropdown-menu">
                                <li class="menu-item ">
                                    <a href="#">Link 1</a>
                                </li>
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 2</a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="#">Link 3</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

PS - उदाहरण में नेबर में जो बाईं स्थिति को समायोजित करता है: http://bootply.com/92442

Comments

हाँ धन्यवाद मैंने इसे अपनी थीम की स्टाइलशीट में शामिल किया है, बस बूटस्ट्रैप के पुराने संस्करण से कॉपी किया है wordpress.org/themes/bikaner

— DevC

उदाहरण के लिए bootply.com/86684 , सबमेनू प्रदर्शित करते समय मूल मेनू आइटम के सही बैकग्राउंड होवर के लिए css में निम्न पंक्ति जोड़ें: .dropdown-submenu:hover {background: #e2e1e1;}

— Eduardo Moralles

3.1.1 के साथ भी काम करता है। समाधान के लिए बहुत धन्यवाद। मैं ठीक से काम करने के लिए bootstrap.js फ़ाइल को बदलने की कोशिश कर रही दीवार के खिलाफ अपना सिर पीट रहा था।

— जोएल किन्ज़ेल

मैं सभी चीजों को सरल बनाने की कोशिश कर रहा हूं, लेकिन बड़े वेबसाइटों पर इसके लिए एक रास्ता है, जिसमें नेविगेशन के कई स्तरों (जैसे सरकारी वेबसाइट) के आसपास कोई रास्ता नहीं है।

— ट्रॉय टेम्पलमैन

इससे पहले कि मैं माउस को स्थानांतरित कर सकता हूं, तब भी सबमेनू गायब हो गया, इसलिए मंडराना काम नहीं कर रहा है! यह हॉवर नहीं है, क्लिक पर निर्भर है, यह ठीक काम करता है, हालांकि।

— पोलाव

Answer 2

@skelly समाधान अच्छा है, लेकिन मोबाइल उपकरणों पर काम नहीं करेगा क्योंकि होवर राज्य काम नहीं करेगा।

मैंने बीएस 2.3.2 व्यवहार वापस पाने के लिए थोड़ा सा JS जोड़ा है।

पुनश्च: यह आपके द्वारा वहां पर उपलब्ध सीएसएस के साथ काम करेगा: http://bootply.com/71520 हालांकि आप निम्नलिखित भाग पर टिप्पणी कर सकते हैं:

सीएसएस:

/*.dropdown-submenu:hover>.dropdown-menu{display:block;}*/

जे एस:

$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
  // Avoid following the href location when clicking
  event.preventDefault();
  // Avoid having the menu to close when clicking
  event.stopPropagation();
  // If a menu is already open we close it
  $('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
  // opening the one you clicked on
  $(this).parent().addClass('open');
});

परिणाम मेरी वर्डप्रेस थीम (पृष्ठ के शीर्ष पर): http://shprinkone.julienrenaux.fr/ पर पाया जा सकता है

Comments

आप इस पोस्ट में सबसे चतुर आदमी हैं

— user1143669

यह समाधान डेस्कटॉप पर होने पर होवर की कार्यक्षमता को बनाए रखने के लिए खाता नहीं है और यह दूसरे स्तर के सबमेनू के लिए भी काम नहीं करता है। सबमेनस के अधिक स्तरों के लिए काम करने के लिए अंतिम दो पंक्तियों को निम्न पंक्ति में बदलें: $(this).closest(".dropdown-submenu").toggleClass("open");जो लिंक मेनू आइटम खोल / बंद कर देगा। डेस्कटॉप पर होवर को बनाए रखने के लिए, ब्राउज़र व्यूपोर्ट की चौड़ाई पर एक जांच आवश्यक है और प्रत्येक साइट के लिए अलग होगी।

— एडहेजेस

आपके कोड के लिए धन्यवाद। लेकिन मोबाइल फोन में आपके कोड में बग है।

— जियान डान

Answer 3

आज तक (9 जून 2014) बूटस्ट्रैप 3 अभी भी उप मेनू ड्रॉपडाउन का समर्थन नहीं करता है।

मैंने उत्तरदायी नेविगेशन मेनू के बारे में Google को खोजा और पाया कि यह सबसे अच्छा मैं है।

यह स्मार्ट मेनू है http://www.smartmenus.org/

मुझे उम्मीद है कि यह उन लोगों के लिए रास्ता है जो मल्टीलेवल सब मेनू के साथ नेविगेशन मेनू चाहते हैं।

अद्यतन 2015-02-17 स्मार्ट मेनू अब पूरी तरह से सबमेनू के लिए बूटस्ट्रैप तत्व शैली का समर्थन करते हैं। अधिक जानकारी के लिए कृपया स्मार्ट मेनू वेबसाइट देखें।

Comments

मुझे पीसी पर हॉवर करने के लिए बूटस्ट्रैप प्राप्त करने में कठिनाई हो रही थी, और कई स्तरों के साथ टैबलेट पर क्लिक करें। तुमने मेरा दिन बना दिया! खूबसूरती से काम करता है - बूटस्ट्रैप के रूप में बहुत अधिक मार्कअप का उपयोग करता है। धन्यवाद! :)

— हिप्पी

यह समाधान नि: शुल्क, खुला स्रोत है और बूटस्ट्रैप 3 के साथ बहुत अच्छी तरह से काम करता है

— पैट्रिक डेसजार्डिन्स

गजब का! आसान! बूटस्ट्रैप 3 एकीकरण पर विशेष विवरण के लिए, यहां देखें: vadikom.github.io/smartmenus/src/demo/bootstrap-navbar.html

— manafire

स्मार्टमेनस अच्छा है, हालांकि यह केवल नेबर्स के साथ काम करता है, न कि साधारण बटन ड्रॉपडाउन के साथ।

— निकोलाई प्रोकोसचेंको

u ने मेरी परियोजना को बचाया :-)

— सिकंदर

Answer 4

श्रिंक के कोड ने मुझे सबसे अधिक मदद की, लेकिन ऑफ-स्क्रीन जाने के लिए ड्रॉपडाउन से बचने के लिए मैंने इसे अपडेट किया:

जे एस:

$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
    // Avoid following the href location when clicking
    event.preventDefault(); 
    // Avoid having the menu to close when clicking
    event.stopPropagation(); 
    // If a menu is already open we close it
    $('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
    // opening the one you clicked on
    $(this).parent().addClass('open');

    var menu = $(this).parent().find("ul");
    var menupos = $(menu).offset();

    if (menupos.left + menu.width() > $(window).width()) {
        var newpos = -$(menu).width();
        menu.css({ left: newpos });    
    } else {
        var newpos = $(this).parent().width();
        menu.css({ left: newpos });
    }

});

CSS: बैकग्राउंड-कलर से: #eeee टू बैकग्राउंड-कलर: # c5c5c5 - व्हाइट फॉन्ट और लाइट बैकग्राउंड अच्छा नहीं देखा गया।

.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
  background-color: #c5c5c5;
  border-color: #428bca;
}

मुझे उम्मीद है कि यह लोगों को उतना ही मदद करता है जितना कि यह मेरे लिए था!

लेकिन मुझे उम्मीद है कि बूटस्ट्रैप उप फीचर को वापस ASAP में जोड़ देगा।

Answer 5

करने के लिए टिप्पणी Skelly की वास्तव में सहायक वैकल्पिक हल बूटस्ट्रैप-सास 3.3.6, utilities.scss, लाइन 19 में: .pull-leftहै float:left !important। उसके बाद से, मैं उसके CSS में भी महत्वपूर्ण उपयोग करने की सलाह देता हूँ:

.dropdown-submenu.pull-left {
    float:none !important;
}

Answer 6

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

मुझे लगता है कि यह एक अच्छा समाधान है क्योंकि यह बूटस्ट्रैप js के मुख्य वर्गों को प्रभावित नहीं करता है।

आप इसे गिहब पर देख सकते हैं: https://github.com/djokodonev/bootstrap-multilevel-dropdown

Comments

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

— huncyrus

मुझे खुशी है कि आपने इसे पसंद किया है :-)

— जॉर्ज डेनव

Answer 7

मैं ड्रॉपडाउन के लिए एक और समाधान करता हूं। आशा है कि यह उपयोगी है बस इस जेएस स्क्रिप्ट जोड़ें

<script type="text/javascript"> jQuery("document").ready(function() {
  jQuery("ul.dropdown-menu > .dropdown.parent").click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    if (jQuery(this).hasClass('open2'))
      jQuery(this).removeClass('open2');
    else {
      jQuery(this).addClass('open2');
    }

  });
}); < /script>

<style type="text/css">.open2{display:block; position:relative;}</style>