के भीतर मेमेनू को एकीकृत करना मैं को एकीकृत करना चाहता हूं Jquery Mmenu बूटस्ट्रैप के भीतर स्वचालित रूप से बूट करने के लिए बूटस्ट्रैप स्विच को मूल स्लाइड लंबवत उत्तरदायी मेनू प्रदर्शित करने के बजाय उत्तरदायी डिज़ाइन के साथ इस स्लाइडिंग बाएं तरफ मेनू पर स्विच करने देता है।बूटस्ट्रैप
कोई विचार या दृष्टिकोण?
Jquery Mmenu: http://mmenu.frebsite.nl
मैं पहले से आप सभी को धन्यवाद।
जय।
ठीक है, मैंने कुछ घंटों पहले इसी खोज पर सेट किया था और मैं यहां मेरी मदद करने के लिए एक उत्तर ढूंढने की उम्मीद कर रहा था।
मुझे अब यह काम मिल गया है और मैंने जो कुछ सीखा है, मैं साझा करूंगा, हालांकि मैं बूटस्ट्रैप के लिए नया हूं। यदि आप रूकी गलतियों को देखते हैं तो किसी और को झुकने में संकोच न करें। मान लीजिए कि समुदाय का भुगतान करने का समय है क्योंकि मेरे कई प्रश्नों का उत्तर यहां दिया गया है।
यहाँ जाता है:
इस jsFiddle पर देखो मेरा पूरा नमूना कोड और डेमो देखने के लिए: http://jsfiddle.net/acterry/fMYpg/
आप अन्य करने के लिए एक शैली से नव परिवर्तन देखने के लिए खड़ी विभक्त साथ खेलने होगा ।
मैं दोनों मेनू ड्राइव करने के लिए एक ही एनएवी उल का उपयोग करना चाहता था।
अवधारणा का एक सबूत के रूप में, मैं यह निर्धारित करने के एनएवी बूटस्ट्रैप पूर्वनिर्धारित उत्तरदायी breakpoints का उपयोग कर के साथ ठीक था करने के लिए कोई समारोह था शैली दिखाया गया था।
यहाँ मेनू भाग
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="visible-desktop navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="/">My Site</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<ul class="nav" id="mainSiteMenu">
<li><a href="#">Home</a>
</li>
<li><a href="#">Link 1</a>
</li>
<li><a href="#">Link 2</a>
</li>
<li><a href="#">Link 3</a>
</li>
</ul>
</div>
</div>
</div>
<div class="hidden-desktop navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" href="#mainSiteMenuMMenuNav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="/">My Site</a>
</div>
</div>
</div>
<nav id="mainSiteMenuMMenuNav"></nav>
के लिए HTML है ये कदम उठाएँ का शीघ्र विश्लेषण है:
जब से मैं दोनों मेनू के लिए ठीक उसी यूएल उपयोग नहीं कर सका, मैं jQuery का उपयोग करने के प्रोग्राम के रूप में पर बूटस्ट्रैप नेवबार द्वारा इस्तेमाल किया एक नकल करने का फैसला किया की जरूरत है पृष्ठ लोड और इसे उपयोग करने के लिए mmenu के लिए खाली नौसेना कंटेनर में सामान।
यह शायद खाली एनवी कंटेनर प्रोग्रामेटिक रूप से बनाने के लिए क्लीनर होगा। मैं शायद कल ऐसा करूंगा।
यह जावास्क्रिप्ट प्रतियां यूएल, नव कंटेनर में यह देता है और की नकल की यूएल साथ mmenu को दर्शाता है:
$(function() {
$("#mainSiteMenuMMenuNav").append($("#mainSiteMenu").clone().attr("id", "mainSiteMenuMMenu").attr("class", ""));
$("#mainSiteMenuMMenuNav").mmenu({
configuration: {
pageNodetype: "div"
}
});
});
कि यह करना चाहिए। यदि आप समस्याओं में भाग लेते हैं, तो कृपया सब कुछ दोबारा जांचें। और फिर, मैंने बस कुछ घंटों पहले यह पता लगाया .... तो यह मूर्ख प्रमाण समाधान नहीं हो सकता है।
अगर किसी के पास बेहतर तरीका है या समस्याएं देखती हैं, तो मुझे बताएं।
बहुत बढ़िया!, बहुत धन्यवाद एक्टरी, मैं आपके दृष्टिकोण के रूप में अध्ययन करेंगे। – wendl
आपका डेमो अच्छी तरह से काम करता है! –
उम्मीद है कि यह आपके लिए अच्छा काम करता है। मैं अभी भी अपने उद्देश्यों के लिए tweaks जोड़ रहा हूँ। अगर मैं कुछ बेहतर तरीके से आती हूं तो मैं एक अपडेट पोस्ट करूंगा। –
मैंने स्क्रॉल करते समय विंडो के शीर्ष पर बूटस्ट्रैप नेविबार को रहने के लिए एक अतिरिक्त उदाहरण जोड़ा।
http://jsfiddle.net/acterry/yC7R3/
मैं pageNodetype बदल जहां mmenu यह संशोधन है करता है "खंड" बदलने के लिए करने के लिए।
जोड़ा गया यह सीएसएस के साथ-साथ
/* Push down the sidebar menu so that first item is not covered up by sticky navbar */
#mainSiteMenuMMenuNav.mmenu-opened {
top: 50px;
}
/* force the top navbar to stick to top of window when you scroll down*/
@media (max-width: 979px) {
/* Enable use of floated navbar text */
.navbar-text.pull-right {
float: none;
padding-left: 5px;
padding-right: 5px;
}
.navbar-fixed-top, .navbar-fixed-bottom {
position: fixed;
margin-left: 0px;
margin-right: 0px;
}
}
यह शीर्ष है! आपका बहुत बहुत धन्यवाद ! यह एक जादू की तरह काम करता है ! आपको बधाई। – wendl
चूंकि यह अभी भी खुला किसी को भी, जो एक ही मुद्दा है और एक काम कर लागू करने के लिए देख रहा है: Check this out।
मैं सिर्फ अपनी परियोजना में इसका इस्तेमाल किया है और यह आसान नहीं हो सकता ...
उम्मीद है कि इस विषय और उपयोगी रही है। मैंने सामान्य बूटस्ट्रैप मेनू का उपयोग न्यूनतम चौड़ाई तक किया है: 1060 पीएक्स और फिर एमएमएनयू तब से नीचे। यहां जेएस है (मैं मीडिया प्रश्नों से मेल खाने के लिए enquire.js का उपयोग कर रहा हूं)।
// uses enquire.js to fire js on media queries
// https://github.com/WickyNilliams/enquire.js/
enquire.register("screen and (max-width:1060px)", {
// Wait until media query is matched
deferSetup: true,
// Fires once
setup: function() {
// requires an empty <nav id="menu"></nav>
$('.navbar-nav').clone().appendTo('#menu');
$('#menu > ul').attr("id", "mmenu");
//clean up mmenu by removing bootstrap classes
$('#mmenu ul').removeClass('dropdown-menu animated fadeInDown');
$('#mmenu li').removeClass('dropdown');
$('#mmenu li a').removeClass('dropdown-toggle').removeAttr("data-toggle data-target");
// $('#mmenu li a').removeAttr("data-toggle data-target");
$('#mmenu').removeClass('nav navbar-nav');
},
// If supplied, triggered when a media query matches.
match: function() {
//Show mmenu on media query match
$("#menu").mmenu({
"offCanvas": {
"position": "right"
}
});
},
// *from a matched state to an unmatched state*.
unmatch: function() {
//Hide mmenu
$('#menu').trigger('close.mm');
// $('#mmenu').remove();
}
});
इस विषय को बढ़ाने के लिए धन्यवाद! मुझे इसके साथ कुछ समस्याएं भी हैं। मैं अपनी साइट में mmenu का उपयोग कर रहा हूँ और बूटस्ट्रैप मोडल का उपयोग करना चाहता हूँ। चूंकि मेमेनू के पास एक तरह का मोडल भी है, इसलिए मैं सोच रहा हूं कि अगर कोई इस प्रश्न को पढ़ता है तो वह उन मुद्दों के बारे में जानता है जो उनके आसपास हो सकते हैं। मैंने एक प्रश्न पूछने की कोशिश की है [यहां] (http://stackoverflow.com/questions/35038146/bootstrap-modal-and-mmenu-menu-clashing) लेकिन किसी ने भी कुछ भी उपयोगी नहीं दिया। – MJH