টুইটার বুটস্ট্র্যাপ মাল্টিলেভেল ড্রপডাউন মেনু

Question 1

টুইটার বুটস্ট্র্যাপ 2 এর উপাদানগুলি ব্যবহার করে একটি বহু স্তরের ড্রপডাউন মেনু পাওয়া সম্ভব? মূল সংস্করণে এই বৈশিষ্ট্যটি নেই।

Question 2

আপডেট উত্তর

^{V2.1.1 সমর্থন করে * আপডেট উত্তর ** বুটস্ট্র্যাপ সংস্করণ স্টাইলশিট।}

^{** তবে সাবধান হন কারণ এই সমাধানটি v3 থেকে সরানো হয়েছে}

কেবল উল্লেখ করতে চেয়েছিলেন যে এই সমাধানটির আর দরকার নেই কারণ সর্বশেষতম বুটস্ট্র্যাপ এখন ডিফল্টরূপে বহু-স্তরের ড্রপডাউনগুলিকে সমর্থন করে। আপনি যদি পুরানো সংস্করণে থাকেন তবে আপনি এটি ব্যবহার করতে পারেন তবে যারা সর্বশেষে আপডেট করেছেন (লেখার সময় v2.1.1) এটি আর প্রয়োজন হয় না। ডকুমেন্টেশন থেকে সরাসরি আপডেট হওয়া ডিফল্ট মাল্টি-লেভেল ড্রপডাউন সহ এক ঝাঁকনি এখানে দেওয়া হয়েছে:

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

আসল উত্তর

ওইখানে সাবমেনু সাপোর্টে উত্থাপিত কিছু বিষয় GitHub এ ছিলাম এবং তারা সাধারণত যেমন বুটস্ট্র্যাপ ডেভেলপারদের দ্বারা বন্ধ করা হয় এই এক , তাই আমি মনে করি এটা কাজ কিছু বাইরে বুটস্ট্র্যাপ ব্যবহার বিকাশকারীদের কাছে ছেড়ে দেওয়া হয়। এখানে একটি ডেমো আমি একসাথে রেখেছি যাতে আপনি কীভাবে একটি কাজ করা সাব মেনু হ্যাক করতে পারেন তা দেখিয়ে দেওয়া হচ্ছে।

প্রাসঙ্গিক কোড

সিএসএস

.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

[টুইটার বুটস্ট্র্যাপ ভি 3]

টুইটার বুটস্ট্র্যাপ v3 এ একটি এন-লেভেল ড্রপডাউন মেনু (টাচ ডিভাইস বান্ধব) তৈরি করতে,

এন-লেভেল ড্রপডাউন মেনু 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;
}

জিকুয়েরি:

$(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();
    });
});

এইচটিএমএল:

<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/m Multi-level-DPdown-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/demo/bootstrap-navbar.html#

এটি মোবাইলের প্রতিক্রিয়াশীল এবং স্টাইলে আমাদের সময় সাশ্রয় করবে।

এই প্লাগইনটিও খুব আশাব্যঞ্জক।