آموزش فریم‌ورک Foundation-بخش۳-منو Navigation

آموزش فریم‌ورک Foundation-بخش۳-منو Navigation

بخش سوم – منو (Navigation)

منو در فریم ورک فاندیشن

 

منو در فریم ورک فاندیشن (Navigation in Foundation Framework):

 

در مقاله قبل (بخش دوم آموزش فریم ورک foundation) با گریدبندی (Griding System) در فاندیشن آشنا شدیم. در این مقاله به معرفی انواع منو navigation در این فریم ورک خواهیم پرداخت.

یکی از مواردی که در پیاده سازی یک رابط کاربری می تواند مهم و چالش انگیز باشد، بخش منوی آن است. در این مقاله میخواهیم تنظیمات منو و انواع آن در فاندیشن را بررسی کنیم.

 

پلاگین Section (The Section Plugin):

توسط پلاگین section میتوانید المان هایی مانند منو و تب را بصورت هم افقی و هم عمودی پیاده سازی کنید:

 

پلاگین Section (The Section Plugin)

طراحی المان هایی مانند منو و تب بصورت افقی و عمودی

 

کد زیر را در نظر بگیرید:

<div class="section-container auto" data-section>

  <section>

    <p class="title" data-section-title><a href="#">Section 1</a></p>

    <div class="content" data-section-content>

      <p>Content of section 1.</p>

    </div>

  </section>

  <section>

    <p class="title" data-section-title><a href="#">Section 2</a></p>

    <div class="content" data-section-content>

      <p>Content of section 2.</p>

    </div>

  </section>

</div>

 

کد فوق ممکن است نسبت به کدهایی که تاکنون دیده ایم پیچیده تر باشد و نیاز به توضیح بیشتر داشته باشد. پس آنرا به بخش های کوچکتر تقسیم می کنیم:

 

اتریبیوت data-section:

هر المانی را که پیاده سازی می کنید، فارغ از اینکه منو یا تب یا آکاردئون باشد، در div اول، کلاس section-container بهمراه auto باید تعریف شود. در همین div باید یک اتریبیوت (attribute) بنام data-section تعریف کنید. بدون هیچ مقداری. این اتریبیوت بیانگر نوع المانی است که میخواهیم پیاده سازی کنیم. بطور پیش فرض، فاندیشن در صورتی که چیزی ننویسیم، آکاردئون را می سازد. برای تولید یک المان خاص مانند تب، منو و … باید بجای کلمه auto، یکی از عبارات tabs، accordion، vertical-nav و horizontal-nav را تعریف کنیم.

 

ایجاد section برای محتوا:

وقتی div های لازم را تعریف کردید، نوبت آنست که محتوای موردنظرتان را قرار دهید. یک عنوان نیاز است و یک لینک:

<section>

    <p class="title" data-section-title><a href="#panel1">Section 1</a></p>

    <div class="content" data-section-content>

      <p>Content of section 1.</p>

    </div>

</section>

مشاهده می شود که هر section با یک تگ section دربرگرفته شده است. برای راحتی و خوانایی بیشتر section تعریف شود بهتر است اما می توانید بجای section از تگ div نیز استفاده کنید. بلافاصله پس از تگ section تگ p داریم که دارای کلاس title می باشد که داخل آن یک تگ a یعنی لینک تعریف می شود. سپس یک تگ div با کلاس content برای ایجاد بخش محتوای هر section تعریف می شود.

نکته: در صورت استفاده از vertical-nav ، در اندازه اسکرین موبایل این المان به آکاردئون تبدیل می شود.

 

لینک‌دهی عمقی (Deep Linking):

فرض کنید می خواهید به تب سوم یک المان تب لینک دهید. یعنی با کلیک روی یک لینک خاص در صفحه A، تب سوم از صفحه B باز شود. بصورت پیش فرض، همواره تب اول فعال (ACTIVE) است. فریم ورک فاندیشن برای این مشکل، راه حلی دارد. ابتدا باید در div اول، اتریبیوت زیر را تعریف کنیم:

data-options="deep_linking: true"

سپس با آدرسی مانند www.Mohtava.info/B/#Section3 تب سوم (Section3) از صفحه B بصورت پیش فرض فعال می شود و تصویری مشابه زیر خواهید دید:

 

لینک کردن عمقی (Deep Linking)

 

کد زیر را نگاه کنید:

<div class="section-container auto" data-section data-options="deep_linking: true">

  <section>

    <p class="title" data-section-title><a href="#section1">Section 1</a></p>

    <div class="content" data-slug="section1" data-section-content>

      <p>Content of section 1.</p>

    </div>

  </section>

  <section>

    <p class="title" data-section-title><a href="#section2">Section 2</a></p>

    <div class="content" data-slug="section2" data-section-content>

      <p>Content of section 2.</p>

    </div>

  </section>

</div>

علاوه بر تعریف اتریبیوت data-options برای div اول (یعنی section-container) باید یک اتریبیوت بنام data-slug برای div محتوا (یعنی content) تعریف کنید تا عملیات Deep Linking تکمیل شود.

 

منوی کناری (Side Nav):

المان Side Nav از فریم ورک فاندیشن، روشی ساده است برای پیاده سازی منوی عمودی. کد html آن بسیار ساده می باشد و اجازه استفاده از جداکننده (divider) را نیز بین منوها می دهد. کد زیر را در نظر بگیرید:

<ul class="side-nav">

  <li class="active"><a href="#">Link 1</a></li>

  <li><a href="#">Link 2</a></li>

  <li class="divider"></li>

  <li><a href="#">Link 3</a></li>

  <li><a href="#">Link 4</a></li>

</ul>

مشاهده می کنید که منوی کناری (Side Nav) مانند تمام منوهای دیگر یک ul (Unordered List) می باشد که با تعریف کلاس side-nav به آن، می توانید یک منوی عمودی مانند تصاویر زیر داشته باشید:

 

منوی کناری (Side Nav)

 

برای مشخص کردن منوی فعال از کلاس active استفاده کنید و برای تعریف جداکننده، از divider استفاده کنید.

 

Sub Nav در فریم ورک فاندیشن:

المان Sub Nav بیشتر برای مواردی مانند فیلتر کردن مطالب (Filtering Content) بکار می رود. کد آن شبیه المان Side Nav می باشد. تفاوت اصلی این دو المان اینست که Sub Nav از description list بجای unordered list استفاده می کند. چیزی بنام divider در این المان وجود ندارد. اما هنوز می توانید لینک فعال را با تعریف کلاس active مشخص نمائید. کد زیر را مشاهده کنید:

<dl class="sub-nav">

  <dt>Filter:</dt>

  <dd class="active"><a href="#">All</a></dd>

  <dd><a href="#">Photos</a></dd>

  <dd><a href="#">Videos</a></dd>

  <dd><a href="#">Music</a></dd>

</dl>

تصویر زیر هم مربوط به المان Sub Nav می باشد:

 

Sub Nav در فریم ورک فاندیشن

 

صفحه بندی (Pagination):

Pagination نیز یک مدل از منو می باشد. بیایید نگاهی به کد یک Pagination بیاندازیم:

<ul class="pagination">

  <li class="arrow unavailable"><a href="">&laquo;</a></li>

  <li class="current"><a href="">1</a></li>

  <li><a href="">2</a></li>

  <li><a href="">3</a></li>

  <li><a href="">4</a></li>

  <li class="unavailable"><a href="">&hellip;</a></li>

  <li><a href="">12</a></li>

  <li><a href="">13</a></li>

  <li class="arrow"><a href="">&raquo;</a></li>

</ul>

یونیکد فلش‌های چپ و راست:

همانطور که مشاهده می کنید، دو li اول و آخر، شامل فلش های چپ و راست (arrow-left و arrow-right) می باشد. می توانید در داخل آنها از یونیکد هایی مانند &lsaquo; و &laquo; و یا حتی &larr; استفاده کنید. برای مشاهده لیست کامل یونیکدهای قابل استفاده، به وب سایت Unicode-table مراجعه کنید. تصویر زیر یک المان صفحه بندی را نشان می دهد:

 

صفحه بندی (Pagination)

 

در المان Pagination، بجای کلاس active کلاس current داریم. کلاس جدیدی که در این المان وجود دارد، unavailable می باشد. بدلیل کد ساده ای که دارد، می توان از آن در سیستم های مدیریت محتوا مانند وردپرس نیز استفاده کنید.

 

نکات صفحه‌بندی در المان pagination:

نکته۱:  برای وسط چین کردن المان صفحه گذاری، می توان از کلاس pagination-centered استفاده کرد. مانند سایر المان های فریم ورک foundation، این المان نیز واکنش گرا می باشد و براحتی می توان به آن استایل داد.

نکته۲فریم ورک فاندیشن (Foundation) مانند اکثر فریم ورک های معتبر و معروف، واکنش گرا (responsive) می باشد. اما با اینحال، بهتر است هر چند وقت یکبار، وب سایت خود را در ابزار تست واکنش گرایی گوگل تست کنید.

در بخش چهارم از سری آموزشی فریم ورک فاندیشن foundation، با نوار بالا (top bar) در این فریم ورک قدرتمند آشنا می شویم.

 

منبع: https://webdesign.tutsplus.com/articles/foundation-for-beginners-navigation–webdesign-12446


برچسب‌ها:

اتریبیوت data-sectionالمان paginationپلاگین Sectionصفحه بندیفریم ورک فاندیشنلینک‌دهی عمقیمنو navigationمنو در foundationمنو در فاندیشنمنوی کناری

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

18 + نه =