/ / फाउंडेशन 6 कैनवास से बाहर, मुझे मेनू सामग्री कहां रखनी चाहिए? - ज़र्ब-फाउंडेशन, ज़र्ब-फाउंडेशन -6, ऑफ़-कैनवास-मेन्यू

फाउंडेशन 6 कैनवास से बाहर, मुझे मेनू सामग्री कहां रखनी चाहिए? - ज़र्ब-फाउंडेशन, ज़र्ब-फाउंडेशन -6, ऑफ़-कैनवास-मेन्यू

मैं बंद कैनवास मेनू बनाने के लिए फाउंडेशन 6 दस्तावेज का पालन कर रहा हूं: http://foundation.zurb.com/sites/docs/off-canvas.html

मैंने जो किया था यह रहा :

<body>
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>

<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
<ul class="vertical menu">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
</div>

<div class="off-canvas position-right" id="offCanvasRight" data-off-canvas
data-position="right"></div>

<div class="off-canvas-content" data-off-canvas-content>
<div class="title-bar">
<div class="title-bar-left">
<button class="menu-icon" type="button" data-toggle="offCanvasLeft"></button>
<span class="title-bar-title">Zurb</span>
</div>

<div class="title-bar-right">
<button class="menu-icon" type="button" data-toggle="offCanvasRight"></button>
</div>
</div>
</div>
</div>
</div>
</body>

लेकिन जब मैं मेनू खोलता हूं, तो मुझे यह मिलता है:

यहां छवि विवरण दर्ज करें

मैं इसे स्क्रॉल कर सकता हूं और अपना टेस्ट 1/2/3/4 देख सकता हूं, लेकिन मेरे पास यह परिणाम क्यों है?

जब मैं "टॉगल ऑफ़-कैनवास" पर क्लिक करता हूं, तो मैं जो चाहता हूं वह वही है जो हम नींव प्रलेखन पर देख सकते हैं

क्या मैंने अपनी सूची गलत जगह पर रखी? मुझे यकीन है कि मेरा ढांचा अद्यतित है, और मैं चरण-दर-चरण दस्तावेज का पालन कर रहा हूं, लेकिन यह उतना अधिक जानकारी नहीं देता है जितना मैं चाहता हूं

उत्तर:

जवाब के लिए 3 № 1

आपके पास सही जगह पर मेनू है और आपका उदाहरण फाउंडेशन 6 दस्तावेज में दिए गए उदाहरणों के बराबर है।

ऐसा लगता है कि यह एक डिजाइन मुद्दा का थोड़ा सा हैऑफ कैनवास मेनू की लंबाई सामग्री के आकार पर निर्भर है। चूंकि आपके पास पृष्ठ पर कोई सामग्री नहीं है, इसलिए मेनू मेनू बार में ऊंचाई के बराबर है।

जैसे ही आप पॉप्युलेट करते हैं off-canvas-content, मेनू अपेक्षित के रूप में प्रकट होना चाहिए।

क्लिक करें यहाँ एक डेमो के लिए।


जवाब के लिए 0 № 2

अपना कोड साझा करने के लिए धन्यवाद। फाउंडेशन 6 स्टार्टर पृष्ठों के लिए यह ZURB द्वारा उदाहरणों से थोड़ा अलग है। ZURB "रैपर" के बजाय "लपेटें" का उपयोग करता है। मैंने अपना कोड बदलकर तुम्हारा मेल और वॉयला बदल दिया! उनका ट्यूटोरियल यहां है:

http://foundation.zurb.com/sites/docs/v/5.5.3/components/offcanvas.html

आपका अपना:

<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>

ZURB:

<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">