সাইডবার ডেস্কটপে ডিফল্ট বাই খোলে, মোবাইলে বন্ধ

9

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

<nav class="menu menu-open" id="theMenu">
      <div class="menu-wrap">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <i class="fa fa-bars menu-close d-lg-none" id="menu-toggle"></i>
            </button>
          <div id="menu-logo">
            <img src="Final_Logo.png" width="210" height="214" alt="">
          </div>
          <div id="navbarToggleExternalContent">
          <ul id="main-menu">
              <a href="#">Home</a>
              <a href="#">About</a>
              <a href="#">Writing</a>
              <a href="#">Events</a>
              <a href="#">Speaking</a>
              <a href="#">Music</a>
          </ul>
          <ul id="social-icons">
              <li class="facebook"><a href="#"><i class="fab fa-facebook fa-2x"></i></a></li>
              <li class="twitter"><a href="#"><i class="fab fa-twitter fa-2x"></i></a></li>
              <li class="instagram"><a href="#"><i class="fab fa-instagram fa-2x"></i></a></li>
          </ul>
        </div>
      </div>
  </nav>

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

 $('.menu-close').on('click', function(){
    $('#menuToggle').toggleClass('active');
    $('body').toggleClass('body-push-toright');
    $('#theMenu').toggleClass('menu-open');
    alert("Test");
    });
javascript  html  css  bootstrap-4  responsive-design 
— ফ্রাঙ্ক ডো
সূত্র
আরে, আমি আপনার প্রশ্নের সঠিক সমাধান দিয়ে মন্তব্য যুক্ত করেছি। আপনার কোড কোড তৈরি করেছে যাতে আপনি কোড এবং আউটপুট পরীক্ষা করতে পারেন। দয়া করে দেখুন
— প্রিয়াঙ্কা
আপনার কি অন্য সিএসএস আছে?
— কোডেপ্লাই-এআর
classমিডিয়া ক্যোয়ারী এর আওতায় সরল অ্যাড এবং স্টাইল করুনwidth:600
— আওস

উত্তর:

4

দেখে মনে হচ্ছে এটির উত্তর এখানে দেওয়া হয়েছে: https://stackoverflow.com/a/36289507/378779 মূলত, navbar-expand-*আপনার ক্লাসগুলির মধ্যে একটি যুক্ত করুন <nav>, যেমন:

<nav class="menu menu-open navbar-expand-md" id="theMenu">
— kmoser
সূত্র
1

আপনি বিভিন্ন ভিউপোর্ট / ডিভাইসে সামগ্রী লুকিয়ে / দেখানোর জন্য সিএসএস মিডিয়া ক্যোয়ারী ব্যবহার করতে পারেন।

— মুহামাদ ডি ফাহেরজী
সূত্র
0

নিখুঁতভাবে আপনার যা প্রয়োজন তা লিঙ্কটি এখানে। আমি আপনার জন্য কলম তৈরি করেছি। নীচের লিঙ্কটি দেখুন দয়া করে।

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="theMenu">
  <a class="navbar-brand" id="menu-logo">
            <img src="Final_Logo.png" width="210" height="214" alt="">
          </a>      
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto" id="main-menu">
            <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
            <li class="nav-item"><a class="nav-link" href="#">About</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Writing</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Events</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Speaking</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Music</a></li>
            <li class="facebook"><a href="#"><i class="fab fa-facebook fa-2x"></i></a></li>
              <li class="twitter"><a href="#"><i class="fab fa-twitter fa-2x"></i></a></li>
              <li class="instagram"><a href="#"><i class="fab fa-instagram fa-2x"></i></a></li>
          </ul>
  </div>
  </nav>

https://codepen.io/pgurav/pen/abbQZJL

— প্রিয়াঙ্কা
সূত্র
0

বাহ্যিক সামগ্রী সম্পর্কিত বিএস 4 ডকুমেন্টেশনের ভিত্তিতে আমি আপনার জন্য একটি উদাহরণ তৈরি করেছি।

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h5 class="text-white h4">Collapsed content</h5>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark navbar-expand-lg">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>

এই উদাহরণের মধ্যে ডান পরিবর্তে - উপরে থেকে কোডটি পতন হয়। আসলে আমি ছুটিতে আছি এবং আপনার প্রয়োজন অনুসারে উদাহরণটি পূর্ণ করার চেষ্টা করব।

অতিরিক্ত জাভাস্ক্রিপ্ট:

var externalContent = $('#navbarToggleExternalContent'),
    execOnResize = function(){
// also the next line was only for use in jsfiddle
// in the real world you need to use window.outerWidth
// 992 pixel is the width of breakpoint corresponding to the class "navbar-expand-lg". Feel free to adapt it to fit your needs.
    if(window.innerWidth >= 992){
        externalContent.addClass('show');
    }else{
        externalContent.removeClass('show');
    }
};
// the next line was only addded for jsfiddle       
execOnResize();

window.onresize = function(event) {
    execOnResize();
};

window.addEventListener('load', function() {
    execOnResize();
})

আমিও একটি বেহালার তৈরি করেছেন বেহালার এটা কর্ম দেখার জন্য, jsfiddle মধ্যে ভিতরের উইন্ডোর আকার পরিবর্তন করুন

— MattOpen
সূত্র
0

আপনার বর্তমান জাভাস্ক্রিপ্ট কোডটি ডিভাইস নির্বিশেষে সর্বদা চলবে। আপনার যা প্রয়োজন তা ডিভাইসটি কম্পিউটার বা মোবাইল ফোন কিনা তা যাচাই করার একটি উপায় way

একটি উপায় ব্রাউজার এর ব্যবহার করা হবে UserAgent:

$('.menu-close').on('click', function(){
    if(navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {
        //mobile
        $('#menuToggle').toggleClass('active');
        $('body').toggleClass('body-push-toright');
        $('#theMenu').toggleClass('menu-open');
        alert("Test");
    }
});

বা, আপনি কেবল উইন্ডোটির প্রস্থের উপর নির্ভর করতে পারেন (তবে ছোট ডেস্কটপ উইন্ডোগুলিকে মোবাইল সংস্করণের মতো বিবেচনা করা হবে):

if(window.innerWidth <= 767) { // a certain threshold value, in pixels
    //mobile
    //do something
}
— আনিস আর।
সূত্র
ব্যবহারকারীর এজেন্ট স্ট্রিং স্নিফিং করা এমন কোডের দিকে নিয়ে যায় যা বজায় রাখা কঠিন difficult মিডিয়া প্রশ্নগুলি আরও ভাল।
— কিঃমোসোজার
একটি স্ট্রিং সম্পর্কে "বজায় রাখা কঠিন" কী? যাইহোক আপনি এই চেকটি কোনও ফাংশনে মুড়িয়ে রাখতে পারেন, যাতে আপনার যখনই স্ট্রিং আপডেট করার দরকার হয়, সম্পাদনা করার জন্য আপনার কাছে কোডের একটি মাত্র লাইন থাকে।
— আনিস আর।
এছাড়াও, ওপি চাইলে শ্রেণীর নাম টগল করতে আপনি CSS মিডিয়া ক্যোয়ারী ব্যবহার করতে পারবেন না
— আনিস আর।
নতুন ডিভাইস তৈরি হওয়ার সাথে সাথে ডিভাইসের ব্যবহারকারী এজেন্টের স্ট্রিং সময়ের সাথে সাথে পরিবর্তন ঘটে। কোডটিতে ফলাফল যা প্রতিবার নতুন ডিভাইস চালু হওয়ার সাথে সাথে ব্রেক করে। অবশ্যই, আপনি এটি কোনও ফাংশনে মুড়িয়ে রাখতে পারেন, তবে যখনই কোনও নতুন ডিভাইস প্রবর্তিত হয় তখনি এটির প্রয়োজন হয়। ব্যবহারকারী-এজেন্ট স্ট্রিং নয়, ডিভাইসগুলি তাদের আকার (সিএসএস মিডিয়া ক্যোয়ারী ব্যবহার করে) লক্ষ্য করে লক্ষ্য করা ভাল। কোনও নতুন ডিভাইস চালু করার সময় কোনও আপডেটের প্রয়োজন হয় না। ওপি অগত্যা ক্লাসের নাম টগল করতে চায়নি; এটি একটি সমাধানের পক্ষে তাদের সর্বোত্তম প্রচেষ্টা ছিল এবং আমি বিশ্বাস করি এটি একটি মিডিয়া প্রশ্নের তুলনায় নিকৃষ্ট।
— কিমিউসার
0

প্রথমে মাত্র কয়েক দফা:

  1. আপনি বলেছেন সাইডবার, তবে আপনার মার্কআপটি আমার কাছে সত্যিই একটি সাইডবারের মতো দেখাচ্ছে না, এটি দেখতে প্রতিক্রিয়াশীল টোপনভের মতো looks আমি এটি যথাসাধ্য চেষ্টা করার চেষ্টা করব এবং আমি যদি একটি কাজ সাইডবারটি প্রদর্শন করে থাকি তবে আপনি যদি সত্যিই এটি চান তবে এটিই করব।

  2. আপনার মেনু আইটেমগুলি কোনও <ul>(তালিকাবদ্ধ <li>আইটেম) ছাড়াই একটি (আনর্ডারড তালিকায় ) রয়েছে। <li>সঠিকভাবে কাজ করার জন্য বুটস্রেপ জেএস / সিএসএসের সম্ভবত এসগুলির প্রয়োজন । টেকনিক্যালি একটি <ul>কোনো ছাড়া <li>বৈধ এইচটিএমএল, কিন্তু শুধুমাত্র কন্টেন্ট একটি অনুমোদিত <ul>হয় <li>গুলি তাই নোঙ্গর (অথবা অন্য কিছু) একটি ভিতরে <ul>মধ্যে অন্তর্ভুক্ত করা আবশ্যক <li>গুলি বৈধ বলে।

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

  4. আমি যোগ overflow-y: scroll;উপর <html>উপাদান যাতে যখন আপনি একটি ছোট পর্দায় মেনু খুলুন এটা কারণ নাড়াচাড়া না যদি একটি স্ক্রলবার যোগ হয়। আপনার সাইটের নকশা এবং সামগ্রীর বিন্যাসের উপর নির্ভর করে প্রয়োজন হতে পারে না।

সুতরাং একটি খুব বেসিক প্রতিক্রিয়াশীল মেনু দিয়ে শুরু করা যাক।

বেসিক বুটস্ট্র্যাপ প্রতিক্রিয়াশীল মেনু

কোড স্নিপেট দেখান

ঠিক আছে, এটি দেখতে ঠিক আছে, তবে মেনুতে আপনার একটি চিত্র ছিল। সুতরাং আমি মেনুতে একটি ইমেজ রাখব এবং এটি স্টাইল করার জন্য এটি একটি সামান্য CSS দেব। তারপরে ছবিটির সাথে মেনু উপাদানগুলিকে সুন্দরভাবে অবস্থানের জন্য আমাদের কিছুটা অতিরিক্ত সিএসএস লাগবে:

  1. হ্যামবার্গার বোতামটি অবস্থান করুন যাতে এটি নাবারের নীচে বসে থাকে। আমি ছবিটির 200px ব্যবহার করব এবং কয়েকটি রিমাকে সাবস্ট্রাক্ট করব। আপনি হ্যামবার্গারকে উপরে top: calc(100px - 1rem);রাখার top: 1rem;জন্য পরিবর্তন করতে পারেন , বা bottom: 1rem;আপনি চাইলে হ্যামবার্গারটি এনএভের নীচে আটকে থাকা উচিত এমনকি খোলার পরেও। বা বুটস্ট্র্যাপ ডিফল্ট ব্যবহার করতে কেবল সেই পুরো নিয়মটি মুছুন যা উল্লম্ব মাঝখানে হ্যামবার্গার রাখে।

  2. মেনু বার যখন নীচে না পড়ে তখন মেনু আইটেমগুলির স্থিতি করুন।

  3. নীচে সামাজিক আইকনগুলি অবস্থান রাখুন তবে এগুলি ডানদিকে রেখে দিন।

  4. উপরের নম্বরগুলি 2 এবং 3 কেবলমাত্র মাঝারি ব্রেক ব্রেকপয়েন্টের উপরে প্রয়োগ করা উচিত যখন মেনুটি ভেঙে না যায় তাই আমি তাদের 768px (বুটস্ট্র্যাপের মাঝারি ব্রেকপয়েন্ট) টার্গেট করার জন্য একটি মিডিয়া ক্যোয়ারিতে রেখে দেব। এটি বুটস্ট্র্যাপস এসএস ব্রেক ব্রেকপয়েন্ট মিক্সিনগুলির সাহায্যেও করা যেতে পারে তবে আমরা এখানে সাদামাটা CSS ব্যবহার করব। আপনি CSS এর @ মিডিয়া ক্যোয়ারী রুলের মধ্যে এই উপাদানগুলির অবস্থান দেখতে পাচ্ছেন, যেখানে আপনি এটিকে বারের শীর্ষে ঠেলে দিতে পরিবর্তন করতে পারেন। বা বুটস্ট্র্যাপের ডিফল্টগুলিতে ফিরে যাওয়ার জন্য এই নিয়মগুলি সরিয়ে দিন, যা মেনু উপাদানগুলিকে উল্লম্বভাবে কেন্দ্র করে এবং তাদের নীচে সামাজিক আইকন রাখে। আপনি যদি মেনুতে অন্যান্য মেনু আইটেমগুলির মতো ঠিক আইকনগুলি ডানদিকে আসতে চান তবে আপনি সামাজিক আইকনগুলিকে <li>মেনুর মধ্যে উপাদানগুলিতেও রাখতে <ul>পারেন।

মেনুতে চিত্র সহ

কোড স্নিপেট দেখান

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

সংযোগযোগ্য সাইডবার

কোড স্নিপেট দেখান

— ভেনেসিম টাইরাস
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.