ट्विटर बूटस्ट्रैप मल्टीलेवल ड्रॉपडाउन मेनू

Question 1

क्या ट्विटर बूटस्ट्रैप 2 के तत्वों का उपयोग करके बहु स्तरीय ड्रॉपडाउन मेनू करना संभव है? मूल संस्करण में यह सुविधा नहीं है।

Question 2

अद्यतन उत्तर

^{* अद्यतन उत्तर जो v2.1.1 ** बूटस्ट्रैप संस्करण स्टाइलशीट का समर्थन करता है।}

^{** लेकिन सावधान रहें क्योंकि यह समाधान v3 से हटा दिया गया है}

बस यह बताना चाहता था कि इस समाधान की अब आवश्यकता नहीं है क्योंकि नवीनतम बूटस्ट्रैप अब डिफ़ॉल्ट रूप से बहु-स्तरीय ड्रॉपडाउन का समर्थन करता है। यदि आप पुराने संस्करणों पर हैं, लेकिन आप उन लोगों के लिए इसका उपयोग कर सकते हैं, लेकिन जो नवीनतम (लेखन के समय v2.1.1) में अपडेट हुए हैं, उनके लिए अब इसकी आवश्यकता नहीं है। यहाँ दस्तावेज़ से सीधे अपडेट किए गए डिफ़ॉल्ट मल्टी-लेवल ड्रॉपडाउन का एक फील है:

http://jsfiddle.net/2Smgv/2858/

मूल उत्तर

गीदम में सबमेनू समर्थन पर कुछ मुद्दे उठाए गए हैं और वे आमतौर पर बूटस्ट्रैप डेवलपर्स द्वारा बंद कर दिए जाते हैं, जैसे कि यह एक , इसलिए मुझे लगता है कि इसे डेवलपर्स के लिए बूटस्ट्रैप का उपयोग करके कुछ काम करना छोड़ दिया गया है। यहाँ एक डेमो है जो आपको दिखाता है कि आप एक साथ काम करने वाले उप-मेनू को कैसे हैक कर सकते हैं।

प्रासंगिक कोड

सीएसएस

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

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

.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;
}

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

डेमो

Question 3

[ट्विटर बूटस्ट्रैप v3]

ट्विटर बूटस्ट्रैप v3 में एक एन-स्तर ड्रॉपडाउन मेनू (टच डिवाइस के अनुकूल) बनाने के लिए,

jsfiddle-n-level ड्रॉपडाउन मेनू v3.0.0 | v3.1.1 | v3.3.0

सीएसएस:

.dropdown-menu>li /* To prevent selection of text */
{   position:relative;
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    /* Rules below not implemented in browsers yet */
    -o-user-select: none;
    user-select: none;
    cursor:pointer;
}
.dropdown-menu .sub-menu 
{
    left: 100%;
    position: absolute;
    top: 0;
    display:none;
    margin-top: -1px;
    border-top-left-radius:0;
    border-bottom-left-radius:0;
    border-left-color:#fff;
    box-shadow:none;
}
.right-caret:after,.left-caret:after
 {  content:"";
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    display: inline-block;
    height: 0;
    vertical-align: middle;
    width: 0;
    margin-left:5px;
}
.right-caret:after
{   border-left: 5px solid #ffaf46;
}
.left-caret:after
{   border-right: 5px solid #ffaf46;
}

JQuery:

$(function(){
    $(".dropdown-menu > li > a.trigger").on("click",function(e){
        var current=$(this).next();
        var grandparent=$(this).parent().parent();
        if($(this).hasClass('left-caret')||$(this).hasClass('right-caret'))
            $(this).toggleClass('right-caret left-caret');
        grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret');
        grandparent.find(".sub-menu:visible").not(current).hide();
        current.toggle();
        e.stopPropagation();
    });
    $(".dropdown-menu > li > a:not(.trigger)").on("click",function(){
        var root=$(this).closest('.dropdown');
        root.find('.left-caret').toggleClass('right-caret left-caret');
        root.find('.sub-menu:visible').hide();
    });
});

HTML:

<div class="dropdown" style="position:relative">
    <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Click Here <span class="caret"></span></a>
    <ul class="dropdown-menu">
        <li>
            <a class="trigger right-caret">Level 1</a>
            <ul class="dropdown-menu sub-menu">
                <li><a href="#">Level 2</a></li>
                <li>
                    <a class="trigger right-caret">Level 2</a>
                    <ul class="dropdown-menu sub-menu">
                        <li><a href="#">Level 3</a></li>
                        <li><a href="#">Level 3</a></li>
                        <li>
                            <a class="trigger right-caret">Level 3</a>
                            <ul class="dropdown-menu sub-menu">
                                <li><a href="#">Level 4</a></li>
                                <li><a href="#">Level 4</a></li>
                                <li><a href="#">Level 4</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Level 2</a></li>
            </ul>
        </li>
        <li><a href="#">Level 1</a></li>
        <li><a href="#">Level 1</a></li>
    </ul>
</div>

Question 4

यह उदाहरण http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3 से है

मेरे लिए बूटस्ट्रैप v3.1.1 में काम करता है।

एचटीएमएल

<div class="container">
<div class="row">
    <h2>Multi level dropdown menu in Bootstrap 3</h2>
    <hr>
    <div class="dropdown">
        <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
            Dropdown <span class="caret"></span>
        </a>
        <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
          <li><a href="#">Some action</a></li>
          <li><a href="#">Some other action</a></li>
          <li class="divider"></li>
          <li class="dropdown-submenu">
            <a tabindex="-1" href="#">Hover me for more options</a>
            <ul class="dropdown-menu">
              <li><a tabindex="-1" href="#">Second level</a></li>
              <li class="dropdown-submenu">
                <a href="#">Even More..</a>
                <ul class="dropdown-menu">
                    <li><a href="#">3rd level</a></li>
                    <li><a href="#">3rd level</a></li>
                </ul>
              </li>
              <li><a href="#">Second level</a></li>
              <li><a href="#">Second level</a></li>
            </ul>
          </li>
        </ul>
    </div>
</div>

सीएसएस

.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;
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: #ccc;
margin-top: 5px;
margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}

.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;
}

Question 5

मैं निम्नलिखित मेनू के साथ एंड्रेस के जवाब से पेरेंट मेनू के शीर्ष पर हमेशा उप-मेनू को ठीक करने में सक्षम था:

.dropdown-menu li {
    position: relative;
}

मैं उन आइटमों पर एक आइकन "आइकन-शेवरॉन-राइट" भी जोड़ता हूं जिनमें मेनू उप-मेनू होते हैं, और आइकन को काले से सफेद पर होवर पर बदलते हैं (पाठ को सफेद करने के लिए बदलते हुए और चयनित नीली पृष्ठभूमि के साथ बेहतर दिखने के लिए)।

यहाँ पूर्ण कम / सीएसएस परिवर्तन (इसके साथ उपरोक्त बदलें):

.dropdown-menu li {
    position: relative;

    [class^="icon-"] {
        float: right;
    }

    &:hover {
        // Switch to white icons on hover
        [class^="icon-"] {
            background-image: url("../img/glyphicons-halflings-white.png");
        }
    }
}

Question 6

मैंने सिर्फ ड्रॉपडाउन आइटम class="span2"के <li>लिए जोड़ा और यह काम किया।

Question 7

चूंकि बूटस्ट्रैप 3 ने सबमेनू भाग को हटा दिया और हमें अपने आप को शैली को अनुकूलित करने की आवश्यकता है, मुझे लगता है कि स्मार्टमेनू बूटस्ट्रैप के साथ जाना बेहतर है: https://vadikom.github.io/smartmenus/src/drco/bootstrap-navbar.html#

इससे हमें मोबाइल उत्तरदायी और शैली पर समय की बचत होगी।

यह प्लगइन भी बहुत आशाजनक है।