साइडबार ओपन डेस्कटॉप पर डिफ़ॉल्ट रूप से, मोबाइल पर बंद

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
— Awais

जवाबों:

4

ऐसा लगता है कि इसका उत्तर यहां दिया गया है: https://stackoverflow.com/a/36289507/378779 मूल रूप से, navbar-expand-*अपने वर्ग में से एक को जोड़ें <nav>, जैसे:

<nav class="menu menu-open navbar-expand-md" id="theMenu">
— kmoser
स्रोत
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

मैंने आपके लिए एक उदाहरण बनाया है, जो बाहरी सामग्री से संबंधित bs4 प्रलेखन पर आधारित है।

<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

आपका वर्तमान जावास्क्रिप्ट कोड हमेशा चलेगा, डिवाइस की परवाह किए बिना। यदि आपको डिवाइस कंप्यूटर या मोबाइल फोन है तो जांचने का एक तरीका है।

ब्राउज़र का उपयोग करने का एक तरीका होगा 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
}
— अनीस आर।
स्रोत
उपयोगकर्ता एजेंट स्ट्रिंग सूँघने से कोड होता है जिसे बनाए रखना मुश्किल होता है। मीडिया के सवाल ज्यादा बेहतर हैं।
— किमी।
एक तार के बारे में "बनाए रखना मुश्किल" क्या है? वैसे भी आप इस चेक को किसी फ़ंक्शन में लपेट सकते हैं, ताकि जब भी आपको स्ट्रिंग को अपडेट करने की आवश्यकता हो, तो आपके पास संपादित करने के लिए कोड की केवल एक पंक्ति हो।
— अनीस आर।
इसके अलावा, आप वर्ग मीडिया के नामों का उपयोग नहीं कर सकते हैं जैसे कि ओपी चाहता है कि वर्ग के नाम टॉगल करें
— Anis R.
नए उपकरणों के उत्पादन के समय में डिवाइस के उपयोगकर्ता एजेंट के तार बदलते हैं। कोड में परिणाम है कि हर बार एक नए उपकरणों को पेश किया जाता है टूट जाता है। ज़रूर, आप इसे एक फ़ंक्शन में लपेट सकते हैं, लेकिन जब भी कोई नया उपकरण पेश किया जाता है, तब भी आपको इसे बदलना होगा। अपने आकार (CSS मीडिया क्वेरी का उपयोग करके) उपकरणों को लक्षित करना बेहतर है, न कि उपयोगकर्ता-एजेंट स्ट्रिंग। जब कोई नया उपकरण पेश किया जाता है तो किसी भी अपडेट की आवश्यकता नहीं होती है। ओपी जरूरी नहीं था कि वर्ग के नाम टॉगल करें; यह एक समाधान में उनका सबसे अच्छा प्रयास था, और जो मैं मानता हूं वह मीडिया के प्रश्नों से हीन है।
— 3
0

पहले सिर्फ एक दो बिंदु:

  1. आपने साइडबार कहा है, लेकिन आपका मार्कअप वास्तव में मेरे लिए साइडबार की तरह नहीं दिखता है, यह एक उत्तरदायी टॉपनाव की तरह दिखता है। मैं इसे सर्वश्रेष्ठ के रूप में समझने की कोशिश करूँगा, और मैं एक काम कर रहे साइडबार का भी प्रदर्शन करूँगा, यदि आप वास्तव में ऐसा चाहते हैं।

  2. आपके मेनू आइटम <ul>किसी भी <li>(सूची आइटम) के बिना (अनियंत्रित सूची ) में हैं। Bootrap js / css <li>को सही ढंग से कार्य करने के लिए संभवतः s की आवश्यकता है। तकनीकी रूप से एक <ul>बिना किसी <li>मान्य एचटीएमएल है, लेकिन केवल सामग्री एक में अनुमति दी <ul>हैं <li>रों इसलिए एंकर (या कुछ और) एक के अंदर <ul>के भीतर समाहित किया जाना चाहिए <li>रों वैध था।

  3. मुझे यकीन नहीं है कि आप वास्तव में सामाजिक आइकन के साथ क्या करने की कोशिश कर रहे हैं, इसलिए मैंने उन्हें थोड़ा इस तरह से समायोजित किया है जो समझदार लगता है।

  4. मैंने तत्व overflow-y: scroll;पर जोड़ा <html>ताकि जब आप एक छोटी स्क्रीन पर मेनू खोलें तो स्क्रॉलिंग जुड़ने पर यह शिफ्टिंग का कारण न बने। आपकी साइट के डिज़ाइन और सामग्री लेआउट के आधार पर इसकी आवश्यकता नहीं हो सकती है।

तो चलो एक बहुत ही बुनियादी उत्तरदायी मेनू के साथ शुरू करते हैं।

मूल बूटस्ट्रैप उत्तरदायी मेनू

कोड स्निपेट दिखाएं

ठीक है, यह ठीक लग रहा है, लेकिन आपके पास मेनू में एक छवि थी। इसलिए मैं मेनू में एक छवि डालूंगा और इसे स्टाइल करने के लिए इसे थोड़ा सीएसएस दूंगा। फिर छवि के साथ, हमें मेनू तत्वों को अच्छी तरह से स्थिति के लिए थोड़ा अतिरिक्त सीएसएस की आवश्यकता होगी:

  1. हैमबर्गर बटन को स्थिति दें ताकि यह नेवबार के निचले भाग पर बैठे। मैं तस्वीर के 200px का उपयोग करूंगा और कुछ रीमेक को प्रतिस्थापित करूंगा। आप हैमबर्गर को शीर्ष पर रखने के top: calc(100px - 1rem);लिए बदल सकते हैं top: 1rem;, या bottom: 1rem;यदि आप चाहते हैं कि हैमबर्गर को खोलने पर भी नौसेना के निचले हिस्से से चिपके रहें। या बस बूटस्ट्रैप डिफ़ॉल्ट का उपयोग करने के लिए उस पूरे नियम को हटा दें जो हैमबर्गर को ऊर्ध्वाधर मध्य में रखता है।

  2. मेनू आइटम की स्थिति को भी ढहने पर मेनू बार के निचले भाग में आराम करें।

  3. तल पर सामाजिक आइकन भी स्थिति लेकिन उन्हें दाहिने हाथ की ओर धक्का।

  4. उपरोक्त संख्या 2 और 3 केवल माध्यम ब्रेकपॉइंट के ऊपर लागू होनी चाहिए जब मेनू ढह नहीं जाता है तो मैं उन्हें 768px (बूटस्ट्रैप के मध्यम ब्रेकपॉइंट) पर लक्षित करने के लिए मीडिया क्वेरी में डालूँगा। यह बूटस्ट्रैप एसएएस ब्रेकपॉइंट मिक्सिन्स के साथ भी किया जा सकता है, लेकिन हम यहां सादे सीएसएस का उपयोग करेंगे। आप इन तत्वों की स्थिति को css में @media क्वेरी नियम के भीतर देख सकते हैं, जहाँ आप इसे बार के शीर्ष पर धकेलने के लिए बदल सकते हैं। या बस उन नियमों को हटाने के लिए बूटस्ट्रैप डिफॉल्ट को वापस लाएं, जो मेनू तत्वों को सीधा करते हैं, और उनके नीचे सामाजिक आइकन डालते हैं। आप <li>मेनू के भीतर तत्वों में सामाजिक आइकन भी डाल सकते हैं <ul>यदि आप चाहते थे कि आइकन अन्य मेनू आइटम की तरह मेनू में सही गिर जाएं।

मेनू में छवि के साथ

कोड स्निपेट दिखाएं

ठीक है, लेकिन आपने कहा कि यह एक साइडबार था। मैं बूटस्ट्रैप से परिचित नहीं हूं, लेकिन मैं इकट्ठा करता हूं कि न तो v3 और न ही v4 डिफ़ॉल्ट रूप से साइडबार नेवी प्रदान करते हैं। कई बूटस्ट्रैप साइडबार ट्यूटोरियल यहां देखे जा सकते हैं । मैंने यहां उदाहरण बनाने के लिए ऊपर दिए गए ट्यूटोरियल्स में से सबसे बुनियादी संस्करण का उपयोग किया है।

बंधनेवाला साइडबार

कोड स्निपेट दिखाएं

— वेनसेमे तीरस
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.