/ / फाउंडेशन 5 - ज़र्ब-फाउंडेशन में टॉप-बार और टैब-बार को कैसे गठबंधन करें

फाउंडेशन 5 - ज़र्ब-फाउंडेशन में टॉप-बार और टैब-बार कैसे गठबंधन करें

क्या यह गठबंधन करना संभव है शीश पट्टी तथा टैब पट्टी (बंद कैनवास)?

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

मोबाइल आकार का आकार बदलने पर यह बन जाता है:

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

लेकिन मैं वहां टैब-बार (कैनवास बंद) भी शामिल करना चाहता हूं, इसलिए यह इस तरह बन जाता है

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

मैं कल्पना नहीं कर सकता कि यह कैसे किया जा सकता है और मैंमेरा कस्टम मेनू-आइकन बनाने और इसे टॉप-बार के अंदर रखने की कोशिश कर रहा था, लेकिन मुझे स्थिति के साथ समस्याएं थीं, तत्व गायब हो गए थे, मार्जिन / पैडिंग काम नहीं कर पाए थे, स्थिति रिश्तेदार ने मेरी शैली को और भी गड़बड़ कर दिया था, हालांकि मैं यहां पूछने के लिए शायद आपके पास बेहतर विचार है।

उत्तर:

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

आप इसे 2 तरीके कर सकते हैं, पहले आप इसका उपयोग कर सकते हैं मीडिया के प्रश्नों या दूसरा तरीका दृश्यता वर्ग का उपयोग कर रहा है। उदाहरण के लिए टॉपबार कोड में वर्ग = "शो-फॉर-मध्यम-अप" जोड़ें जो शीर्ष स्क्रीन को ऊपर स्क्रीन और ऊपर दिखाएगा लेकिन इसे छोटे में छुपाएगा।

<nav class="top-bar show-for-medium-up" data-topbar>
<ul class="title-area">
<li class="name">
<h1><a href="#">My Site</a></h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
</ul>

<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active"><a href="#">Right Button Active</a></li>
<li class="has-dropdown">........................

फिर offcanvas के लिए कोड जोड़ें और वर्ग = "छुपाएं-मध्यम-मध्यम" जोड़ें

<div class="off-canvas-wrap hide-for-medium-up">
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" ><span></span></a>
</section>

<section class="middle tab-bar-section">
<h1 class="title">Foundation</h1>

ऐसा करके, आप स्क्रीन आकार के आधार पर भिन्न शैलियों को लागू करने में सक्षम होंगे। अधिक जानकारी के लिए देखें दृश्यता वर्ग


संबंधित सवाल


टिप्पणियाँ (0)

एक टिप्पणी जोड़े