বুটস্ট্র্যাপ ড্রপডাউন সাব মেনু অনুপস্থিত

Question

বুটস্ট্র্যাপ 3 এখনও আরসিতে রয়েছে, তবে আমি এটি প্রয়োগ করার চেষ্টা করছিলাম। আমি কীভাবে সাব মেনু ক্লাস স্থাপন করব তা বুঝতে পারি না। এমনকি সিএসএসে কোনও শ্রেণি নেই এমনকি নতুন ডক্সও এ সম্পর্কে কিছু বলে না

এটি সেখানে ড্রপডাউন-সাবম্যানু হিসাবে শ্রেণীর নাম সহ 2.x এ ছিল

Comments

স্মরণার্থক যে মেনু, নাভ এবং মডেলগুলি সহ কিছু উপাদান 3 সংস্করণে পরিবর্তিত হয়েছে।

— দেভিদিদি কাভার্জন

বিএস 3-তে এই (ইমো) দরকারী বৈশিষ্ট্যের জন্য নেটিভ সাপোর্টের অভাব হ'ল আমি এখনও স্যুইচ না করা একটি প্রধান কারণ। যদিও আমি সম্মতি দিচ্ছি এটি মোবাইলে এতটা কার্যকর নয়, এবং তাদের এখন 'মোবাইল প্রথম' পদ্ধতির রয়েছে, তারা ইতিমধ্যে প্রয়োগ করা একটি বৈশিষ্ট্য সরিয়ে ফেলা সংক্ষিপ্ত বলে মনে হচ্ছে, এটি ডেস্কটপে খুব দরকারী

— অ্যান্ড্রু ব্রাউন

সম্মত হয়েছে যে এটি প্রত্যাশিত কার্যকারিতা অপসারণ করার জন্য স্বল্পদৃষ্টি। এই জাতীয় ব্রেকিং এন্টারপ্রাইজ বিকাশকারীদের একটি খারাপ দিন দেয়।

— আরজেবি

একটি ড্রপডাউন করতে কেবল সিএসএস কোডেপেন.ইও

— গথবার্জ

Answer 1

আপডেট হয়েছে 2018

dropdown-submenuবুটস্ট্র্যাপ 3 রেসিন মধ্যে সরানো হয়েছে। বুটস্ট্র্যাপ লেখক মার্ক অট্টোর কথায় ..

"সাবমেনাসের এখনই ওয়েবে খুব বেশি জায়গা নেই, বিশেষত মোবাইল ওয়েব They.০ দিয়ে এগুলি সরানো হবে" - https://github.com/twbs/bootstrap/pull/6342

তবে, একটু অতিরিক্ত সিএসএস দিয়ে আপনি একই কার্যকারিতাটি পেতে পারেন।

বুটস্ট্র্যাপ 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

এখানে একটি উদাহরণ যা 3.0 আরসি 1: http://bootply.com/71520 ব্যবহার করে

বুটস্ট্র্যাপ 3.0.0 (চূড়ান্ত): http://bootply.com/86684 ব্যবহার করে এমন একটি উদাহরণ এখানে 4

সিএসএস

.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

হ্যাঁ ধন্যবাদ আমি এটিকে আমার থিমের স্টাইলশিট যুক্ত করেছি, কেবল বুটস্ট্র্যাপের পুরানো সংস্করণ ওয়ার্ডপ্রেস.আর.

— থিমেস

উদাহরণস্বরূপ বুটপ্লাই.কম / 86684 , সাবমেনুটি প্রদর্শন করার সময় পিতামাতার মেনু আইটেমটির সঠিক পটভূমি হভারের জন্য সিএসএসে নিম্নলিখিত লাইনটি যুক্ত করুন: .dropdown-submenu:hover {background: #e2e1e1;}

— এডুয়ার্ডো মোরালস

3.1.1 পাশাপাশি কাজ করে। সমাধানের জন্য অনেক ধন্যবাদ। বুটস্ট্র্যাপ.জেএস ফাইলটি সঠিকভাবে কাজ করার জন্য পরিবর্তনের চেষ্টা করে আমি প্রাচীরের বিরুদ্ধে আমার মাথাটি মারছিলাম।

— জোয়েল কিনজেল

আমি যতটা সম্ভব জিনিসগুলিকে সহজ করার চেষ্টা করছি তবে বৃহত্তর ওয়েবসাইটগুলিতে নেভিগেশনের একাধিক স্তরের (যেমন সরকারী ওয়েবসাইটগুলি) কোনও উপায় না নিয়েই এর প্রয়োজন রয়েছে।

— ট্রয় টেম্পলম্যান

আমি এতে মাউসটি সরাতে পারার আগে সাবমেনু অদৃশ্য হয়ে যায়, তাই ঘোরানো কাজ করছে না! এটি হোভার নয়, ক্লিকের উপর নির্ভর করে এটি ঠিক কাজ করে, যদিও।

— পোলভ

Answer 2

@ স্কেল্লি সলিউশনটি ভাল তবে মোবাইল ডিভাইসগুলিতে কাজ করবে না কারণ হোভার রাজ্যটি কাজ করবে না।

বিএস ২.৩.২ এর আচরণ ফিরে পেতে আমি কিছুটা জেএস যুক্ত করেছি।

পিএস: এটি আপনি যে সিএসএসে পাবেন তার সাথে এটি কাজ করবে: 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

আপনি এই পোস্টের সবচেয়ে স্মার্ট লোক

— ব্যবহারকারী 1143669

এই সমাধানটি ডেস্কটপে থাকাকালীন হোভার কার্যকারিতা রাখতে চাওয়ার জন্য অ্যাকাউন্ট করে না এবং এটি সাবমেনুর দ্বিতীয় স্তরের জন্যও কাজ করে না। সাবমেনাসের আরও স্তরের জন্য এটি কাজ করার জন্য নিম্নলিখিত দুটি লাইনে নিম্নলিখিত লাইনে পরিবর্তন করুন: $(this).closest(".dropdown-submenu").toggleClass("open");যা লিঙ্ক মেনু আইটেমগুলি খুলবে / বন্ধ করবে। ডেস্কটপে হোভার রাখার জন্য ব্রাউজারগুলির ভিউপোর্ট প্রস্থে একটি পরীক্ষা করা প্রয়োজন এবং প্রতিটি সাইটের জন্য পৃথক হবে।

— 18

আপনার কোডের জন্য ধন্যবাদ তবে মোবাইল ফোনে আপনার কোডটি বাগ রয়েছে।

— জিয়ান দান

Answer 3

আজ অবধি (9 জানুয়ারী 2014) বুটস্ট্র্যাপ 3 এখনও সাব মেনু ড্রপডাউন সমর্থন করে না।

আমি প্রতিক্রিয়াশীল নেভিগেশন মেনু সম্পর্কে গুগল অনুসন্ধান করেছি এবং আমি এটি সেরা এটি পাওয়া যায়।

এটি স্মার্ট মেনুগুলি http://www.smartmenus.org/

আমি আশা করি মাল্টিলেভেল সাব মেনু সহ যিনি নেভিগেশন মেনু চান তার পক্ষে এটিই উপায়।

আপডেট 2015-02-17 স্মার্ট মেনুগুলি এখন সাবমেনুর জন্য বুটস্ট্র্যাপ উপাদান স্টাইলকে পুরোপুরি সমর্থন করে। আরও তথ্যের জন্য দয়া করে স্মার্ট মেনু ওয়েবসাইটটি দেখুন।

Comments

পিসিতে ঘোরাতে বুটস্ট্র্যাপ নেওয়ার চেষ্টা করতে আমার সমস্যা হচ্ছে, এবং একাধিক স্তর সহ ট্যাবলেটে ক্লিক করুন। তুমি আমার দিন টাকে সুন্দর করেছ! সুন্দরভাবে কাজ করে - বুটস্ট্র্যাপের মতো একই মার্কআপ ব্যবহার করে। ধন্যবাদ! :)

— হিপ্পি

এই সমাধানটি নিখরচায়, মুক্ত উত্স এবং বুটস্ক্র্যাপ 3 এর সাথে খুব ভালভাবে কাজ করে

— প্যাট্রিক দেশজার্ডিনস

অ্যামেজিং! সহজ! বুটস্ট্র্যাপ 3 সংহতকরণের সুনির্দিষ্ট বিবরণের জন্য, এখানে দেখুন: vadikom.github.io/smartmenus/src/demo/bootstrap-navbar.html

— ম্যানাফায়ার

স্মার্টম্যানাস দুর্দান্ত, তবে এটি কেবল নববারের সাথে কাজ করে, সাধারণ বোতাম ড্রপডাউনগুলির সাথে নয়।

— নিকোলাই প্রোকোসচেঙ্কো

আপনি আমার প্রকল্পটি সংরক্ষণ করেছেন :-)

— সিকান্দার

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

});

সিএসএস: ব্যাকগ্রাউন্ড-কালার থেকে: # আইইউই ব্যাকগ্রাউন্ড-কালার: # সি 5 সি 5 সি 5 - হোয়াইট ফন্ট এবং হালকা ব্যাকগ্রাউন্ড ভাল দেখাচ্ছে না।

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

আমি আশা করি এটি আমার পক্ষে যেমনটা করেছে তেমন লোককে সহায়তা করে!

তবে আমি আশা করি বুটস্ট্র্যাপ এ্যাসএপটিকে আবার ফিচার যুক্ত করবে।

Answer 5

মন্তব্য Skelly এর সত্যিই সহায়ক কার্যসংক্রান্ত বুটস্ট্র্যাপ-Sass 3.3.6, utilities.scss, লাইন 19: .pull-leftহয়েছে float:left !important। যেহেতু, আমি তার সিএসএসেও গুরুত্বপূর্ণ ব্যবহার করার পরামর্শ দিচ্ছি:

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

Answer 6

কিছুদিন আগে আমি এই সমস্যাটি নিয়ে মাথা ঘামিয়েছি। আমি অনেকগুলি সমাধান চেষ্টা করেছিলাম এবং শেষ পর্যন্ত আমার পক্ষে সত্যিই কোনও কাজ করেনি আমি বুটস্ট্র্যাপের ড্রপডাউন কোডের একটি এক্সটেনিয়ন / ওভাররাইড তৈরি করে শেষ করেছি। এটি ক্লোজমেনাস ফাংশনে পরিবর্তন সহ আসল কোডের একটি অনুলিপি।

আমি মনে করি এটি একটি ভাল সমাধান যেহেতু এটি বুটস্ট্র্যাপ জেএসের মূল শ্রেণিকে প্রভাবিত করে না।

আপনি এটি জিহুব এ যাচাই করতে পারেন: https://github.com/djokodonev/bootstrap- মাল্টিলেভেলড্রপোডাউন

Comments

এটি মাল্টিলেভেল ড্রপডাউনয়ের জন্য খুব ভাল সমাধান, আমি এটি ব্যবহার করতে চাই।

— শিকারী

আপনি এটি পছন্দ করেছেন বলে আমি আনন্দিত :-)

— জর্জ ডোনেভ

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>