سبد خرید (0)

تبلیغات

آموزش foundation-تاپ بار

نوار هدایتی تاپ بار

یک تاپ بار، درواقع یک سرفصل هدایتی است که در بالای صفحه نمایش داده می شود: 

مثال

<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <!-- Remove this if you don't want a title/logo -->
      <h1><a href="#">WebSiteName</a></h1>
    </li>
      <!-- Collapsible Button on small screens: remove .menu-icon to get rid of icon. 
      Remove the "Menu" text if you only want to show the icon -->

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

  <section class="top-bar-section">
    <ul class="left">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li> 
    </ul>
  </section>
</nav>

<!-- Initialize Foundation JS for the collapsible button to work-->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

نتیجه:

خودتان امتحان کنید »

توضیح مثال بالا

یک تاپ بار استاندارد به وسیله ی <nav class="top-bar" data-topbar> ایجاد می شود. کلاس title-area. یک فضا را برای لوگوی وب سایت مشخص می کند( باید در درون li.name قرار بگیرد). همچنین ما یک دکمه ی "menu" که تنها در صفحه ی های نمایش کوچک نمایش می یابد را داریم. در فریم ورک foundation یک تاپ بار می تواند بر اساس اندازه ی صفحه ی نمایش، بزرگ یا کوچک شود: 

در صفحه های نمایش کوچک، تاپ بار فضای زیادی را اشغال می کند و بنابراین باید یا مخفی شود و یا تنها زمانی که به آن نیاز داریم نمایش داده شود. کلاس li.toggle-topbar menu.icon در صفحه های نمایش کوچک، لینک های درون تاپ بار را با یک دکمه که در گوشه ی بالا و سمت راست قرار می گیرد جایگزین می کند. و تنها وقتی که دکمه ی مورد نظر کلیک می شود، تاپ بار نمایش داده می شود. 

نکته: مرورگر خود را تغییر اندازه دهید تا تاثیر را مشاهده کنید. 

کلاس top-bar-section. یک بخش را برای لینک های هدایتی، مشخص می کند. و کلاس left. مشخص می کند که لینک ها باید به صورت چپ چین باشند. کلاس active. به کاربر اجازه می دهد تا بداند که در کدام صفحه قرار دارد و باعث می شود که یک پس زمینه ی آبی رنگ به دور لینک ایجاد شود. 

نکته: اگر می خواهید که لینک های هدایتی راست چین شوند، به جای کلاس left. از کلاس right. استفاده کنید. 

<section class="top-bar-section">
  <ul class="right">...

نتیجه:

خودتان امتحان کنید »

از هر دوی کلاس های left. و right. نیز می توان استفاده نمود: 

<section class="top-bar-section">
  <ul class="left">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
  </ul>
  <ul class="right">
    <li><a href="#">Sign Up</a></li>
    <li><a href="#">Login</a></li>
  </ul>
</section>

نتیجه:

خودتان امتحان کنید »

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

مثال

<ul class="left">
  <li class="active"><a href="#">Home</a></li>
  <li class="divider"></li>
  <li><a href="#">Page 1</a></li>
  <li class="divider"></li>
  <li><a href="#">Page 2</a></li>
  <li class="divider"></li>
  <li><a href="#">Page 3</a></li> 
  <li class="divider"></li>
</ul>

نتیجه:

خودتان امتحان کنید »

تاپ بار با خاصیت کشویی

لینک های درون تاپ بار می توانند منوهای کشویی را در خود جای دهند. 

با اضافه کردن کلاس has-dropdown. به یکی از عناصر <li> و اضافه کردن یک عنصر <ul> بعد از آن یک منوی کشویی را ایجاد کنید. توجه کنید که باید به عنصر <ul> ذکر شده، عبارت "class="dropdown را اضافه کنید: 

مثال

<section class="top-bar-section">
  <ul class="left">
    <li class="active"><a href="#">Home</a></li>
    <li class="has-dropdown">
      <a href="#">Dropdown</a>
      <ul class="dropdown">
        <li><a href="#">First link in dropdown</a></li>
        <li><a href="#">Second link in dropdown</a></li>
        <li class="active"><a href="#">Active link in dropdown</a></li>
      </ul>
    </li>
  </ul>
</section>

نتیجه:

خودتان امتحان کنید »

تقسیم کننده های منوی کشویی

برای جدا کردن لینک های درون منوی کشویی، از کلاس divider. استفاده کنید(یک خط افقی را اضافه می کند):

مثال

<ul class="dropdown">
  <li><a href="#">Apple</a></li>
  <li><a href="#">Banana</a></li>
  <li><a href="#">Orange</a></li>
  <li class="divider"></li>
  <li><a href="#">Kale</a></li>
  <li><a href="#">Spinach</a></li>
</ul>

نتیجه:

خودتان امتحان کنید »

برچسب های منوی کشویی

برای اضافه کردن برچسب/سرفصل درون منوی کشویی، از عنصر <label> درون <li> مورد نظر استفاده کنید:

مثال

<ul class="dropdown">
  <li><label>Fruit</label></li>
  <li><a href="#">Apple</a></li>
  <li><a href="#">Banana</a></li>
  <li><a href="#">Orange</a></li>
  <li class="divider"></li>
  <li><label>Vegetable</label></li>
  <li><a href="#">Kale</a></li>
  <li><a href="#">Spinach</a></li>
</ul>

نتیجه:

خودتان امتحان کنید »

منو های کشویی تو در تو

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

مثال

<section class="top-bar-section">
  <ul class="left">
    <li class="has-dropdown">
      <a href="#">Dropdown</a>
      <ul class="dropdown">
        <li><label>Level 1</label></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="has-dropdown">
          <a href="#">New dropdown</a>
          <ul class="dropdown">
            <li><label>Level 2</label></li>
            <li><a href="#">2nd level dropdown</a></li>
            <li><a href="#">2nd level dropdown</a></li>
            <li class="has-dropdown">
              <a href="#">New dropdown</a>
              <ul class="dropdown">
                <li><label>Level 3</label></li>
                <li><a href="#">3rd level dropdown</a></li>
                <li><a href="#">3rd level dropdown</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</section>

نتیجه:

خودتان امتحان کنید »

قابلیت کلیک کردن 

منوهای کشویی درون تاپ بارها به طور پیش فرض دارای قابلیت hover شدن هستند. اگر که شما می خواهید که آنها به جای hover شدن، دارای قابلیت کلیک شدن باشند، از خصوصیت "data-options="is_hover: false در <nav> استفاده کنید:

مثال

<nav class="top-bar" data-topbar data-options="is_hover: false">

نتیجه:

خودتان امتحان کنید »

دکمه ها و آیکن ها در تاپ بار

شما می توانید دکمه ها را درون تاپ بار قرار دهید: 

مثال

<li><a href="#" class="button">Button Link</a></li>

نتیجه:

خودتان امتحان کنید »

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

<head>
<!-- Link to Foundation Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css">
</head>


<ul class="left">
  <li class="active"><a href="#"><i class="fi-home"></i> Home</a></li>
  <li><a href="#"><i class="fi-torso"></i> Sign Up</a></li>
  <li><a href="#"><i class="fi-magnifying-glass"></i> Search</a></li> 
</ul>

نتیجه:

خودتان امتحان کنید »

تاپ بار ثابت

یک تاپ بار را می توان در بالای صفحه، به صورت ثابت شده، قرار داد.

یک تاپ بار ثابت، در یک مکان ثابت(بالا) نمایش می یابد به طوری که مستقل از اسکرول شدن باشد. یعنی که با اسکرول کردن، مکان آن تغییر نمی کند.  

برای اینکه تاپ بار، در بالای صفحه ثابت بماند، کافی است آن را در یک <"div class="fixed> قرار دهید:

مثال

<div class="fixed">
  <nav class="top-bar" data-topbar>
    ...
  </nav>
</div>

نتیجه:

خودتان امتحان کنید »

تاپ بار چسبنده(ضمیمه شده)

شما همچنین می توانید تاپ بار را درون یک <"div class="sticky> قرار دهید و سپس آن را در داخل کدهای خود قرار دهید. هنگامی که تاپ بار به بالای پنجره ی مرورگر می رسد، مانند یک تاپ بار ثابت عمل می کند و همان طور که کاربر به اسکرول کردن ادامه می دهد، تاپ بار به بالای صفحه می چسبد: 

مثال

<div class="sticky">
  <nav class="top-bar" data-topbar>
    ...
  </nav>
</div>

نتیجه:

خودتان امتحان کنید »

هنگام استفاده از کلاس sticky. تاپ بار مورد نظر به طور پیش فرض در تمام اندازه های صفحه های نمایش چسبنده می باشد. اگر می خواهید که قابلیت چسبندگی تنها در صفحه های نمایش small یا medium یا large فعال باشد، خصوصیت   "data-options="sticky_on: small|medium|large را به <nav> اضافه کنید:

مثال

<div class="sticky">
  <!-- Only sticky on large screens -->
  <nav class="top-bar" data-topbar data-options="sticky_on: large">
    ..
   </nav>
</div>

و یا اگر می خواهید خاصیت چسبندگی برای اندازه های چندگانه، میسر باشد، از یک آرایه استفاده کنید: 

مثال

<div class="sticky">
  <!-- Sticky on small AND large screens (NOT medium)-->
  <nav class="top-bar" data-topbar data-options="sticky_on: [small, large]">
    ..
   </nav>
</div>

 

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت پرداخت آنلاین - بانک پارسیان پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان