ক্লিকের পরিবর্তে কীভাবে টুইটার বুটস্ট্র্যাপ মেনু ড্রপডাউন করতে হয়

Question

আমি আমার বুটস্ট্র্যাপ মেনুটি মেনু শিরোনামটি ক্লিক না করে স্বয়ংক্রিয়ভাবে হোভারে নেমে যেতে চাই। আমি মেনু শিরোনামের পাশের ছোট তীরগুলিও হারাতে চাই।

Comments

এর জন্য একটি সমাধান রয়েছে, সুতরাং মিক্কোর উত্তরটি সঠিক তবে বিশেষত সেই পরিস্থিতির জন্য এখন একটি প্লাগইন দিয়ে coveredাকা রয়েছে। বুটস্ট্র্যাপ-হোভার-ড্রপডাউন

— হেনরিডাব্লু

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

— István

আমি একটি বুটস্ট্র্যাপ নাবারের সাথে খাঁটি সিএসএস 3 ড্রপডাউন করেছি

— গথবার্জ

আপনার যদি সত্যিই প্রয়োজন হয় তবে দুবার ভাবেন? বুটস্ট্র্যাপ অভিযোজিত সাইটগুলির জন্য ব্যবহার করছে। এর অর্থ এটি স্পর্শ নিয়ন্ত্রণ সহ ডিভাইসেও ব্যবহৃত হবে। এ কারণেই এটি এটি ডিজাইন করা হয়েছে। টাচ স্ক্রিনগুলিতে কোনও "হোভার" নেই।

— Serj.by

হোভার সহ বুটস্ট্র্যাপ ড্রপডাউন

— স্লাগস্টার

Answer 1

আমি সর্বশেষ (v2.0.2) বুটস্ট্র্যাপ ফ্রেমওয়ার্কের ভিত্তিতে হোভার ড্রপডাউন মেনুতে একটি খাঁটি তৈরি করেছি যা একাধিক সাবমেনাসের জন্য সমর্থন করে এবং ভেবেছিল আমি এটি ভবিষ্যতের ব্যবহারকারীদের জন্য পোস্ট করব:

body {
  padding-top: 60px;
  padding-bottom: 40px;
}

.sidebar-nav {
  padding: 9px 0;
}

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a href="#" class="brand">Project name</a>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li class="dropdown">
            <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li>
                <a href="#">2-level Dropdown <i class="icon-arrow-right"></i></a>
                <ul class="dropdown-menu sub-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li class="nav-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="nav-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <form action="" class="navbar-search pull-left">
          <input type="text" placeholder="Search" class="search-query span2">
        </form>
        <ul class="nav pull-right">
          <li><a href="#">Link</a></li>
          <li class="divider-vertical"></li>
          <li class="dropdown">
            <a class="#" href="#">Menu</a>
          </li>
        </ul>
      </div>
      <!-- /.nav-collapse -->
    </div>
  </div>
</div>

<hr>

<ul class="nav nav-pills">
  <li class="active"><a href="#">Regular link</a></li>
  <li class="dropdown">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a>
    <ul class="dropdown-menu" id="menu1">
      <li>
        <a href="#">2-level Menu <i class="icon-arrow-right"></i></a>
        <ul class="dropdown-menu sub-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li class="nav-header">Nav header</li>
          <li><a href="#">Separated link</a></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="dropdown">
    <a href="#">Menu</a>
  </li>
  <li class="dropdown">
    <a href="#">Menu</a>
  </li>
</ul>

ডেমো

Comments

হোভার ইভেন্টের ড্রপডাউনগুলি না খোলার জন্য এটি বুটস্ট্র্যাপের একটি ডিজাইনের সিদ্ধান্ত ...

— caarlos0

খুব ভাল! আমি এও সরিয়েছি class="dropdown-toggle" data-toggle="dropdown"যাতে কেবল ঘোরাফেরা করতে হবে, ক্লিক না করে মেনুটি ট্রিগার হবে। মনে রাখবেন যে আপনি যখন প্রতিক্রিয়াশীল স্টাইলগুলি ব্যবহার করছেন তখন মেনুগুলি এখনও ডানদিকের উপরের ডানদিকে থাকা ছোট্ট বোতামটিতে প্রবাহিত হয়ে যায়, যা এখনও একটি ক্লিক দ্বারা ট্রিগার করা হয়। অনেক ধন্যবাদ!

— পিটিএম

ছোট ডিভাইসগুলিতে অটো নেমে যাওয়া (যেমন ফোন) এড়াতে এবং একাকীভাবে এটির একটি নূন্যতম প্রস্থ হিসাবে 768 dopx ডু @media (min-width: 768px) {.dropdown-menu li:hover .sub-menu {visibility: visible;}}এবং@media (min-width: 768px) {.dropdown:hover .dropdown-menu {display: block;}}

— ক্রিস

বাচ্চাদের সাথে ক্লিকযোগ্যযোগ্য লিঙ্ক তৈরি করতে, আপনাকে <a> ট্যাগে "ডেটা-টগল = 'ড্রপডাউন'" মুছে ফেলতে হবে।

— joan16v

এখানে একটি কোড যা নতুন বুটস্ট্র্যাপ 3 সংস্করণটির সাথে কাজ করে: jsfiddle.net/sgruenwald/2tt8f8xg

— স্টেফান

Answer 2

মেনুটি স্বয়ংক্রিয়ভাবে হোভারে নেমে আসার জন্য এটি বেসিক সিএসএস ব্যবহার করে অর্জন করতে পারে। আপনার নির্বাচককে লুকানো মেনু বিকল্পটিতে কাজ করতে হবে এবং তারপরে উপযুক্ত 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-এ ক্যারেটটি সরাতে আপনাকে কেবল অ্যাঙ্কর উপাদান <b class="caret"></b>থেকে এইচটিএমএল সরাতে হবে .dropdown-toggle:

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

বুটস্ট্র্যাপ 2 এবং কম

সংস্করণ 2-এ ক্যারেটটি সরাতে আপনার সিএসএসের আরও কিছুটা অন্তর্দৃষ্টি দরকার এবং আমি :afterছদ্ম উপাদানটি আরও বিশদে কীভাবে কাজ করে তা দেখার পরামর্শ দিই । টুইটার বুটস্ট্র্যাপ উদাহরণে তীরগুলি লক্ষ্য এবং মুছে ফেলার জন্য আপনার বোঝার পথে শুরু করার জন্য, আপনি নিম্নলিখিত সিএসএস নির্বাচক এবং কোড ব্যবহার করবেন:

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

আপনার পক্ষে কাজ করবে যদি আপনি কীভাবে এই কাজগুলি আরও খতিয়ে দেখেন এবং কেবল আমি যে উত্তরগুলি দিয়েছি তা ব্যবহার না করে।

@ কোকাআকাটকে এটি নির্দেশ করার জন্য ধন্যবাদ যে প্যারেন্ট হোভারে সাব মেনুগুলি দেখানো থেকে রোধ করতে আমরা ">" চাইল্ড কম্বিনেটরটি মিস করছি

Comments

এছাড়াও যোগ করতে হবে margin: 0;, অন্যথায় উপরে 1px মার্জিন .dropdown-menuবগী আচরণের কারণ।

— সালমান ভন আব্বাস

সহজ সমাধান, তবে পিতামাতার লিঙ্কটি এখনও ক্লিকযোগ্য নয়। আমি মূল থিম সহ সর্বশেষতম বুটস্ট্র্যাপ ব্যবহার করছি।

— ক্রুনাল

দ্রষ্টব্য: হ্যাঁ এটি করে - এটি কোনও ব্রাউজারে কাজ করবে যা টুইটার বুটস্ট্র্যাপ সমর্থন করে। @ জর্জেডিসন এটি বেসিক সিএসএস - আইই 8 এর কোন অংশটি সমর্থন করবে না? আপনার যদি সমস্যা হয় তবে একটি প্রশ্ন পোস্ট করুন, বিভ্রান্তিকর মন্তব্য নয়।

— আমার হেড

@ মাইহ্যাড হার্টস: আরও কিছু গবেষণার পরে - দেখা যাচ্ছে এটি সত্যই একটি বুটস্ট্র্যাপ বাগ এবং এটি পাঁচ দিন আগে ঠিক করা হয়েছিল।

— নাথান ওসমান

@ ক্রুনাল লিঙ্কটি ক্লিক করতে সক্ষম হতে আপনাকে অবশ্যই data-toggle="dropdown"বৈশিষ্ট্যটি সরিয়ে ফেলতে হবে ।

— ফেরিমাসন

Answer 3

"আমার হেড হার্টস" থেকে উত্তর ছাড়াও (যা দুর্দান্ত ছিল):

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

2 টি দীর্ঘতর সমস্যা রয়েছে:

1. ড্রপডাউন লিঙ্কে ক্লিক করা ড্রপডাউন-মেনু খুলবে। এবং এটি উন্মুক্ত থাকবে যদি না ব্যবহারকারী অন্য কোথাও ক্লিক করে, বা তার উপর পিছনে ঘুরে বেড়ায়, একটি বিশ্রী UI তৈরি করে।
2. ড্রপডাউন লিঙ্ক এবং ড্রপডাউন-মেনুটির মধ্যে 1px মার্জিন রয়েছে। আপনি যদি ড্রপডাউন এবং ড্রপডাউন-মেনুটির মধ্যে ধীরে ধীরে যান তবে এটি ড্রপডাউন-মেনুটিকে আড়াল করে তোলে causes

(1) এর সমাধানটি এনএভি লিঙ্ক থেকে "শ্রেণি" এবং "ডেটা-টগল" উপাদানগুলি সরিয়ে দিচ্ছে

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

এটি আপনাকে আপনার মূল পৃষ্ঠায় একটি লিঙ্ক তৈরি করার ক্ষমতাও দেয় - এটি ডিফল্ট প্রয়োগের মাধ্যমে সম্ভব ছিল না। আপনি ব্যবহারকারীকে যে পৃষ্ঠাটি দেখতে চান তার সাথে আপনি কেবল "#" প্রতিস্থাপন করতে পারেন।

(2) এর সমাধানটি .ড্রপডাউন-মেনু নির্বাচকের মার্জিন-টপ সরিয়ে দিচ্ছে

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

Comments

ইচ্ছাকৃত ক্লিকটি ঠিক করার জন্য, আমি কেবলমাত্র data-toggle="dropdown"বৈশিষ্ট্যটি সরিয়েছি , যা মনে হয় এটি কাজ করে।

— অ্যান্টনি ব্রিগেস

ন্যাভ-পিল বোতামগুলির জন্য সমাধান (2):.nav-pills .dropdown-menu { margin-top: 0px; }

— লরেন

সমস্যার সমাধানের জন্য আমি উপরে লিপড্রডাউন: হোভার> উল.ড্রপডাউন-মেনু

— আর্কিমিডিস ট্রাজানো

এনএভি লিঙ্কগুলি থেকে "শ্রেণি" এবং "ডেটা-টগল" বৈশিষ্ট্যগুলি সরিয়ে ফেলা এটি মোবাইল এবং ট্যাবলেটগুলিতে সূক্ষ্মভাবে কাজ করা বন্ধ করে দেয় :(

— মসিজাভা

যদি আপনি ডেটা-টগল = "ড্রপডাউন" বৈশিষ্ট্যটি সরিয়ে ফেলে থাকেন তবে আপনি কীবোর্ডটি ব্যবহার করে ড্রপ ডাউন মেনুটি প্রসারিত করতে পারবেন না। সুতরাং এটি 508 অনুগত হবে না। আপনি কীভাবে ক্লিকটি অক্ষম করতে পারেন তবে কীবোর্ড কার্যকারিতা রাখতে পারেন?

— duyn9uyen

Answer 4

আমি কিছুটা 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();
});

Comments

এটার মত. বুটস্ট্র্যাপ স্টাফ দিয়ে যেভাবেই হোক জিকিউরি ব্যবহার করছি এবং এখনও টাচস্ক্রিন ডিভাইসে ডিফল্ট 'ক্লিক' কার্যকারিতাটির অনুমতি দেয়।

— কাস্টার্ডে হাঁস

এটি ব্যবহৃত। আমি পছন্দ করি যে এটি মোবাইলের জন্য এখনও ক্লিকের কার্যকারিতাটিকে অনুমতি দেয় তবে ডেস্কটপগুলির জন্য হোভারটি নিখুঁত।

— স্টুয়ার্ট

আমি এটি ব্যবহার করেছি তবে এটি কোনও ড্রয়েডে নেই এমন ড্রপডাউনগুলির জন্য ব্যবহারযোগ্য হওয়ার জন্য এটি প্রসারিতও করেছি। আমি বিটিএন-গ্রুপ ডিভিতে ক্লাস ড্রপডাউন-হোভার যুক্ত করেছি এবং এই jQuery ফাইন্ডার ব্যবহার করেছি '(' ul.nav li.roddown, .pddown-hover ')। হোভার (ফাংশন () Thanks। ধন্যবাদ!

— ব্র্যান্ডন

এটি একটি সুন্দর এবং ছোট ব্যবহার করুন। সিএসএস সংস্করণ সাবমেনুকে প্রদর্শিত হতে দেয়নি, এবং 200 মিমি খুব দ্রুত ছিল তাই আমি এটিতে পরিবর্তন করেছি $('ul.nav li.dropdown').hover(function() { $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(); }, function() { $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut().hover(function() { $(this).stop(true, true); }); });: যখন সাবমেনু হ'ল স্টপ ফেইডআউট

— ড্যামিয়েন

এটি jqLite এর সাথে কাজ করছে বলে মনে হচ্ছে না যা অ্যাঙ্গুরালজগুলির সাথে অন্তর্ভুক্ত রয়েছে

— নুয়েডার

Answer 5

এখানে অনেক ভাল সমাধান আছে। তবে আমি ভেবেছিলাম যে আমি এগিয়ে যাব এবং অন্য বিকল্প হিসাবে আমার এখানে রাখব। এটি কেবলমাত্র একটি সরল jQuery স্নিপেট যা এটি কেবল ক্লিকের পরিবর্তে ড্রপডাউনগুলির জন্য হোভারকে সমর্থন করে যদি বুটস্ট্র্যাপটি করে। আমি এটি কেবলমাত্র সংস্করণ 3 দিয়ে পরীক্ষা করেছি তাই আমি জানি না এটি 2 সংস্করণে কাজ করে কিনা। এটি আপনার সম্পাদকের স্নিপেট হিসাবে সংরক্ষণ করুন এবং এটি কোনও কী-এর স্ট্রোকের সাথে রাখুন।

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

মূলত, এটি কেবল বলছে যে আপনি যখন ড্রপডাউন ক্লাসে ঘুরে দেখবেন তখন এটি এতে উন্মুক্ত শ্রেণিকে যুক্ত করবে। তারপরে এটি ঠিক কাজ করে। আপনি যখন ড্রপডাউন ক্লাস বা শিশু উল / লি'র সাথে পিতামাত্ত্বিক লি-র উপর চলাফেরা বন্ধ করেন, তখন এটি উন্মুক্ত শ্রেণিকে সরিয়ে দেয়। স্পষ্টতই, এটি অনেকগুলি সমাধানের মধ্যে একটি মাত্র এবং এটি কেবলমাত্র .ড্রপডনের নির্দিষ্ট উদাহরণগুলিতে কাজ করার জন্য আপনি এটিতে যুক্ত করতে পারেন। বা পিতা বা মাতা বা সন্তানের মধ্যে একটি রূপান্তর যুক্ত করুন।

Comments

দুর্দান্ত সমাধান! শীর্ষ লিঙ্কটি ক্লিকযোগ্যযোগ্য করার জন্য আমি লিঙ্ক থেকে ডেটা-টগল = "ড্রপডাউন" বৈশিষ্ট্যও সরিয়েছি।

— সের্গে

এটি একটি ভাল টিপ সার্জি। আমি সর্বদা নিশ্চিত করি যে শীর্ষ লিঙ্কটি কোথাও না গিয়ে যাতে এটি ট্যাবলেট এবং ফোনেও কাজ করে।

— স্টিরিওসায়েন্স

@ সার্জি আমি এটি করার পরামর্শ দিচ্ছি না। আপনি মোবাইল ব্যবহারকারীদের জন্য কার্যকারিতা ভঙ্গ করবেন। তারা একটি মেনু খোলার জন্য হোভার ফাংশনটি ব্যবহার করতে পারে না এবং এটিতে ক্লিক করতে সক্ষম হওয়া প্রয়োজন।

— পল

এটি টাচস্ক্রিনের সাথে পিছনে সামঞ্জস্যপূর্ণ থাকার সময়েও আশ্চর্যজনকভাবে সংক্ষিপ্ত এবং সহজ। আরও অনেক কিছু upvated করা উচিত।

— সর্বাধিক

এটি সত্যিই দুর্দান্ত দেখাচ্ছে। সিএসএস রূপান্তরগুলি ব্যবহার করে কীভাবে কিছুটা অ্যানিমেশন যোগ করবেন?

— ফ্রেড রোচা

Answer 6

কোডের তিন লাইনে কেবল আপনার সিএসএস শৈলীটি কাস্টমাইজ করুন

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

Answer 7

আপনার যদি 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>

এখানে একটি ডেমো রয়েছে

এই উত্তরটি @ মিশেল উত্তরের উপর নির্ভর করেছে , ড্রপডাউন মেনুটি সঠিকভাবে কাজ করতে আমি কিছু পরিবর্তন করেছি এবং কিছু সংযোজন করেছি

Comments

পারফেক্ট। অনেক ধন্যবাদ.

— antikbd

Answer 8

[আপডেট] প্লাগইনটি গিটহাবে রয়েছে এবং আমি কিছু উন্নতিতে কাজ করছি (যেমন কেবলমাত্র ডেটা-অ্যাট্রিবিউটগুলির সাথে ব্যবহার (কোনও জেএস প্রয়োজন নেই)। আমি নীচে কোডটি রেখেছি, তবে এটি গিটহাবের মতো নয়।

আমি পুরোপুরি সিএসএস সংস্করণটি পছন্দ করেছি, তবে এটি বন্ধ হওয়ার আগে দেরি হয়ে ভাল লাগছে, কারণ এটি সাধারণত একটি ভাল ব্যবহারকারীর অভিজ্ঞতা (যেমন একটি মাউস স্লিপের জন্য শাস্তি দেওয়া হয় না যা ড্রপডাউন ইত্যাদির বাইরে 1 পিক্সে যায় ইত্যাদি), এবং মন্তব্যে উল্লিখিত হিসাবে আপনি যখন মূল বোতাম ইত্যাদি থেকে নেমে যাচ্ছেন, তখন আপনাকে 1px মার্জিনের সাথে মোকাবিলা করতে হবে বা কখনও কখনও এনএইভি অপ্রত্যাশিতভাবে বন্ধ হয়ে যায় etc.

আমি একটি দ্রুত সামান্য প্লাগইন তৈরি করেছি যা আমি কয়েকটি সাইটে ব্যবহার করেছি এবং এটি দুর্দান্তভাবে কাজ করেছে। প্রতিটি ন্যাভ আইটেম স্বতন্ত্রভাবে পরিচালিত হয়, তাই তাদের নিজস্ব বিলম্বের টাইমারস ইত্যাদি রয়েছে etc.

জাতীয়

// outside the scope of the jQuery plugin to
// keep track of all dropdowns
var $allDropdowns = $();

// if instantlyCloseOthers is true, then it will instantly
// shut other nav items when a new one is hovered over
$.fn.dropdownHover = function(options) {

    // the element we really care about
    // is the dropdown-toggle's parent
    $allDropdowns = $allDropdowns.add(this.parent());

    return this.each(function() {
        var $this = $(this).parent(),
            defaults = {
                delay: 500,
                instantlyCloseOthers: true
            },
            data = {
                delay: $(this).data('delay'),
                instantlyCloseOthers: $(this).data('close-others')
            },
            options = $.extend(true, {}, defaults, options, data),
            timeout;

        $this.hover(function() {
            if(options.instantlyCloseOthers === true)
                $allDropdowns.removeClass('open');

            window.clearTimeout(timeout);
            $(this).addClass('open');
        }, function() {
            timeout = window.setTimeout(function() {
                $this.removeClass('open');
            }, options.delay);
        });
    });
};  

delayপরামিতি চমত্কার স্ব ব্যাখ্যামূলক, এবং instantlyCloseOthersহবে সঙ্গে সঙ্গে ঘনিষ্ঠ সব অন্যান্য dropdowns খোলা যখন আপনি হোভার একটি নতুন এক ধরে আছে।

খাঁটি সিএসএস নয়, তবে আশা করি এই শেষ মুহূর্তে অন্য কাউকে সাহায্য করবে (অর্থাত্ এটি পুরানো থ্রেড)।

আপনি যদি চান তবে আপনি #concrete5এই আইডির বিভিন্ন পদক্ষেপের মাধ্যমে এটির কাজ পেতে আমি ( আইআরসি সম্পর্কিত আলোচনায় ) যে বিভিন্ন প্রক্রিয়াটি পেরিয়েছি তা দেখতে পাবে: https://gist.github.com/3876924

পৃথক টাইমার ইত্যাদিকে সমর্থন করার জন্য প্লাগইন প্যাটার্ন পন্থাটি অনেক পরিষ্কার is

আরও জন্য ব্লগ পোস্ট দেখুন।

Answer 9

এটি বুটস্ট্র্যাপ 3 এ অন্তর্নির্মিত হয়েছে কেবল এটি আপনার সিএসএসে যুক্ত করুন:

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

Answer 10

এটি আমার পক্ষে কাজ করেছে:

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

Comments

মোবাইল সহ তবে - এটি আশ্চর্যজনক।

— র‌্যাডমেশন

মেনু এবং ড্রপডাউন-মেনু মধ্যে মার্জিন এটি অকেজো করে তোলে।

— antikbd

Answer 11

JQuery এর সাথে আরও ভাল:

jQuery('ul.nav li.dropdown').hover(function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).show();
  jQuery(this).addClass('open');
}, function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).hide();
  jQuery(this).removeClass('open');
});

Comments

আমি আপনার কোডটি jQuery('ul.nav li.dropdown').hover(function() { jQuery(this).closest('.dropdown-menu').stop(true, true).show(); jQuery(this).addClass('open'); }, function() { jQuery(this).closest('.dropdown-menu').stop(true, true).hide(); jQuery(this).removeClass('open'); });এমনভাবে পরিবর্তন করেছি যাতে সাবমেনু হোভারে প্রদর্শিত হবে না।

— farjam

এই কোডটি সর্বশেষতম প্রকাশের সাথে আর কাজ করবে না।

— পল

Answer 12

$().dropdown('toggle')হোভারে ড্রপডাউন মেনু টগল করতে আপনি ডিফল্ট পদ্ধতিটি ব্যবহার করতে পারেন :

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

Answer 13

আমার মতে সবচেয়ে ভাল উপায়টি এটির মতো:

;(function($, window, undefined) {
    // Outside the scope of the jQuery plugin to
    // keep track of all dropdowns
    var $allDropdowns = $();

    // If instantlyCloseOthers is true, then it will instantly
    // shut other nav items when a new one is hovered over
    $.fn.dropdownHover = function(options) {

        // The element we really care about
        // is the dropdown-toggle's parent
        $allDropdowns = $allDropdowns.add(this.parent());

        return this.each(function() {
            var $this = $(this),
                $parent = $this.parent(),
                defaults = {
                    delay: 500,
                    instantlyCloseOthers: true
                },
                data = {
                    delay: $(this).data('delay'),
                    instantlyCloseOthers: $(this).data('close-others')
                },
                settings = $.extend(true, {}, defaults, options, data),
                timeout;

            $parent.hover(function(event) {

                // So a neighbor can't open the dropdown
                if(!$parent.hasClass('open') && !$this.is(event.target)) {
                    return true;
                }

                if(settings.instantlyCloseOthers === true)
                    $allDropdowns.removeClass('open');

                window.clearTimeout(timeout);
                $parent.addClass('open');
            }, function() {
                timeout = window.setTimeout(function() {
                    $parent.removeClass('open');
                }, settings.delay);
            });

            // This helps with button groups!
            $this.hover(function() {
                if(settings.instantlyCloseOthers === true)
                    $allDropdowns.removeClass('open');

                window.clearTimeout(timeout);
                $parent.addClass('open');
            });

            // Handle submenus
            $parent.find('.dropdown-submenu').each(function(){
                var $this = $(this);
                var subTimeout;
                $this.hover(function() {
                    window.clearTimeout(subTimeout);
                    $this.children('.dropdown-menu').show();

                    // Always close submenu siblings instantly
                    $this.siblings().children('.dropdown-menu').hide();
                }, function() {
                    var $submenu = $this.children('.dropdown-menu');
                    subTimeout = window.setTimeout(function() {
                        $submenu.hide();
                    }, settings.delay);
                });
            });
        });
    };

    $(document).ready(function() {
        // apply dropdownHover to all elements with the data-hover="dropdown" attribute
        $('[data-hover="dropdown"]').dropdownHover();
    });
})(jQuery, this);

নমুনা মার্কআপ:

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="false">
        Account <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#">My Account</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Change Email</a></li>
        <li><a tabindex="-1" href="#">Change Password</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Logout</a></li>
    </ul>
</li>

Comments

এটি ক্যামেরন স্পিয়ারের কাজ, ভেবেছি আমি তাকে চিৎকার করব

— ব্লগ

Answer 14

এটি করার সর্বোত্তম উপায় হ'ল কেবলমাত্র হোভারের সাহায্যে বুটস্ট্র্যাপের ক্লিক ইভেন্টগুলিকে ট্রিগার করা। এইভাবে, এটি এখনও স্পর্শ ডিভাইস বন্ধুত্বপূর্ণ থাকা উচিত।

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

Comments

অযাচিত ফলাফল: মাউসিন, ক্লিক এবং মাউসআউট মেনুটি খোলা ছেড়ে দেবে। এটি আমি চাই না ...

— উইটস

এটি ব্যবহার করে এটি ড্রপডাউনটি খোলার জন্য বুটস্ট্র্যাপ ফাংশনটি চালায়, এই ফাংশনটি অন্যান্য অনেকগুলি কাজ করে, যেমন আরিয়া-প্রসারিত = "সত্য"

— ফরহাদ সখেই

Answer 15

কেবল যুক্ত করতে চাই, আপনার যদি একাধিক ড্রপডাউন থাকে (যেমন আমি করি) আপনার উচিত:

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

এবং এটি সঠিকভাবে কাজ করবে।

Comments

আমার .ড্রপডাউন-মেনুটির margin: 2px 0 0;অর্থ উপরে থেকে একটি ধীর মাউসএন্টারটি মেনুটি অকালে লুকিয়ে রেখেছিল। ul.dropdown-menu{ margin-top: 0; }

— অ্যালাস্টার

Answer 16

আমি এটি নিম্নলিখিত হিসাবে পরিচালনা করেছি:

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

আমি আশা করি এটা কারো সাহায্যে লাগবে...

Answer 17

মার্ডন-শীর্ষটিও যুক্ত করা হয়েছে: .ড্রপডাউন-মেনুতে বুটস্ট্র্যাপ সিএসএস মার্জিনটি পুনরায় সেট করতে তাই ব্যবহারকারী যখন ড্রপ ডাউন মেনু থেকে মেনু তালিকায় ধীরে ধীরে ঘুরে বেড়ায় মেনু তালিকাটি অদৃশ্য হয় না।

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

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

Comments

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

— নিকোলাস জ্যানেল

Answer 18

এটি সম্ভবত একটি মূ .় ধারণা, তবে কেবল নীচের দিকে নির্দেশ করা তীরটি সরাতে আপনি মুছে ফেলতে পারেন

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

এটি আপ পয়েন্টিংয়ের জন্য কিছুই করে না, যদিও ...

Answer 19

আমি বুটস্ট্র্যাপ 3 ড্রপডাউন হোভার কার্যকারিতার জন্য একটি সঠিক প্লাগইন প্রকাশ করেছি , যাতে আপনি dropdown-toggleউপাদানটিতে ক্লিক করার পরে কী ঘটে তা সংজ্ঞায়িত করতে পারেন (ক্লিকটি অক্ষম করা যেতে পারে):

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

---

ইতিমধ্যে অনেকগুলি সমাধান থাকলে আমি কেন এটি তৈরি করেছি?

আমার সমস্ত বিদ্যমান বিদ্যমান সমাধানগুলির সাথে সমস্যা ছিল। সাধারণ সিএসএসগুলি .openক্লাসটি ব্যবহার করছে না .dropdown, সুতরাং যখন ড্রপ-ডাউনটি দৃশ্যমান হবে তখন ড্রপ-ডাউন টগল উপাদানটিতে কোনও প্রতিক্রিয়া হবে না।

জেএসগুলি ক্লিক করার ক্ষেত্রে হস্তক্ষেপ করছে .dropdown-toggle, সুতরাং ড্রপডাউনটি হোভারের উপরে প্রদর্শিত হবে, তারপরে একটি খোলা ড্রপ-ডাউন-এ ক্লিক করার পরে এটি লুকিয়ে রাখবে এবং মাউসটিকে সরিয়ে নিয়ে যাওয়ার পরে আবার দেখাতে ড্রপ-ডাউনটি ট্রিগার করবে। কিছু জেএস সমাধান আইওএসের সামঞ্জস্যতা ভঙ্গ করছে, কিছু প্লাগইন আধুনিক ডেস্কটপ ব্রাউজারগুলিতে কাজ করছে না যা স্পর্শ ইভেন্টগুলিকে সমর্থন করছে।

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

Comments

Github.com/vadikom/smartmenus সম্পর্কে আপনার মতামত কী ? আমি সিদ্ধান্ত নিতে পারি না, দুটি গ্রন্থাগারই সত্যিই ভাল বলে মনে হচ্ছে।

— সিএসবা তোথ

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

— ইস্তভান উজ্জ্ব-ম্যাসেজোরোস

ধন্যবাদ। আমি দেখতে পাচ্ছি যে স্মার্টম্যানুর কোডটি খুব বিস্তৃত এবং এর মধ্যে অনেকগুলি সিএসএস রয়েছে। এখন পর্যন্ত আমি সাথে গিয়েছিলাম bootstrap-dropdown-hover, কারণ এটি কাজটি আরও কমপ্যাক্ট বলে মনে হচ্ছে। আমি বাম পাশের নাবার সহ একটি ল্যান্ডিং সাইট তৈরি করছি।

— সিএসবা তোথ

Answer 20

মাউসওভার (কেবলমাত্র ডেস্কটপ) এ সাবমেনু খুলতে এই কোডটি ব্যবহার করুন:

$('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), সাবমেনু পুরো স্ক্রীন প্রস্থটি মোবাইলে নেবে।

Comments

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

— ক্রিস 22

ঠিক আছে, এটি বোধগম্য হয় এবং আমি আপনার প্রস্তাব মতো আপনার সমাধানটি চালানোর চেষ্টা করব। ধন্যবাদ!

— ক্রিস 22

এই সেরা পদ্ধতিটি ব্যবহার করুন: @ ফল্টার

— ফরহাদ সাখাই

Answer 21

$('.dropdown').hover(function(e){$(this).addClass('open')})

Comments

আপনার উত্তরের জন্য কিছু বিশদ সরবরাহ করুন।

— আর্নল্ড ড্যানিয়েলস

Answer 22

এটি আপগুলি লুকিয়ে রাখবে

.navbar .dropdown-menu:before {
   display:none;
}
.navbar .dropdown-menu:after {
   display:none;
}

Answer 23

এটি ড্রপ ডাউনগুলি এবং তাদের কেরেটগুলি যদি কোনও ট্যাবলেটের চেয়ে ছোট হয় তবে এটি লুকিয়ে রাখা উচিত।

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

Comments

কেন আপনি এটি আড়াল করতে চান? সাবমেনুতে থাকা লিঙ্কগুলিতে এখন মোবাইল ব্যবহারকারীদের অ্যাক্সেস করার কোনও উপায় নেই। মোবাইল ডিভাইসে হোভার ইফেক্টটি বন্ধ করা এবং ড্রপডাউন মেনুটি অক্ষত রাখা আরও ভাল। তারা এটিকে ক্লিক করে এটি খুলতে পারে।

— পল

Answer 24

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

Answer 25

সংস্করণ 2 এর জন্য খুব সহজ সমাধান, কেবল সিএসএস। মোবাইল এবং ট্যাবলেটের জন্য একই বন্ধুত্বপূর্ণ কার্যকারিতা রাখে।

@media (min-width: 980px) {
    .dropdown:hover .dropdown-menu {
       display: block;
    }
}

Comments

এটি এমন কিছু থিমের জন্য দুর্দান্ত কাজ করে না যেখানে মেনু আইটেম এবং ড্রপডাউন এর মধ্যে ব্যবধান রয়েছে। এই ফাঁক দিয়ে মাউস সরে গেলে মেনুটি অদৃশ্য হয়ে যাবে।

— 22d

Answer 26

এই স্ক্রিপ্টের সাহায্যে বুটস্ট্র্যাপ.জেএস ওভাররাইট করুন।

jQuery(document).ready(function ($) {
$('.navbar .dropdown').hover(function() {
    $(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
    var na = $(this)
    na.find('.dropdown-menu').first().stop(true, true).delay(100).slideUp('fast', function(){ na.removeClass('extra-nav-class') })
});

$('.dropdown-submenu').hover(function() {
    $(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
    var na = $(this)
    na.find('.dropdown-menu').first().stop(true, true).delay(100).slideUp('fast', function(){ na.removeClass('extra-nav-class') })
});

}); 

Answer 27

এখানে আমার কৌশলটি যা আপনি মেনু বা টগল বোতামে ঘোরাফেরা বন্ধ করার পরে মেনুটি বন্ধ হওয়ার আগে কিছুটা বিলম্ব যুক্ত করে। <button>আপনি সাধারণত প্রদর্শন করে এনএভি মেনু ক্লিক করুন করবে #nav_dropdown।

$(function() {
  var delay_close_it, nav_menu_timeout, open_it;
  nav_menu_timeout = void 0;
  open_it = function() {
    if (nav_menu_timeout) {
      clearTimeout(nav_menu_timeout);
      nav_menu_timeout = null;
    }
    return $('.navbar .dropdown').addClass('open');
  };
  delay_close_it = function() {
    var close_it;
    close_it = function() {
      return $('.navbar .dropdown').removeClass('open');
    };
    return nav_menu_timeout = setTimeout(close_it, 500);
  };
  $('body').on('mouseover', '#nav_dropdown, #nav_dropdown *', open_it).on('mouseout', '#nav_dropdown', delay_close_it);
  return $('body').on('mouseover', '.navbar .dropdown .dropdown-menu', open_it).on('mouseout', '.navbar .dropdown .dropdown-menu', delay_close_it);
});

Answer 28

সুধারার জবাব বাড়ানোর জন্য , এক্সএস প্রদর্শনের প্রস্থে যখন হোভারটি রোধ করা যায় তখন আমি মিডিয়া ক্যোয়ারিতে এটি গুটিয়ে রাখি ...

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

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

এছাড়াও মার্কআপে ক্যারেটের প্রয়োজন হয় না, লি জন্য কেবল ড্রপডাউন ক্লাস ।

Answer 29

এটি ওয়ার্ডপ্রেস বুটস্ট্র্যাপের জন্য কাজ করে:

.navbar .nav > li > .dropdown-menu:after,
.navbar .nav > li > .dropdown-menu:before {
    content: none;
}

Answer 30

সুতরাং আপনার এই কোডটি রয়েছে:

<a class="dropdown-toggle" data-toggle="dropdown">Show menu</a>

<ul class="dropdown-menu" role="menu">
    <li>Link 1</li>
    <li>Link 2</li> 
    <li>Link 3</li>                                             
</ul>

সাধারণত এটি একটি ক্লিক ইভেন্টে কাজ করে এবং আপনি চান এটি একটি হোভার ইভেন্টে কাজ করে। এটি খুব সহজ, কেবল এই জাভাস্ক্রিপ্ট / jQuery কোডটি ব্যবহার করুন:

$(document).ready(function () {
    $('.dropdown-toggle').mouseover(function() {
        $('.dropdown-menu').show();
    })

    $('.dropdown-toggle').mouseout(function() {
        t = setTimeout(function() {
            $('.dropdown-menu').hide();
        }, 100);

        $('.dropdown-menu').on('mouseenter', function() {
            $('.dropdown-menu').show();
            clearTimeout(t);
        }).on('mouseleave', function() {
            $('.dropdown-menu').hide();
        })
    })
})

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

আমি অনেক প্রকল্পে এই কোডটি ব্যবহার করেছি, যদি এটি ব্যবহার করে আপনার কোনও সমস্যা দেখা দেয় তবে নির্দ্বিধায় আমাকে প্রশ্ন জিজ্ঞাসা করুন।