মোবাইলে মেনু / নববারে বুটস্ট্র্যাপ 3 স্লাইড [বন্ধ]

Question

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

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

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

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

Comments

আপনার বর্তমান সিএসএস / এইচটিএমএল মার্কআপ অন্তর্ভুক্ত করুন। এছাড়াও, "কোড জিজ্ঞাসা করা প্রশ্নাবলীর অবশ্যই সমস্যার সমাধানের ন্যূনতম বোঝার প্রদর্শন করতে হবে attemp চেষ্টা করা সমাধান, কেন তারা কাজ করেনি এবং প্রত্যাশিত ফলাফল অন্তর্ভুক্ত করুন।"

— শুকনো লং

আমি সম্প্রতি এটি করেছি, অনেক কিছুই ঘটতে হবে বলে অনেক কিছুই জড়িত রয়েছে, বিশেষত যদি নেভিগেশনটি স্থির থাকে, যখন এটি স্লাইড হয় বা আপনি দীর্ঘতর মেনুতে পৌঁছাতে পারবেন না তখন এটি সমাধান করতে হবে। আমি সর্বদা বুস্টারপ ব্যবহার করি তবে তাদের মেনু নয়, আপনি নিজেরাই মেনুগুলিতে স্লাইড যুক্ত করতে পারেন এবং সেগুলিও সংশোধন করতে পারেন। jsbin.com/eHAfIhI/1/edit

— খ্রিস্টিনা

আপনি যখন সিএসএসের দিকে লক্ষ্য করবেন তখন লক্ষ্য করবেন যে নূন্যতম প্রস্থটি 768px ডিফল্ট বুটস্ট্র্যাপে কিক করে। লক্ষ্য করুন যে ফর্মটিতে সর্বোচ্চ-প্রস্থে সামঞ্জস্য করা হয়েছিল কারণ এটি অন্যথায় কৃপণ দেখাবে। সবচেয়ে ছোট ডিভাইসটি 240px হওয়ায় প্লাস শতাংশগুলি ব্যবহৃত হত।

— ক্রিস্টিনা

একটি জনপ্রিয় বুটস্ট্র্যাপ কাঁটাচামচ আছে - জেসি বুটস্ট্র্যাপ। কাঁটাচামচটি বক্সের বাইরে বিভিন্ন অফ-ক্যানভাস বাস্তবায়ন হয়েছে (স্লাইড-ইন, ধাক্কা, প্রকাশ): jasny.github.io/bootstrap/javascript/#offcanvas

— পেট্রো ক্লিফ

এটি একটি ইউআই প্যাটার্ন যা ড্রয়ার ম্যাটারিয়াল.আইও

— ব্রুনো পেরেস

Answer 1

এটি আমার নিজের প্রকল্পের জন্য ছিল এবং আমি এটি এখানেও ভাগ করে নিচ্ছি।

ডেমো: http://jsbin.com/OjOTIGaP/1/edit

এইটিকে 3.2 এর পরে সমস্যা হয়েছিল, তাই নীচের একজনটি আপনার পক্ষে আরও ভাল কাজ করতে পারে:

https://jsbin.com/seqola/2/edit --- ভাল সংস্করণ, কিছুটা

---

সিএসএস

/* adjust body when menu is open */
body.slide-active {
    overflow-x: hidden
}
/*first child of #page-content so it doesn't shift around*/
.no-margin-top {
    margin-top: 0px!important
}
/*wrap the entire page content but not nav inside this div if not a fixed top, don't add any top padding */
#page-content {
    position: relative;
    padding-top: 70px;
    left: 0;
}
#page-content.slide-active {
    padding-top: 0
}
/* put toggle bars on the left :: not using button */
#slide-nav .navbar-toggle {
    cursor: pointer;
    position: relative;
    line-height: 0;
    float: left;
    margin: 0;
    width: 30px;
    height: 40px;
    padding: 10px 0 0 0;
    border: 0;
    background: transparent;
}
/* icon bar prettyup - optional */
#slide-nav .navbar-toggle > .icon-bar {
    width: 100%;
    display: block;
    height: 3px;
    margin: 5px 0 0 0;
}
#slide-nav .navbar-toggle.slide-active .icon-bar {
    background: orange
}
.navbar-header {
    position: relative
}
/* un fix the navbar when active so that all the menu items are accessible */
.navbar.navbar-fixed-top.slide-active {
    position: relative
}
/* screw writing importants and shit, just stick it in max width since these classes are not shared between sizes */
@media (max-width:767px) { 
    #slide-nav .container {
        margin: 0;
        padding: 0!important;
    }
    #slide-nav .navbar-header {
        margin: 0 auto;
        padding: 0 15px;
    }
    #slide-nav .navbar.slide-active {
        position: absolute;
        width: 80%;
        top: -1px;
        z-index: 1000;
    }
    #slide-nav #slidemenu {
        background: #f7f7f7;
        left: -100%;
        width: 80%;
        min-width: 0;
        position: absolute;
        padding-left: 0;
        z-index: 2;
        top: -8px;
        margin: 0;
    }
    #slide-nav #slidemenu .navbar-nav {
        min-width: 0;
        width: 100%;
        margin: 0;
    }
    #slide-nav #slidemenu .navbar-nav .dropdown-menu li a {
        min-width: 0;
        width: 80%;
        white-space: normal;
    }
    #slide-nav {
        border-top: 0
    }
    #slide-nav.navbar-inverse #slidemenu {
        background: #333
    }
    /* this is behind the navigation but the navigation is not inside it so that the navigation is accessible and scrolls*/
    #slide-nav #navbar-height-col {
        position: fixed;
        top: 0;
        height: 100%;
        width: 80%;
        left: -80%;
        background: #eee;
    }
    #slide-nav.navbar-inverse #navbar-height-col {
        background: #333;
        z-index: 1;
        border: 0;
    }
    #slide-nav .navbar-form {
        width: 100%;
        margin: 8px 0;
        text-align: center;
        overflow: hidden;
        /*fast clearfixer*/
    }
    #slide-nav .navbar-form .form-control {
        text-align: center
    }
    #slide-nav .navbar-form .btn {
        width: 100%
    }
}
@media (min-width:768px) { 
    #page-content {
        left: 0!important
    }
    .navbar.navbar-fixed-top.slide-active {
        position: fixed
    }
    .navbar-header {
        left: 0!important
    }
}

এইচটিএমএল

 <div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="slide-nav">
  <div class="container">
   <div class="navbar-header">
    <a class="navbar-toggle"> 
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
     </a>
    <a class="navbar-brand" href="#">Project name</a>
   </div>
   <div id="slidemenu">
     
          <form class="navbar-form navbar-right" role="form">
            <div class="form-group">
              <input type="search" placeholder="search" class="form-control">
            </div>
            <button type="submit" class="btn btn-primary">Search</button>
          </form>
     
    <ul class="nav navbar-nav">
     <li class="active"><a href="#">Home</a></li>
     <li><a href="#about">About</a></li>
     <li><a href="#contact">Contact</a></li>
     <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-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="dropdown-header">Nav header</li>
       <li><a href="#">Separated link</a></li>
       <li><a href="#">One more separated link</a></li>
       <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="dropdown-header">Nav header</li>
       <li><a href="#">Separated link</a></li>
       <li><a href="#">One more separated link</a></li>
       <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="dropdown-header">Nav header</li>
       <li><a href="#">Separated link test long title goes here</a></li>
       <li><a href="#">One more separated link</a></li>
      </ul>
     </li>
    </ul>
          
   </div>
  </div>
 </div>

jQuery এর

$(document).ready(function () {


    //stick in the fixed 100% height behind the navbar but don't wrap it
    $('#slide-nav.navbar .container').append($('<div id="navbar-height-col"></div>'));

    // Enter your ids or classes
    var toggler = '.navbar-toggle';
    var pagewrapper = '#page-content';
    var navigationwrapper = '.navbar-header';
    var menuwidth = '100%'; // the menu inside the slide menu itself
    var slidewidth = '80%';
    var menuneg = '-100%';
    var slideneg = '-80%';


    $("#slide-nav").on("click", toggler, function (e) {

        var selected = $(this).hasClass('slide-active');

        $('#slidemenu').stop().animate({
            left: selected ? menuneg : '0px'
        });

        $('#navbar-height-col').stop().animate({
            left: selected ? slideneg : '0px'
        });

        $(pagewrapper).stop().animate({
            left: selected ? '0px' : slidewidth
        });

        $(navigationwrapper).stop().animate({
            left: selected ? '0px' : slidewidth
        });


        $(this).toggleClass('slide-active', !selected);
        $('#slidemenu').toggleClass('slide-active');


        $('#page-content, .navbar, body, .navbar-header').toggleClass('slide-active');


    });


    var selected = '#slidemenu, #page-content, body, .navbar, .navbar-header';


    $(window).on("resize", function () {

        if ($(window).width() > 767 && $('.navbar-toggle').is(':hidden')) {
            $(selected).removeClass('slide-active');
        }


    });

});

Comments

এই প্রতিক্রিয়াশীল করার যে কোনও উপায়ে যাতে কোনও ডেস্কটপে নাভবারটি একটি স্প্ল্যাশ গ্রাফিকের অধীনে প্রদর্শিত হয় তবে মোবাইল ডিভাইসে, নাবারটি এই সাইডবারের মতো দেখায়?

— কেনেই

হ্যাঁ. আপনি ন্যূনতম প্রস্থের মধ্যে ডিজাইন করবেন

— ক্রিস্টিনা

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

— ক্রিস্টিনা

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

— আর্মিন

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

— ম্যানুয়েল হার্নান্দেজ

Answer 2

বুটস্ট্র্যাপ 4

বুটস্ট্র্যাপ 4 এ একটি প্রতিক্রিয়াশীল নাবার সাইডবার "ড্রয়ার" তৈরি করবেন?
বুটস্ট্র্যাপের অনুভূমিক মেনুটি সাইডম্যানুতে পতিত হবে

বুটস্ট্র্যাপ 3

আমি মনে করি আপনি যা খুঁজছেন তা সাধারণত "অফ-ক্যানভাস" লেআউট হিসাবে পরিচিত। অফিসিয়াল বুটস্ট্র্যাপ ডক্সের স্ট্যান্ডার্ড অফ-ক্যানভাসের উদাহরণ এখানে রয়েছে: http://getbootstrap.com /

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

http://www.bootstrapzero.com/bootstrap-template/off-canvas-sidebar http://www.bootstrapzero.com/bootstrap-template/facebook

Comments

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

— আরমিন

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

— আর্মিন

এগুলি সাহায্য করে খুশী। আমি নিশ্চিত যে আপনি যা চান তা অর্জন সম্ভব, তবে এটি কিছুটা টুইট করবে। আমি বুটপ্লাই ( বুটপ্লাই . com/ 96266 ) এর সাথে খেলার প্রস্তাব দিই । মিডিয়া ক্যোয়ারী সামঞ্জস্য করে আপনার সাইডবারের জন্য ব্রেকপয়েন্টটি সামঞ্জস্য করতে সক্ষম হতে হবে @media screen and (max-width: 768px) {.. সিএসএসে।

— জিম

Answer 3

প্লাগিন ছাড়া, আমরা এটি করতে পারি; মোবাইলের জন্য স্লাইড টগল সহ মোবাইল ফোনের জন্য বুটস্ট্র্যাপ মাল্টি-লেভেল জবাবদিহি মেনু:

$('[data-toggle="slide-collapse"]').on('click', function() {
  $navMenuCont = $($(this).data('target'));
  $navMenuCont.animate({
    'width': 'toggle'
  }, 350);
  $(".menu-overlay").fadeIn(500);
});

$(".menu-overlay").click(function(event) {
  $(".navbar-toggle").trigger("click");
  $(".menu-overlay").fadeOut(500);
});

// if ($(window).width() >= 767) {
//     $('ul.nav li.dropdown').hover(function() {
//         $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
//     }, function() {
//         $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
//     });

//     $('ul.nav li.dropdown-submenu').hover(function() {
//         $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
//     }, function() {
//         $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
//     });


//     $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
//         event.preventDefault();
//         event.stopPropagation();
//         $(this).parent().siblings().removeClass('open');
//         $(this).parent().toggleClass('open');
//         $('b', this).toggleClass("caret caret-up");
//     });
// }

// $(window).resize(function() {
//     if( $(this).width() >= 767) {
//         $('ul.nav li.dropdown').hover(function() {
//             $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
//         }, function() {
//             $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
//         });
//     }
// });

var windowWidth = $(window).width();
if (windowWidth > 767) {
  // $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
  //     event.preventDefault();
  //     event.stopPropagation();
  //     $(this).parent().siblings().removeClass('open');
  //     $(this).parent().toggleClass('open');
  //     $('b', this).toggleClass("caret caret-up");
  // });

  $('ul.nav li.dropdown').hover(function() {
    $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
  }, function() {
    $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
  });

  $('ul.nav li.dropdown-submenu').hover(function() {
    $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
  }, function() {
    $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
  });


  $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
    event.preventDefault();
    event.stopPropagation();
    $(this).parent().siblings().removeClass('open');
    $(this).parent().toggleClass('open');
    // $('b', this).toggleClass("caret caret-up");
  });
}
if (windowWidth < 767) {
  $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
    event.preventDefault();
    event.stopPropagation();
    $(this).parent().siblings().removeClass('open');
    $(this).parent().toggleClass('open');
    // $('b', this).toggleClass("caret caret-up");
  });
}

// $('.dropdown a').append('Some text');

@media only screen and (max-width: 767px) {
  #slide-navbar-collapse {
    position: fixed;
    top: 0;
    left: 15px;
    z-index: 999999;
    width: 280px;
    height: 100%;
    background-color: #f9f9f9;
    overflow: auto;
    bottom: 0;
    max-height: inherit;
  }
  .menu-overlay {
    display: none;
    background-color: #000;
    bottom: 0;
    left: 0;
    opacity: 0.5;
    filter: alpha(opacity=50);
    /* IE7 & 8 */
    position: fixed;
    right: 0;
    top: 0;
    z-index: 49;
  }
  .navbar-fixed-top {
    position: initial !important;
  }
  .navbar-nav .open .dropdown-menu {
    background-color: #ffffff;
  }
  ul.nav.navbar-nav li {
    border-bottom: 1px solid #eee;
  }
  .navbar-nav .open .dropdown-menu .dropdown-header,
  .navbar-nav .open .dropdown-menu>li>a {
    padding: 10px 20px 10px 15px;
  }
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

li.dropdown a {
  display: block;
  position: relative;
}

li.dropdown>a:before {
  content: "\f107";
  font-family: FontAwesome;
  position: absolute;
  right: 6px;
  top: 5px;
  font-size: 15px;
}

li.dropdown-submenu>a:before {
  content: "\f107";
  font-family: FontAwesome;
  position: absolute;
  right: 6px;
  top: 10px;
  font-size: 15px;
}

ul.dropdown-menu li {
  border-bottom: 1px solid #eee;
}

.dropdown-menu {
  padding: 0px;
  margin: 0px;
  border: none !important;
}

li.dropdown.open {
  border-bottom: 0px !important;
}

li.dropdown-submenu.open {
  border-bottom: 0px !important;
}

li.dropdown-submenu>a {
  font-weight: bold !important;
}

li.dropdown>a {
  font-weight: bold !important;
}

.navbar-default .navbar-nav>li>a {
  font-weight: bold !important;
  padding: 10px 20px 10px 15px;
}

li.dropdown>a:before {
  content: "\f107";
  font-family: FontAwesome;
  position: absolute;
  right: 6px;
  top: 9px;
  font-size: 15px;
}

@media (min-width: 767px) {
  li.dropdown-submenu>a {
    padding: 10px 20px 10px 15px;
  }
  li.dropdown>a:before {
    content: "\f107";
    font-family: FontAwesome;
    position: absolute;
    right: 3px;
    top: 12px;
    font-size: 15px;
  }
}

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  </head>

  <body>
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="slide-collapse" data-target="#slide-navbar-collapse" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
          <a class="navbar-brand" href="#">Brand</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="slide-navbar-collapse">
          <ul class="nav navbar-nav">
            <li><a href="#">Link <span class="sr-only">(current)</span></a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
                <li class="dropdown-submenu">
                  <a href="#" data-toggle="dropdown">SubMenu 1</span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">3rd level dropdown</a></li>
                    <li><a href="#">3rd level dropdown</a></li>
                    <li><a href="#">3rd level dropdown</a></li>
                    <li><a href="#">3rd level dropdown</a></li>
                    <li><a href="#">3rd level dropdown</a></li>
                    <li class="dropdown-submenu">
                      <a href="#" data-toggle="dropdown">SubMenu 2</span></a>
                      <ul class="dropdown-menu">
                        <li><a href="#">3rd level dropdown</a></li>
                        <li><a href="#">3rd level dropdown</a></li>
                        <li><a href="#">3rd level dropdown</a></li>
                        <li><a href="#">3rd level dropdown</a></li>
                        <li><a href="#">3rd level dropdown</a></li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li><a href="#">Link</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <!-- /.navbar-collapse -->
      </div>
      <!-- /.container-fluid -->
    </nav>
    <div class="menu-overlay"></div>
    <div class="col-md-12">
      <h1>Resize the window to see the result</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non bibendum sem, et sodales massa. Proin quis velit vel nisl imperdiet rhoncus vitae id tortor. Praesent blandit tellus in enim sollicitudin rutrum. Integer ullamcorper, augue ut tristique
        ultrices, augue magna placerat ex, ac varius mauris ante sed dui. Fusce ullamcorper vulputate magna, a malesuada nunc pellentesque sit amet. Donec posuere placerat erat, sed ornare enim aliquam vitae. Nullam pellentesque auctor augue, vel commodo
        dolor porta ac. Sed libero eros, fringilla ac lorem in, blandit scelerisque lorem. Suspendisse iaculis justo velit, sit amet fringilla velit ornare a. Sed consectetur quam eget ipsum luctus bibendum. Ut nisi lectus, viverra vitae ipsum sit amet,
        condimentum condimentum neque. In maximus suscipit eros ut eleifend. Donec venenatis mauris nulla, ac bibendum metus bibendum vel.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non bibendum sem, et sodales massa. Proin quis velit vel nisl imperdiet rhoncus vitae id tortor. Praesent blandit tellus in enim sollicitudin rutrum. Integer ullamcorper, augue ut tristique
        ultrices, augue magna placerat ex, ac varius mauris ante sed dui. Fusce ullamcorper vulputate magna, a malesuada nunc pellentesque sit amet. Donec posuere placerat erat, sed ornare enim aliquam vitae. Nullam pellentesque auctor augue, vel commodo
        dolor porta ac. Sed libero eros, fringilla ac lorem in, blandit scelerisque lorem. Suspendisse iaculis justo velit, sit amet fringilla velit ornare a. Sed consectetur quam eget ipsum luctus bibendum. Ut nisi lectus, viverra vitae ipsum sit amet,
        condimentum condimentum neque. In maximus suscipit eros ut eleifend. Donec venenatis mauris nulla, ac bibendum metus bibendum vel.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non bibendum sem, et sodales massa. Proin quis velit vel nisl imperdiet rhoncus vitae id tortor. Praesent blandit tellus in enim sollicitudin rutrum. Integer ullamcorper, augue ut tristique
        ultrices, augue magna placerat ex, ac varius mauris ante sed dui. Fusce ullamcorper vulputate magna, a malesuada nunc pellentesque sit amet. Donec posuere placerat erat, sed ornare enim aliquam vitae. Nullam pellentesque auctor augue, vel commodo
        dolor porta ac. Sed libero eros, fringilla ac lorem in, blandit scelerisque lorem. Suspendisse iaculis justo velit, sit amet fringilla velit ornare a. Sed consectetur quam eget ipsum luctus bibendum. Ut nisi lectus, viverra vitae ipsum sit amet,
        condimentum condimentum neque. In maximus suscipit eros ut eleifend. Donec venenatis mauris nulla, ac bibendum metus bibendum vel.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non bibendum sem, et sodales massa. Proin quis velit vel nisl imperdiet rhoncus vitae id tortor. Praesent blandit tellus in enim sollicitudin rutrum. Integer ullamcorper, augue ut tristique
        ultrices, augue magna placerat ex, ac varius mauris ante sed dui. Fusce ullamcorper vulputate magna, a malesuada nunc pellentesque sit amet. Donec posuere placerat erat, sed ornare enim aliquam vitae. Nullam pellentesque auctor augue, vel commodo
        dolor porta ac. Sed libero eros, fringilla ac lorem in, blandit scelerisque lorem. Suspendisse iaculis justo velit, sit amet fringilla velit ornare a. Sed consectetur quam eget ipsum luctus bibendum. Ut nisi lectus, viverra vitae ipsum sit amet,
        condimentum condimentum neque. In maximus suscipit eros ut eleifend. Donec venenatis mauris nulla, ac bibendum metus bibendum vel.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non bibendum sem, et sodales massa. Proin quis velit vel nisl imperdiet rhoncus vitae id tortor. Praesent blandit tellus in enim sollicitudin rutrum. Integer ullamcorper, augue ut tristique
        ultrices, augue magna placerat ex, ac varius mauris ante sed dui. Fusce ullamcorper vulputate magna, a malesuada nunc pellentesque sit amet. Donec posuere placerat erat, sed ornare enim aliquam vitae. Nullam pellentesque auctor augue, vel commodo
        dolor porta ac. Sed libero eros, fringilla ac lorem in, blandit scelerisque lorem. Suspendisse iaculis justo velit, sit amet fringilla velit ornare a. Sed consectetur quam eget ipsum luctus bibendum. Ut nisi lectus, viverra vitae ipsum sit amet,
        condimentum condimentum neque. In maximus suscipit eros ut eleifend. Donec venenatis mauris nulla, ac bibendum metus bibendum vel.
      </p>
    </div>

  </body>

</html>

রেফারেন্স জেএস ফিডাল