آموزش فریم‌ورک Foundation-بخش۴-نوار بالا top bar

آموزش فریم‌ورک Foundation-بخش۴-نوار بالا Top bar

بخش چهارم – نوار بالا (Top Bar)

نوار بالا در فریم ورک فاندیشن (Top Bar in Foundation)

 

نوار بالا در فریم ورک فاندیشن (Top Bar in Foundation)

 

در مقاله قبل (بخش سوم آموزش فریم ورک فاندیشن)، یک المان مهم و کاربردی می باشد. این بدین معنی نمی باشد که استفاده از آن در طراحی یک وب سایت الزامی باشد. تقریبا در نیمی از قالب هایی که توسط فاندیشن پیاده سازی می شوند وجود دارند. باید با توجه به پروژه و نوع وب سایتی که می خواهید طراحی کنید، چک کنید ببینید که آیا نیاز است از المان نوار بالا (Top Bar) در آن استفاده کنید یا خیر. سفارشی سازی استایل های آن، مانند سایر المان ها کار راحتی می باشد اما تنظیماتی نیز دارد.

 

ساختار ضروری (The Essential Structure):

ساختار این المان به این صورت است که باید با تگ nav شروع شود و کلاس top-bar برای آن تعریف کنیم.

 

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

 

درون تگ nav، یک ul تعریف می شود که کلاس title-area دارد. درون این ul دو تا li تعریف می شوند که برای حالت موبایل منو می باشد. اولین li عنوان وب سایت می باشد و در دومی، دکمه بازشوی منو (Menu-Icon) قرار می گیرد. کد منو را بصورت زیر خواهیم داشت:

<nav class="top-bar">

    <ul class="title-area">

        <li class="name">

             <h1><a href="#">Top Bar Title </a></h1>

        </li>

        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a>

        </li>

    </ul>

</nav>

 

افزودن لینک های والد (Adding Parent Links):

افزودن لینک های والد، مرحله بعدی از طراحی منو می باشد. قبل از بسته شدن تگ nav یک section با کلاس top-bar-section تعریف کنید که شامل یک ul و چند li می باشد.

 

افزودن لینک های والد (Adding Parent Links)

 

کلاس جداکننده ای که قبلا در مقالات قبل داشتیم، در المان منوی افقی نیز داریم. بعد از هر آیتم از منو (li) می توانید از این کلاس برای جداسازی آیتم های منو استفاده کنید.

کد منو بصورت زیر خواهد شد:

<section class="top-bar-section">

    <ul class="left">

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

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

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

        <li><a href="#">Main Item 2</a></li>

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

    </ul>

</section>

 

کلاس جدیدی که در کدهای فوق مشاهده می کنید کلاس left می باشد که برای ul تعریف شده است. اگر آنرا به right تغییر دهیم، آیتم های منو به سمت راست خواهند رفت (این کلاس برای طراحی راست-به-چپ برای قالب فارسی کاربرد خواهد داشت)

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

 

افزودن زیرمنو (Adding Submenu):

 

افزودن زیرمنو (Adding Submenu)

 

در زیرمجموعه هر یک از آیتم های فوق می توان آیتم های دیگری تعریف کرد که بصورت تو در تو (Nested) باشند. نکته ای که باید در این موارد رعایت شود، تعریف کلاس has-dropdown برای آیتم والد می باشد و برای ul داخلی باید کلاس dropdown تعریف شود. به کد زیر نگاه کنید:

<li class="has-dropdown"><a href="#">Main Item 3</a>

    <ul class="dropdown">

        <li><label>Dropdown Level 3 Label</label></li>

        <li><a href="#">Dropdown Level 3a</a></li>

        <li><a href="#">Dropdown Level 3b</a></li>

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

        <li><a href="#">Dropdown Level 3c</a></li>

    </ul>

</li>

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

 

برای مشخص بودن منوی فعال، مانند قبل، می توانید از کلاس active استفاده کنید. زیرمنوها (Submenus) در اندازه اسکرین های دسکتاپ، بصورت استاندارد (تصویر فوق) نمایش می یابند اما در موبایل به صورت زیر در می آیند:

 

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

 

تنظیمات اضافی (Additional Settings):

برخلاف نام نوار بالا (Top Bar)، شما می توانید در هر جای قالب خود که مایل باشید از آن استفاده کنید. توسط کلاس fixed می توانید آنرا به بالای صفحه بچسبانید. ضمنا اگر می خواهید طول آن بصورت تمام صفحه نباشد (full-width) با افزودن کلاس contain-to-grid به آن، آنرا به اندازه گرید خود محدود کنید. خوشبختانه شما می توانید در آن واحد از هر دو کلاس fixed و contain-to-grid استفاده نمائید.

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

<div class="contain-to-grid sticky">

    <nav class="top-bar">

        <!–nav content–>

    </nav>

</div>

 

افزودن باکس جستجو (Adding Search Input):

 

افزودن باکس جستجو (Adding Search Input)

 

علاوه بر امکانات و تنظیمات فوق، ممکن است شما یک باکس جستجو در بخش منوی افقی وب سایت خود بخواهید و یا بخش ثبت نام در خبرنامه و یا… برای تعریف یک Search Input در منو، باید به li مربوطه، کلاس has-form را اعمال کنیم. کد زیر را در این زمینه در نظر بگیرید:

<li class="has-form">

    <form>

        <div class="row collapse">

            <div class="small-8 columns">

                <input type="text">

            </div>

            <div class="small-4 columns">

                <a href="#" class="alert button">Search</a>

            </div>

        </div>

    </form>

</li>

 

همانطور که ملاحظه می کنید، می توانید برای مرتب شدن فرم جستجو، از گریدبندی فریم ورک فاندیشن استفاده کرد. در این مثال، تعداد ۸ ستون برای تکست باکس جستجو و ۴ ستون برای دکمه Search در نظر گرفته شده است.

 

نوار راهبری (Breadcrumbs):

 

نوار راهبری (Breadcrumbs)

 

نوار راهبری در سیستم های مدیریت محتوا مانند وردپرس که تعداد صفحات و محتوای زیادی دارند مرسوم می باشد و استفاده از آن باعث می شود که کمی از پیچیدگی سلسله مراتب صفحات کاسته شود و کاربر متوجه شود در کدام صفحه حضور دارد. برای پیاده سازی این المان در فریم ورک Foundation براحتی می توانید با افزودن کلاس breadcrumbs به ul و یا nav به این منظور برسید. مشخص است که در صورت استفاده از ul، آیتم ها باید در li تعریف شوند که هر کدام دارای anchor tag می باشند. اگر از nav استفاده می شود، کافیست همان تگ های لینک تعریف شوند. به کد زیر دقت کنید:

<ul class="breadcrumbs">

    <li><a href="#">Home</a></li>

    <li><a href="#">Features</a></li>

    <li class="unavailable"><a href="#">Gene Splicing</a></li>

    <li class="current"><a href="#">Cloning</a></li>

</ul>

در بخش پنجم از سری آموزشی فریم ورک Foundation ، نحوه سفارشی‌سازی منوی بالا (top bar) را آموزش می دهیم.

 

منبع: https://webdesign.tutsplus.com/articles/foundation-for-beginners-the-top-bar–webdesign-12455


برچسب‌ها:

top barزیر منولینک های والدمنوی بالا در foundationنوار بالانوار بالا در فاندیشننوار راهبری

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

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

20 − 14 =