آموزش فریم‌ورک Foundation-بخش۱۰-منو،ویدیو،تصویر
آموزش فریم‌ورک Foundation-بخش10-منو،ویدیو،تصویر » در این مقاله، منوی چسبنده (sticky navigation)، ویدیوی ریسپانسیو، تصاویر بندانگشتی (thumbnail) و راست چین کردن چیدمان وب سایت (RTL-right-to-left) و پلاگین Magellan را بررسی می کنیم و آموزش خواهیم داد.

آموزش فریم‌ورک Foundation-بخش۱۰-منو،ویدیو،تصویر

بخش دهم: منوی چسبنده (sticky navigation)، ویدیوی ریسپانسیو، تصاویر بندانگشتی (thumbnail)

منوی چسبنده (sticky navigation)، ویدیوی ریسپانسیو، تصاویر بندانگشتی (thumbnail)

 

منوی چسبنده، ویدیوی ریسپانسیو، تصاویر بندانگشتی و راست‌چین

 

در مقاله قبل، المان های جدول، پنل، باکس قیمت و… را بررسی کردیم.

 

پلاگین Magellan:

ممکن است در برخی از پروژه ها نیاز باشد منوی سایت با اسکرول کاربر، در صفحه باقی بماند و به صفحه بچسبد. برای داشتن منوی چسبنده (Sticky Navigation) از پلاگین Magellan استفاده کنید. مرجع اصلی آموزش این پلاگین وب سایت فاندیشن می باشد. تصویر زیر نمایی از یک منوی چسبنده است:

پلاگین Magellan

 

کد این منو نیز بسیار ساده است:

<div data-magellan-expedition="fixed">

  <ul class="sub-nav">

    <li data-magellan-arrival="contact"><a href="#">Contact</a></li>

    <li data-magellan-arrival="about"><a href="#">About</a></li>

  </ul>

</div>

 

همانطور که مشاهده می کنید دو تا اتریبیوت در این کد استفاده شده است که درباره آنها توضیح می دهیم. در ابتدا یک div می خواهیم که دارای اتریبیوت data-magellan-expedition با مقدار fixed باشد و در این div مجددا از یک ul بهمراه چندین li داخل آن استفاده می کنیم. المان ul باید دارای کلاس sub-nav باشد و برای هر آیتم یعنی li یک اتریبیوت بنام data-magellan-arrival با مقادیر مرتبط با نام منو (در این مثال contact و about) تعریف می کنیم.

از آنجایی که این پلاگین بسیار سبک می باشد، فقط کافیست توسط کدهای جاوااسکریپت، تنظیمات اولیه آنرا انجام دهیم:

$(document).foundation('magellan',{

  // specify the class used for active sections

  activeClass: 'active',

  // how many pixels until the magellan bar sticks, 0 = auto

  threshold: 0

});

نمایان و یا پنهان شدن المان (visibility):

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

small: سایز ۷۶۸px  و  medium: سایز بین ۷۶۸ و ۱۲۸۰  و  large: بین ۱۲۸۰ و ۱۴۴۰  و  xlarge: بالای ۱۴۴۰

 

کلاس های show برای سایزهای مختلف اسکرین:

.show-for-small       /* Visible up to 768px */

.show-for-medium-down /* Visible from 768px down */

.show-for-medium      /* Visible between 768px and 1280px */

.show-for-medium-up   /* Visible from 768px up */

.show-for-large-down  /* Visible from 1280px down */

.show-for-large       /* Visible between 1280px and 1440px */

.show-for-large-up    /* Visible from 1280px up */

.show-for-xlarge      /* Visible above 1440px only */

 

در مقابل هر کلاس، اندازه اسکرین مربوطه را نوشتیم. برای مخفی کردن (hide) المان یا المان های موردنظر خود، فقط کافیست بجای عبارت show کلمه hide را تعریف کنیم.
 

کلاس های show برای orientation های مختلف و لمسی بودن یا نبودن اسکرین:

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

.show-for-landscape   /* Visible for landscape orientation */

.show-for-portrait    /* Visible for portrait orientation */

.hide-for-landscape   /* Hidden for landscape orientation */

.hide-for-portrait    /* Hidden for portrait orientation */

 

/* The touch detection classes */

.show-for-touch       /* Visible for touch enabled devices */

.hide-for-touch       /* Hidden for touch enabled devices */

 

توسط کلاس های فوق، براحتی می توانید المانی را در صفحات لمسی پنهان کنید و یا مثلا دکمه ای را در حالت نمایش پرتریت (portrait) مخفی کنید و یا نمایش دهید.

 

پشتیبانی از راست چین (RTL Support):

برای وب سایت هایی که دو یا چند زبانه است و یا وب سایتی که تنها زبان فارسی دارد، این قابلیت فریم ورک فاندیشن (foundation) بسیار کار راه انداز و مفید است. لفقط کافیست تگ html وب سایت خود را بصورت زیر تعریف کنید:

<html class="no-js" lang="fa" dir="rtl">

در اتریبیوت lang زبان را بطور اختصاری تعریف کرده ایم و اگر زبان وب سایت ما عربی باشد بجای fa می نویسیم ar. در اتریبیوت dir نیز برای اعمال راست چین بودن چیدمان صفحات و متون، مقدار rtl را در نظر می گیریم.

 

تصاویر بندانگشتی (Thumbnail):

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

تصاویر بندانگشتی (Thumbnail)

این کلاس زمانی می تواند مفید باشد که طراح وب سایت، دیزاین خاصی برای تصاویر بندانگشتی (مانند تصاویر اخبار و بلاگ) در نظر نگرفته باشد. یک border طوسی رنگی بهمراه padding مشخصی در اطراف تصویر ایجاد می کند. کد زیر را در این زمینه در نظر بگیرید:

<a href="#" class="th" >

<img src="images/funkyTown.jpg" alt="Get down to funky town" />

</a>

 

ویدیوی ریسپانسیو (Flex Video):

نمایش دادن ویدئو در وب سایت، معمولا موضوعی چالش انگیز و گاها طاقت فرسا می باشد. اما در فریم ورک فاندیشن، امکانی در نظر گرفته شده است که شما براحتی می توانید تنها با استفاده از کلاس flex-video در اطراف تگ ویدیو (یا iFrame) ویدئوی موردنظر خود را بصورت واکنش گرا (responsive) برای کاربران به نمایش در بیاورید. مانند کد زیر می توانید ویدئوهای وب سایت های youtube و vimeo و یا aparat را نیز بصورت iframe نمایش دهید:

<div class="flex-video">

<iframe width="420" height="315" src="//www.youtube.com/embed/RcVyl9X3gFo" frameborder="0" allowfullscreen></iframe>

</div>

 

در اینجا، سری آموزشی فریم ورک فاندیشن (Foundation Framework) به پایان می رسد. امیدوارم این آموزش مورد استفاده شما عزیزان قرار گرفته باشد. لطفا با بیان نظرات و طرح سوالات خود در صفحه تماس با ما و یا از طریق آدرس ایمیل Ehsansafari@hotmail.com وب سایت محتوا را در ارائه مقالات مفیدتر یاری کنید.

 

منبع: https://webdesign.tutsplus.com/tutorials/foundation-for-beginners-sticky-navigation-flexible-video-and-zepto–webdesign-13754


برچسب‌ها:

Flex Videoپلاگین Magellanتصاویر بندانگشتیراست به چپراست چینفاندیشن راست چینکلاس showمنوی چسبندهویدیوی ریسپانسیو


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

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

نوزده − 2 =