آموزش foundation-تاپ بار
نوار هدایتی تاپ بار
یک تاپ بار، درواقع یک سرفصل هدایتی است که در بالای صفحه نمایش داده می شود:
مثال
<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. استفاده کنید.
از هر دوی کلاس های left. و right. نیز می توان استفاده نمود:
<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. استفاده کنید. در دستگاه ها با صفحه ی نمایش بزرگ، یک خط عمودی را اضافه می کند و در دستگاه ها با صفحه نمایش کوچک یک خط افقی را اضافه می کند(هنگامی که لینک ها شروع به بسته بندی می کنند):
مثال
<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 را اضافه کنید:
مثال
<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. استفاده کنید(یک خط افقی را اضافه می کند):
مثال
<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> مورد نظر استفاده کنید:
مثال
<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>
نتیجه:
منو های کشویی تو در تو
منوهای کشویی می توانند به صورت تو در تو نیز باشند:
مثال
<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> استفاده کنید:
دکمه ها و آیکن ها در تاپ بار
شما می توانید دکمه ها را درون تاپ بار قرار دهید:
شما همچنین می توانید آیکن ها را نیز درون تاپ بار قرار دهید. فقط توجه داشته باشید که باید برگه ی استایل آیکن ها را به صفحه لینک کنید. برای اطلاعات بیشتر، آموزش آیکن ها در foundation را مطالعه نمایید:
<!-- 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> قرار دهید:
مثال
<nav class="top-bar" data-topbar>
...
</nav>
</div>
نتیجه:
تاپ بار چسبنده(ضمیمه شده)
شما همچنین می توانید تاپ بار را درون یک <"div class="sticky> قرار دهید و سپس آن را در داخل کدهای خود قرار دهید. هنگامی که تاپ بار به بالای پنجره ی مرورگر می رسد، مانند یک تاپ بار ثابت عمل می کند و همان طور که کاربر به اسکرول کردن ادامه می دهد، تاپ بار به بالای صفحه می چسبد:
مثال
<nav class="top-bar" data-topbar>
...
</nav>
</div>
نتیجه:
هنگام استفاده از کلاس sticky. تاپ بار مورد نظر به طور پیش فرض در تمام اندازه های صفحه های نمایش چسبنده می باشد. اگر می خواهید که قابلیت چسبندگی تنها در صفحه های نمایش small یا medium یا large فعال باشد، خصوصیت "data-options="sticky_on: small|medium|large را به <nav> اضافه کنید:
مثال
<!-- Only sticky on large screens -->
<nav class="top-bar" data-topbar data-options="sticky_on: large">
..
</nav>
</div>
و یا اگر می خواهید خاصیت چسبندگی برای اندازه های چندگانه، میسر باشد، از یک آرایه استفاده کنید:
مثال
<!-- Sticky on small AND large screens (NOT medium)-->
<nav class="top-bar" data-topbar data-options="sticky_on: [small, large]">
..
</nav>
</div>
- نوشته شده توسط احسان عباسی
- بازدید: 3691