/ / วิธีการรวมแถบด้านบนและแถบแท็บในมูลนิธิ 5 - zurb-foundation

วิธีการรวมแถบด้านบนและแถบแท็บในมูลนิธิ 5 - zurb-foundation

สามารถรวมกันได้หรือไม่ บนแถบ และ แท็บบาร์ (ปิดผ้าใบ)?

นี้: ใส่คำอธิบายภาพที่นี่

กลายเป็นเมื่อปรับขนาดเป็นขนาดอุปกรณ์เคลื่อนที่:

ใส่คำอธิบายภาพที่นี่

แต่ฉันต้องการรวมแท็บบาร์ (ปิดผ้าใบ) เพื่อให้เป็นเช่นนี้

ใส่คำอธิบายภาพที่นี่

ฉันไม่สามารถจินตนาการได้ว่าจะทำแบบนี้ได้อย่างไรและฉันพยายามทำให้เมนูเมนูที่กำหนดเองของฉันและวางไว้ในแถบด้านบน แต่ฉันมีปัญหากับการวางตำแหน่งองค์ประกอบต่างๆหายไปส่วนขอบ / padding ไม่ได้ทำงานในตำแหน่งที่สัมพันธ์กับสไตล์ของฉันมากยิ่งขึ้นดังนั้นฉันถึงต้องถามที่นี่ คุณมีความคิดที่ดีขึ้น

คำตอบ:

3 สำหรับคำตอบ№ 1

มี 2 ​​วิธีที่คุณสามารถทำได้ก่อนอื่นคุณสามารถใช้ ข้อความค้นหาสื่อ หรืออีกวิธีหนึ่งคือการใช้ชั้นทัศนวิสัย ตัวอย่างเช่นในโค้ด topbar เพิ่ม class = "show-for-medium-up" ซึ่งจะทำให้แถบด้านบนปรากฏขึ้นในหน้าจอขนาดกลางและขึ้น แต่ซ่อนไว้ในขนาดเล็ก

<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 และเพิ่ม class = "hide-for-medium-up"

<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)

เพิ่มความคิดเห็น